css h1标签中span标签内的文本样式应用不好

xuo3flqw  于 2023-04-08  发布在  其他
关注(0)|答案(1)|浏览(186)

听伙计们,我一直在经历一个令人沮丧的错误,而建立一个目标网页为我的网站...
所有我尝试做的是有somthing看起来像下面的图像:logo exemple with the currect output
所以为了完成这样的设计,我想做的是为蓝色文本添加一个h1标签,在它的内部,我将为粉红色文本添加一个span标签。

超文本标记语言

这就是为什么我的html看起来像这样:

<div className="header_container">
        <header>
          <h1>
            text
            <span>ti</span>
          </h1>
        </header> 
</div>

(我使用react,所以这就是为什么'className'是for)

SCSS

为了实现这种样式,我在scss文件中定义了以下内容:

.header_container{
        position: relative;
        color: #181d3d; /*blue color*/
        h1{
            font-weight: 700;
            font-size: 3.75rem;
            line-height: 4.725rem;
            span {
                color: #ec6c83; /*pink color*/
            }
        }       
}

问题是什么

出于某种原因,这是我在浏览器中得到的输出:logo exemple with the wrong output
似乎是因为span标签中的文本以相同的字母开始,h1文本以(字母't ')结束,它有点忽略span标签中第一个't'字母的样式。
例如,我尝试将span标签中的第一个字母“t”替换为“s”,结果令人满意:logo exemple with 'si' insted of 'ti'

<div className="header_container">
        <header>
          <h1>
            text
            <span>si</span>
          </h1>
        </header> 
</div>

或者只是在span标签中添加一个空格,也可以得到令人满意的结果,确保样式实现是好的:logo exemple with ' ti' in span

<div className="header_container">
        <header>
          <h1>
            text
            <span> ti</span>
          </h1>
        </header> 
      </div>
</div>

这真的是一个bug还是我做错了什么?
我试图找到在这里和其他一些网站上打开的问题。
我试着问过ChatGPT,他似乎不知道问题出在哪里。
我所期望的是,我的代码的输出将以如上所述的方式产生:logo exemple with the currect output

lh80um4z

lh80um4z1#

加倍的t看起来非常接近,这可能是由字体连字引起的。尝试应用到您的h1

font-variant-ligatures: none;

相关问题