H1标签内首尾字母相同的span文本样式未正常生效问题求助

直接解决办法 #

给h1添加CSS属性禁用字体连字，即可让span内的"ti"全部显示粉色：

.header_container{
    position: relative;
    color: #181d3d; /*blue color*/
    h1{
        font-weight: 700;
        font-size: 3.75rem;
        line-height: 4.725rem;
        font-variant-ligatures: none; /* 禁用字体连字 */
        span {
            color: #ec6c83; /*pink color*/
        }
    }  
}

问题原因 #

这不是你的代码错误，是浏览器的**字体连字（ligatures）**特性导致的：

• 你使用的字体（大概率是支持连字的现代无衬线字体，比如Inter、Roboto等）会把相邻的可组合字符（比如这里"text"的最后一个t和span里的第一个t）合并渲染成一个视觉上的连字符号。
• 浏览器渲染时会把这两个t当成一个整体字符块，导致span的颜色样式只作用在后面的i上，第一个t因为和前面的t合并，继承了h1的蓝色。
• 当你把t换成s或者加空格时，两个字符无法组成连字，浏览器就会按正常的HTML结构分别渲染样式。

其他可选方案 #

如果不想禁用全局连字，也可以在span前插入零宽空格（不会影响视觉布局）：

<h1>
    text
    {'\u200B'}
    <span>ti</span>
</h1>

内容的提问来源于stack exchange，提问作者Tamir Avraham