可变字体使我们可以很容易地从一个单一的字体文件中创建一大套字体样式。不幸的是，目前浏览器中对<b> 和<strong> 元素的默认渲染与可变字体所启用的广泛的font-weight 值不太兼容。
浏览器在默认的font-weight 的问题上存在分歧<b>
的目的是 <b>和 <strong>元素的目的是让人们注意到页面上的某个特定单词或某段文字。浏览器通过增加这些元素的font-weight 。这在正常情况下效果不错。例如，MDN Web Docs在每个页面底部的 "发现问题？"卡片中的几个地方使用了<b> 。
当页面上的文本有一个自定义的font-weight ，事情就变得更加复杂。文本的默认重量是400 ，但font-weight 属性接受1 和1000 （包括）之间的任何数字。让我们来看看Chrome和Firefox是如何根据周围文本的font-weight ，默认以<b> 来呈现文本包装的。
Chrome和Firefox在<b> 元素的默认渲染上存在分歧。font-weight Chrome使用一个恒定的700 （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 。
两种默认值中哪一种更好？
浏览器中有两种不同的默认值，而火狐的默认值与标准一致。那么，Chrome应该向Firefox看齐，还是Chrome的默认值更好？让我们再看看<b> 元素的默认渲染。
这两个默认值都有一个弱点。Chrome的bold 默认值在较高的font-weight 值时出现故障（大约在700 ），而Firefox的bolder 默认值在较低的font-weight 值时出现问题（大约在300 ）。
在Firefox的最坏情况下，用<b> 包裹的文本几乎无法辨认。font-weight 下面的截图显示了Firefox中349 的文本。你能**发现被包裹在<b> 中的单字吗？**Firefox在默认的font-weight ，即400 ，这只增加了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 的值已经过时了，而且不能很好地与可变字体配合。font-weight 理想情况下，无论周围文本的<b> ，被包裹的文本应该很容易被发现。浏览器可以通过将font-weight 始终增加相同或相似的数量来实现这一点。
关于这一点，CSS工作组正在讨论允许以与font-size 相同的方式在font-weight 中使用百分比。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 的默认值更好。
