如何使用CSS独立设置常规和粗体字重？

问题 #

我有一款包含三种字重的字体：light（轻量）、regular（常规）、bold（粗体）。希望常规文本使用light字重，粗体文本使用bold字重。但使用font-weight: lighter无法实现需求——它会将粗体文本强制改为regular字重，破坏粗体功能。请问实现该需求的正确CSS代码是什么？

错误代码示例：

<html>
<style>
p {
  font-weight: lighter;
}
</style>
<body>
<p>Light weight, <b>bold weight</b></p>
</body>
</html>

解决方案 #

不要使用lighter这类相对字重值，直接指定绝对字重关键字或对应数值，就能精准匹配字体的light和bold字重：

正确CSS代码 #

/* 常规文本绑定字体的light字重 */
p {
  font-weight: light; /* 若字体用数值定义字重，可替换为300，多数light字重对应此数值 */
}

/* 粗体元素强制绑定字体的bold字重 */
b, strong {
  font-weight: bold; /* 若字体用数值定义字重，可替换为700，多数bold字重对应此数值 */
}

完整示例代码 #

<html>
<style>
p {
  font-weight: light;
}
b, strong {
  font-weight: bold;
}
</style>
<body>
<p>Light weight, <b>bold weight</b></p>
</body>
</html>

说明 #

• light/bold是CSS标准关键字，会直接匹配字体内置的对应字重；如果你的字体是用数值定义字重等级，直接写对应数值效果完全一致。
• lighter/bolder是相对父元素的计算值，父元素设为light后，粗体元素的默认bold会被相对计算为regular，这就是原代码失效的原因，因此绝对字重值是更可靠的选择。

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