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

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 Fonts Module Level 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>

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

Answer 2

字体权重在排版文件中定义。如果您的排版重量为300和400，则无法定义900重量。因此，请确保您使用的是字体并包含允许您使用900重量的所有样式。