如何设置单词中某些字母的字体粗细

Question

我正在建立一个基于设计师工作的网页.有一个单词,其中前6个字母以粗体显示,而其余字母具有正常重量.

.somediv .moreweight {
  font-weight: 900;
}

<div class="somediv">
  <h1>SOME TEXT AND THIS IS THE <span class="moreweight">COMPLI</span>CATED THING</h1>
</div>

我的页面上没有任何反应,h1标签中的整个文本具有相同的权重.

这样做的正确方法是什么？

Answer 1

您使用的字体可能没有900定义权重,因此默认情况下标记700已经使用h1了默认值.

通常,只有少数权重可用于特定字体系列.当指定不存在面部的重量时,使用具有附近重量的面部.

- CSS字体模块级别3

您在这里有两个选择:

1. 包括字体,其不支持font-weight的900沿700.
2. 使h1元素的重量更轻,当前字体已经支持(例如400):

   .somediv h1 {
     font-weight: 400;
   }
   
   .somediv .moreweight {
     font-weight: 900;
   }

   <div class="somediv">
     <h1>SOME TEXT AND THIS IS THE <span class="moreweight">COMPLI</span>CATED THING</h1>
   </div>

另一种方法是使用颜色来给人以不同重要性的印象.默认情况下为浅灰色,粗体部分为深灰色,可在此处使用:

.somediv h1 {
  color: #616161;
}

.somediv .moreweight {
  color: #000;
}

<div class="somediv">
  <h1>SOME TEXT AND THIS IS THE <span class="moreweight">COMPLI</span>CATED THING</h1>
</div>

我当然不是设计师,所以如果你的设计师不喜欢那个解决方案,不要感到惊讶!