可变字体使您可以轻松地从单个字体文件创建 大量字体样式。不幸的是，如今浏览器中 <b> 和 <strong> 元素的默认渲染与可变字体启用的广泛的 font-weight 值不兼容。
浏览器在 <b> 的默认 font-weight 上存在分歧
<b> 和 <strong> 元素的目的是引起页面上特定单词或文本片段的注意。浏览器通过增加这些元素的 font-weight 来使它们脱颖而出。这在正常情况下效果很好。例如，MDN Web Docs 在每个页面底部的“发现问题？”卡片中的一些地方使用了 <b>。
当页面上的文本具有自定义 font-weight 时，情况变得更加复杂。文本的默认权重为 400，但 font-weight 属性接受介于 1 和 1000（含）之间的任何数字。让我们看看 Chrome 和 Firefox 在默认情况下如何渲染包含在 <b> 中的文本，具体取决于周围文本的 font-weight。
Chrome 和 Firefox 在 <b> 元素的默认渲染上存在分歧。Chrome 使用 700 的恒定 font-weight（Safari 的行为相同），而 Firefox 根据周围文本的 font-weight 在三个值（400、700 和 900）之间进行选择。
这种差异来自哪里？
您可能已经猜到了，Chrome 和 Firefox 在其用户代理样式表中为 <b> 和 <strong> 元素使用了不同的 font-weight 值。
/* Chrome and Safari’s user agent stylesheet */
strong, b {
font-weight: bold;
}
/* Firefox’s user agent stylesheet */
strong, b {
font-weight: bolder;
}bold 和 bolder 值在 CSS 字体模块 中指定；bold 等于 700，而 bolder 是一个 相对权重，其计算方式如下
如果外部文本的 font-weight 为…… | 则 bolder 关键字计算为…… |
|---|---|
1 到 349 | 400 |
350 到 549 | 700 |
550 到 899 | 900 |
900 到 1000 | 无变化（与外部文本的值相同） |
Chrome 和 Firefox 在 <b> 的默认渲染上存在分歧，但哪个浏览器更符合标准？font-weight 属性本身在 CSS 字体模块中定义，但不同 HTML 元素的建议 font-weight 值位于 HTML 标准的 渲染部分。
/* The HTML Standard suggests the following user agent style */
strong, b {
font-weight: bolder;
}HTML 标准早在 2012 年 就开始建议使用 bolder 而不是 bold。截至今天，只有 Firefox 遵循此建议。Chrome 和 Safari 尚未切换到 bolder。由于这种不一致性，流行的 Normalize 基础样式表包含一个 CSS 规则，该规则 在浏览器之间强制执行 bolder。
这两个默认值中哪个更好？
浏览器中有两个不同的默认值，Firefox 的默认值与标准匹配。那么，Chrome 应该与 Firefox 保持一致，还是 Chrome 的默认值更好？让我们再看看 <b> 元素的默认渲染。
这两个默认值各有弱点：Chrome 的 bold 默认值在较高的 font-weight 值（大约 700）下会失效，而 Firefox 的 bolder 默认值在较低的 font-weight 值（大约 300）下存在问题。
在 Firefox 的最坏情况下，包含在 <b> 中的文本几乎无法辨认。以下屏幕截图显示了 Firefox 中 font-weight 为 349 的文本。你能找到包含在 <b> 中的单个单词吗？Firefox 以 400 的默认 font-weight 渲染此元素，这仅增加了 51 个单位。
要点
如果您使用细字体或 font-weight 值低于 350 的可变字体，请注意，<b> 和 <strong> 元素在 Firefox 中默认情况下可能并不总是可辨认的。在这种情况下，最好手动为 <b> 和 <strong> 定义自定义 font-weight，而不是依赖于浏览器次优的默认值，该默认值不足以增加这些元素的 font-weight。
/* Defining the regular and bold font-weight at the same time */
body {
font-weight: 340;
}
b,
strong {
font-weight: 620;
}bolder 值 已过时 并且与可变字体配合使用效果不佳。理想情况下，包含在 <b> 中的文本应该无论周围文本的 font-weight 如何都易于识别。浏览器可以通过始终将 font-weight 增加相同或相似的量来实现这一点。
关于这一点，CSS 工作组正在讨论是否允许在 font-weight 中使用百分比，就像在 font-size 中一样。Lea Verou 写道
一个更常见的用例是，我们希望获得比周围文本更粗或更细的笔画，这种方式与周围文本的粗细无关。
/* Increasing font-size by 100% */
h1 {
font-size: 200%;
}
/* PROPOSAL - Increasing font-weight by 50% */
strong, b {
font-weight: 150%;
}考虑到可变字体，150% 这样的值可能比如今浏览器中现有的 bold/bolder 默认值更好。
老实说，我认为 Firefox 的默认值是正确的，但实现效果不佳。他们不应该使用硬编码的步骤，而应该在“bolder”上应用 +300。我同意，至少对于示例字体而言，300 和 400 之间的差异太小，无法使用。
另一方面，Chrome/Blink 始终使用权重 700 的样式非常易于理解，但在周围文本的权重超过 550 时会失败，因为权重差异太小甚至方向错误。
Firefox 遵循 HTML 规范，因此在这方面比其他浏览器更好。也就是说，他们应该为 bolder 采用 +200 左右的跳跃。这将适用于所有地方。
文章标题很公平，但给人一种其他浏览器没有此问题的印象，而实际上它们更糟糕。
本文的标题具有误导性。问题不在于“Firefox 的 'bolder' 默认值”，而在于 'bolder' 规范很奇怪，而且最近才过时。
Chrome 和 Safari 的 'bold' 默认值是错误的，甚至比 Firefox 更糟糕。默认情况下，超过 600 的文本使用 700 粗体毫无意义。
更好的标题应该是“ 和 默认规范对可变字体来说是个问题”
文章的标题很短，可以有多种解读方式。作为作者，我关心的是文章的内容准确且客观。我认为我已经清楚地表明我没有指责 Firefox。只有那些不阅读标题后面内容的人才会收到错误的信息。
我在标题中使用“Firefox”而不是“规范”的原因是，我认为浏览器中的实现比规范中写的内容更重要，因此我认为将重点放在浏览器上更有意义。如果没有任何浏览器实现规范中的问题，那么该问题就不重要，但浏览器中的问题始终很重要。