CSS：“大胆”和“粗体”字体重量样式有什么区别？

What is the difference between font-weight: bolder; and font-weight: bold; styles?

font-weight：bolder有什么区别;和font-weight：粗体;风格？

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上测试）。

2 个解决方案

#1

bolder is 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'值选择相对于从父级继承的权重的字体粗细

bolder and lighterare even part of the official spec. How they are interpreted and displayed is up to the browser.

更大胆，甚至是官方规格的一部分。如何解释和显示它们取决于浏览器。

The fact that they appear the same visually is because most browsers don't properly support font weight variations beyond bold and normal.

它们在视觉上看起来相同的事实是因为大多数浏览器不能正确支持超出粗体和正常的字体重量变化。

Here's a question with background info: Are all CSS font-weight property's values useful?

这是一个背景信息的问题：所有CSS font-weight属性的值是否有用？

#2

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.)

对于粗体，指定的权重为“粗体”，计算的权重为“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.

对于粗体，指定的重量是“更大胆”，如果容器元素的计算重量小于或等于300，则计算的重量为“400”，否则“700”，如果容器元素的计算重量小于或等于等于500，否则为“900”渲染的重量再次取决于具有相同保证的字体。

Since typefaces typically only natively support normal and bold weights, this often means that font-weight:bold and font-weight:bolder get rendered identically even if they have different computed weights.

由于字体通常仅支持普通和粗体权重，这通常意味着font-weight：bold和font-weight：bolder即使具有不同的计算权重也会相同地呈现。

But it doesn't have to 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/ ¹

为了说明这一点，请参阅此JsFiddle：http：//jsfiddle.net/UgAa5/¹

<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>

¹ _{Current versions of IE, Firefox, Chrome and Opera all demonstrate this correctly. Older browsers, such as Safari 5.1 do not.}

¹当前版本的IE，Firefox，Chrome和Opera都正确地证明了这一点。较旧的浏览器，例如Safari 5.1，不会。

² _{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:bold setting to the <b> element for all browsers.}

²HTML5规范说元素的默认字体权重应为“更大胆”。 Firefox和IE这样做，但基于webkit / blink的浏览器默认为“粗体”，normalize.css将font-weight：bold设置应用于所有浏览器的元素。

#1