为什么“字体粗细：加粗”会跳过加粗步骤？答案

【问题标题】：Why does "font-weight: bolder" skip boldness steps?为什么“字体粗细：加粗”会跳过加粗步骤？
【发布时间】：2013-12-26 19:19:32
【问题描述】：

根据MDN page on font-weight 和其他来源，font-weight: bolder 使文本内容“一个字体粗细比父元素暗（在字体的可用粗细中）。”

我有一个测试页，其中包含 Google Fonts 中的“Open Sans”字体，粗细分别为 300、400（又名“正常”）、600、700（又名“粗体”）和 800。设置数字字体weights 手动按预期工作，但使用 bolder 似乎会跳过字体粗细 600。

Firefox 和 Chrome 同意这一点，所以我可能误解了“一步”在这种情况下的含义。

Here's a JSFiddle 用于测试，以及我得到的结果的屏幕截图。

第一部分有手动数字font-weight 设置。第二个嵌套了div 块样式为font-weight: lighter（按预期工作），第三个嵌套了div 块和font-weight: bolder；这个显示了我试图理解的效果。

【问题讨论】：

标签： html css fonts font-face webfonts

【解决方案1】：

来自font-weight section of the CSS2.1 specification：

'bolder' 和 'lighter' 的值表示相对于父元素的权重的值。根据继承的重量值，使用下表计算使用的重量。子元素继承计算的权重，而不是“更粗”或“更轻”的值。

Inherited val   bolder  lighter
100             400     100
200             400     100
300             400     100
400             700     100
500             700     100
600             900     400
700             900     400
800             900     700
900             900     700

这意味着任何bolder 比font-weight 400 的权重为700，任何比字体粗细为700 的粗体都被赋予900 的权重。

这正是您的 JSFiddle 演示中正在发生的事情。

加粗

This is some text with weight 400.        <!-- 400 -->
This text is one step bolder than above.  <!-- bolder than 400 = 700 -->
This text is one step bolder than above.  <!-- bolder than 700 = 900 -->
This text is one step bolder than above.  <!-- bolder than 900 = 900 -->
This text is one step bolder than above.  <!-- ... -->

打火机

This is some text with weight 400.        <!-- 400 -->
This text is one step lighter than above. <!-- lighter than 400 = 100 -->
This text is one step lighter than above. <!-- lighter than 100 = 100 -->
This text is one step lighter than above. <!-- ... -->

【讨论】：

你的 Google-fu 比我的快。 /弓
@OnoSendai 为各种规格添加书签会有所帮助。 :)
触摸！我记得以前遇到过这个问题，但我必须承认我必须查一下。
当然，这说明了一切。我在想什么，查看其他来源而不是直接查看规格...
因为您使用了逻辑，@Zilk，这是大多数情况下的最佳方法。但有时规格不符合逻辑 - 或者也许有一个原因，尽管它可能是令人费解的。

【解决方案2】：

从纯逻辑上讲，你是对的。但根据W3C recommendation，事实并非如此。引用文档：

'bolder' 和 'lighter' 的值表示相对于父元素的权重。根据继承的权重值，使用的重量使用下表计算。子元素继承计算的重量，而不是“粗体”或“较轻”的值。

[Inherited value]   [bolder]    [lighter]
100                 400         100
200                 400         100
300                 400         100
400                 700         100
500                 700         100
600                 900         400
700                 900         400
800                 900         700
900                 900         700

【讨论】：