尽管你可能还没有意识到，但实际上你已经对字体加粗很熟悉了，粗体文本就是字体加粗的一个很常见的例子。利用font-weight属性，CSS允许对字体加粗有更多控制，至少在理论上是这样。
font-weight
值：
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
初始值：
normal
应用于：
所有元素
继承性：
有
计算值：
数字值（如100等等），或某个数字值加上某个相对数（bolder或 lighter）
一般来讲，字体加粗越重，字体看上去就越黑且“越粗”。标示加粗字体的方法有很多。例如，名为Zurich的字体系列有很多变形，如Zurich Bold、Zurich Black、Zurich UltraBlack、Zurich Light和Zurich Regular。这些变形都使用相同的基本字体，但是每个变形都有不同的加粗。
现在假设你希望一个文档使用Zurich，但是你想使用所有这些不同的加粗级别。可以直接通过font-family属性来指定，不过最好不要这样做。另外，如果必须写下面这样的样式表也没意思：
h1 {font-family:'Zurich UltraBlack ', sans-serif;}
h2 {font-family:'Zurich Black', sans-serif;}
h3 {font-family:'Zurich Bold', sans-serif;}
h4, p {font-family: Zurich', sans-serif;}
small {font-family:'Zurich Light', sans-serif;}
写这样一个样式表显然很乏味，不仅如此，只有当所有人都安装了这些字体时，样式表才能起作用，但更有可能的情况是，大多数人都没有安装所有这些字体。更有意义的做法是为整个文档指定一个字体系列，然后为不同元素指定不同的加粗。从理论上讲，可以对font-weight属性使用不同的值来做到这一点。以下是一个很简单的font-weight:声明：
b {font-weight: bold;}
很简单，这个声明指出b元素应当使用一种粗体字体显示，换句话说，要用一种比文档正常字体更粗的字体来显示。当然，我们经常见到这种情况，因为b确实会让文本加粗。
不过，实际情况是使用字体的一种加粗变形来显示b元素。因此，如果使用Times显示一个段落，而且其中一部分是粗体，那么实际上当前使用了同一字体的两种变形：Times 和TimesBold。常规的文本使用Times显示，加粗的文本使用TimesBold显示。
加粗如何起作用
为了理解用户代理如何确定一个给定字体变形的加粗度，我们暂不考虑加粗如何继承，首先介绍关键字100-900，这样最容易理解。定义这些数字关键字是为了映射字体设计中的一个很常见的特性，即为字体指定了9级加粗度。例如OpenType采用了一个数值梯度，其中包含9个值。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100对应最细的字体变形，900对应最粗的字体变形。
实际上，这些数字本身并没有固有的加粗度。CSS规范只是指出，每个数对应一个加粗度，它至少与前一个数指定的加粗度相同。因此，100、200、300和400可能都映射到同样的较细变形，500和600可能对应到同样的较粗字体变形，而700、800和900 可能都生成同样的很粗的字体变形。只要一个关键字对应的变形不会比前一个关键字所对应变形更细，就都是允许的。
一般地，这些数都被定义为与某个常用变形名等价（先不考虑font-weight的其他值）。 400定义为等价于normal, 700对应于bold。其他数不对应font-weight的任何其他值，不过它们可能对应于常用变形名。如果有一个字体变形标为Normal、Regular、Roman 或Book，就会为之指定400，而标为Medium的变形会指定为500。不过，如果一个标为Medium的变形是唯一可用的变形，它不会指定为500而会是400。
如果给定的字体系列中定义的加粗度少于9种，用户代理还必须多做一些工作。在这种情况下，它必须以一种预定的方式填补这些“空白”：
如果未指定值500的加粗度，其字体加粗与400的相应加粗相同。
如果未指定300的加粗度，则为之指定下一个比400更细的变形。如果没有可用的较细变形，为300指定的变形等同于400的相应变形。在这种情况下，通常是Normal或Medium。这种方法同样适用于200和100。
如果未指定600的加粗度，会为之指定下一个比400更粗的变形。如果没有可用的较粗变形，为600指定的变形则等同于500的相应变形。这种方法同样适用于700、800 和 900.
为了更清楚地说明这种加粗机制，下面来看指定字体加粗的三个例子。在第一个例子中，假设字体系列Karrank%是一种OpenType字体，所以它已经定义了9个加粗度。在这种情况下，数字已经对应到各个加粗级别，关键字normal和bold分别对应数字400和700。
第二个例子中，我们考虑了字体系列Zurich，这个字体系列在本节最开始讨论过。假设已经为其变形指定了不同的font-weight数字值，见表5-1所示。
前三个数字值被指定为最细的字体加粗。不出所料，对于标有Regular的变形，相应的关键字为normal，数字值为400。因为在此有一个Medium字体，它指定为数字值500。这里没有为600指定任何变形，因此它映射到Bold字体，700也指定为这个字体变形，相应的关键字是bold。最后，800和900分别指定为Black和UltraBlack变形。注意，只有已经指定了有最大两级加粗的字体时，800和900才会分别指定为Black和 UltraBlack变形。否则，用户代理可能会将其忽略，而将800和900指定为Bold字体，或者可能会把它们都指定为某种Black变形。
最后，来考虑Times的一种缩减版本。表5-2中只有两种加粗变形：TimesRegular和 TimesBold。
当然，关键字normal和bold的指定很直接。至于数字，100~300被指定为Regular字体，因为没有更细的字体了。400按预想的那样被指定为Regular，但是500呢？它也被指定为Regular （或normal）字体，因为没有可用的Medium字体，因此它与400被指定为同样的字体。至于余下的数字，与往常一样，700被指定为bold，由于没有一种更粗的字体，800和900只能被指定到下一个较细的字体，即Bold字体。最后，600 要被指定到下一个更粗的字体，当然这就是Bold字体。
font-weight是可以继承的，所以如果将一个段落设置为bold:
p.one {font-weight: bold;}
那么它的所有子元素都会继承这个加粗度，如图5-4所示。
这很平常，但是如果你使用最后两个值（bolder和lighter），情况会变得很有意思，有必要对这两个值详细讨论。一般来讲，这些关键字的效果正如你期望的那样：它们会让文本比其父元素的字体加粗更粗或更细。首先，我们来考虑bolder。
让字体更粗
如果将一个元素的加粗设置为bolder，用户代理首先必须确定从父元素继承的font-weight值。然后选择一个数，它对应于比所继承值更粗的一个字体加粗，而且在满足这个条件的所有数中，要选择最小的一个数。如果没有可用的字体，用户代理会把该元素的字体加粗设置为下一个更大的数字值，除非这个值已经是900，如果确实如此，加粗则保持为900。因此，可能会遇到以下情况，如图5-5所示：
p {font-weight: normal;}
p em {font-weight: bolder;}/* results in bold text, evaluates.to '700'*/
h1 {font-weight: bold;}
h1 b {font-weight: bolder;}/* if no bolder face exists, evaluates to _800'*/
div {font-weight: 100;}/* assume 'Light' face exists; see explanation */
div strong {font-weight: bolder;}/* results in normal text, weight '400'*/
在第一个例子中，用户代理将加粗从normal上移为bold，按数字来讲，它从400跳至700。在第二个例子中，h1文本已经设置为bold。如果没有更粗的字体，用户代理就会把h1中b文本的加粗设置为800，因为700 （与bold等价的数）的下一个数就是800，由于800和700被指定为同一个字体，所以正常的h1文本和粗体h1文本之间看上去没有任何差别，不过其加粗确实不同。
在最后一个例子中，段落的字体加粗设置为最细，在此假设存在Light变形。另外，这个字体系列中的其他字体是Regular和Bold。段落中的任何em文本都会计算为normal，因为这是该字体系列中下一个最粗的字体，不过，如果字体中只有Regular和Bold会怎么样呢？在这种情况下，声明将计算如下：
/* assume only two faces for this example:'Regular' and 'Bold'*/
p (font-weight: 100;}/* looks the same as 'normal' text */
p span {fonc-weight: bolder;}/* maps to '700'*/
可以看到，加粗数100被指定为normal字体，但是font-weight值还是100。因此，p 元素中包含的所有span文本都会继承这个值100，然后计算下一个最粗的字体，即数字加粗值为700的Bold字体。
下面增加另外两个规则以及一些标记，进一步说明所有这些是如何工作的（结果见图5-6所示）：
/* assume only two faces for this example:'Regular' and 'Bold'*/
p {font-weight: 100;}/* looks .the same as 'normal' text */
p span {font-weight: 400;}/* so does this */
strong {font-weight: bolder;}/* even bolder Chan its parent */
strong b {font-weight: bolder;}/*bolder still */
<p>
This paragraph contains elements of increasing weight: there is a <span>span element that contains a <strong>strongly emphasized element and a <b>boldface element</b></strong></span>.
在最后两个嵌套元素中，font-weight的计算值增加了，因为这里使用了关键字bolder。如果把段落中的文本替换为表示各元素font-weight的数字，可以得到如下的结果：
<p>
100 <span> 400 <strong> 700 <b> 800 </b></strong></span>
</p>
前面两个加粗提升很大，因为它们表示从100跃至400，以及从400跃至bold (700)。从700向上再没有更粗的字体了，所以用户代理只是将font-weight值向上移一步，移到800。另外，如果你想在b元素中插入一个strong元素，会得到如下的结果：
<p>
100 <span> 400 <atrong> 700 <b> 800 <strong> 900
</strong></b></strong></span>
</p>
如果再有另一个b元素插入到最内层strong元素中，其加粗也是900，因为font- weight 值不可能比9 0 0 更高。假设只有两种可用的字体风格，那么文本要么显示为Regular要么显示为Bold，如图5-7所示：
<p>
regular <span> regular <strong> bold <b> bold <strong> bold
</strong></b></strong></span>.
</p>
让字体更细
可以预料，lighter的做法完全一样，只不过它会导致用户代理将加粗度下移而不是上移。对前面的例子稍做修改，可以很清楚地看到这一点：
/* assume only two faces for this example:'Regular' and 'Bold'*/
p {font-weight: 900;}/* as bold as possible, which will look 'bold1 */
p span {font-weight: 700;}/* this will also be bold */
Strong {font-weight: lighter;}/* lighter than its parent */
b {font-weight: lighter;}/* lighter still */
<p>
900 <span> 700 <strong> 400 <b> 300 <strong> 200
</strong></b></strong></ span>
<!--...or, to put it another way...-->
<p> bold <span> bold <strong> regular <b> regular
<strong> regular </strong></b></strong></span>
</p>
尽管直观上看这完全不对劲，不过暂且不考虑这个问题。从图5-8可以看到主段落文本的加粗为900。如果将strong文本设置为lighter，它会计算为下一个较细的字体，即regular字体，或数字值400 （与normal相同）。再向下一级是300，这等同于normal，因为不存在更细的字体。从300向下，用户代理一次只能将加粗值下移一步，直到达到100 （本例中没有减到100）。第二个段落显示了哪些文本是bold，哪些是regular。