CSS：“粗体”和“粗体”字体粗细样式有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5592868/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: what is the difference between "bolder" and "bold" font-weight styles?
提问by sergionni
What is the difference between font-weight: bolder;and font-weight: bold;styles?
font-weight: bolder;和font-weight: bold;style和有什么不一样？
I never met such style until today, when I found it in our project's CSS file. Result is the same visually(tested on Ubuntu 10.10, Firefox 3.6.15).
直到今天，当我在我们项目的 CSS 文件中发现它时，我才遇到这种样式。结果在视觉上是相同的（在 Ubuntu 10.10、Firefox 3.6.15上测试）。
回答by Pekka
bolderis a relative font weight:
bolder是相对字体粗细：
The 'bolder' and 'lighter' values select font weights that are relative to the weight inherited from the parent
'bolder' 和 'lighter' 值选择相对于从父级继承的权重的字体权重
bolderand lighterare even part of the official spec. How they are interpreted and displayed is up to the browser.
bolder和lighter是的，甚至部分官方规格。如何解释和显示它们取决于浏览器。
The fact that they appear the same visually is because most browsers don't properly support font weight variations beyond boldand normal.
它们在视觉上看起来相同的事实是因为大多数浏览器都没有正确支持bold和之外的字体粗细变化normal。
Here's a question with background info: Are all CSS font-weight property's values useful?
这是一个带有背景信息的问题：所有 CSS font-weight 属性的值都有用吗？
回答by Alohci
Pekka's answer is technically correct, but judging from the comments to that answer, the implications of it are not properly understood.
Pekka 的答案在技术上是正确的，但从对该答案的评论来看，其含义并未得到正确理解。
First we need to understand the difference between specified weight, computed weight and rendered weight.
首先我们需要了解指定权重、计算权重和渲染权重之间的区别。
For bold, the specified weight is "bold", the computed weight is "700" and the rendered weight depends on the font, and the only guarantee is that it won't be lighter than elements with lower computed weights. (i.e. Since "normal" equates to "400", "bold" will never be rendered lighter than "normal" is (though it could be rendered identically.)
对于bold，指定的权重为“粗体”，计算权重为“700”，渲染权重取决于字体，唯一的保证是它不会比计算权重较低的元素轻。（即，由于“正常”等于“400”，因此“粗体”永远不会比“正常”更亮（尽管它可以以相同的方式呈现。）
For bolder, the specified weight is "bolder" and the computed weight is "400" if the container element has a computed weight of less than or equal to 300, otherwise "700" if the container element has a computed weight of less than or equal to 500, otherwise "900" The rendered weight again depends on the font with the same guarantee.
对于bolder，如果容器元素的计算权重小于或等于 300，则指定的权重为“粗体”，计算权重为“400”，否则，如果容器元素的计算权重小于或等于，则为“700”到 500，否则为 "900" 渲染的权重再次取决于具有相同保证的字体。
Since typefaces typically only natively support normaland boldweights, this often means that font-weight:boldand font-weight:bolderget rendered identically even if they have different computed weights.
由于字体通常只本地支持normal和bold权重，这往往意味着font-weight:bold和font-weight:bolder得到相同的渲染，即使他们有不同的计算权重。
But it doesn't haveto be the case, even if the font only supports those two weights. In particular, if the container element has a computed weight less than "400", then "bolder" will compute to a weight of "400" and render the same as an element with a specified weight of "normal".
不过，这并不有要的情况下，即使字体仅支持这两个权重。特别是，如果容器元素的计算权重小于“400”，那么“大胆”将计算权重为“400”，并与具有指定权重“正常”的元素渲染相同。
To illustrate this, see this JsFiddle: http://jsfiddle.net/UgAa5/1
为了说明这一点，请参阅此JsFiddle：http://jsfiddle.net/UgAa5/1
<style>
p { font-weight:300; font-size:2em }
#scenario1 b { font-weight:bolder; }
#scenario2 b { font-weight:bold; }
</style>
<p id="scenario1">
<span>plain</span>
<b>bold?</b>
</p>
<p id="scenario2">
<span>plain</span>
<b>bold?</b>
</p>
1 Current versions of IE, Firefox, Chrome and Opera all demonstrate this correctly. Older browsers, such as Safari 5.1 do not.
1当前版本的 IE、Firefox、Chrome 和 Opera 都正确地证明了这一点。较旧的浏览器（例如 Safari 5.1）不支持。
2 The HTML5 spec says that the <b>element should have a default font-weight of "bolder". Firefox and IE do that, but webkit/blink based browsers default to "bold", and normalize.css applies a font-weight:boldsetting to the <b>element for all browsers.
2 HTML5 规范规定该<b>元素的默认字体粗细应为“粗体”。Firefox 和 IE 会这样做，但基于 webkit/blink 的浏览器默认为“粗体”，并且 normalize.css 将font-weight:bold设置应用于<b>所有浏览器的元素。
