5.4 字体粗细设置font-weight

字体粗细设置属于一种比较复杂的字体样式定义，之所以说它复杂，是因为字体本身粗细千变万化，没有统一标准，对于字体粗细的具体定义也各不相同。本节主要讨论的就是在如此纷繁的字体粗细标准中，总结出一套可行的规律。

属性值：normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 继承值

初始值：normal

作用于：所有元素

是否继承：是

百分比值：不适用

计算值：见文本

font-weight的属性值有3种指定方法：第1种是关键字法，关键字包括“normal”和“bold”两个；第2种是相对粗细值法，相对粗细也是由关键字定义，但是它的粗细是相对于上级元素的继承值而言的，包括“bolder”和“lighter”两个；第3种为数字法，包括从“100”到“900”的9个数字序列（注意，只能是100、200之类的整百数）。这些数字序列代表从最细（100）到最粗（900）的字体粗细程度。每一个数字定义的粗细都要比上一个等级稍微粗一些。

示例5.7演示了font-weight属性所描述的关键字所对应的一般效果，这里选择Windows常用的Times New Roman字体作为演示效果，如图5.9所示。

示例5.7

<html>

<head>

<style>

body,table,tr,td { font-family: "Times New Roman", Times;

font-size: 18pt; }

table { border-collapse: collapse; }

</style>

</head>

<body>

<tr style="font-weight: normal;"><td>normal</td><td>The quick brown fox jumps over a lazy dog.</td></tr>

<tr style="font-weight: bold;"><td>bold</td><td>The quick brown fox jumps over a lazy dog.</td></tr>

<tr style="font-weight: bolder;"><td>bolder</td><td>The quick brown fox jumps over a lazy dog.</td></tr>

<tr style="font-weight: lighter;"><td>lighter</td><td>The quick brown fox jumps over a lazy dog.</td></tr>

<tr style="font-weight: 100;"><td>100</td><td>The quick brown fox jumps over a lazy dog.</td></tr>

<tr style="font-weight: 200;"><td>200</td><td>The quick brown fox jumps over a lazy dog.</td></tr>

<tr style="font-weight: 300;"><td>300</td><td>The quick brown fox jumps over a lazy dog.</td></tr>

<tr style="font-weight: 400;"><td>400</td><td>The quick brown fox jumps over a lazy dog.</td></tr>

<tr style="font-weight: 500;"><td>500</td><td>The quick brown fox jumps over a lazy dog.</td></tr>

<tr style="font-weight: 600;"><td>600</td><td>The quick brown fox jumps over a lazy dog.</td></tr>

<tr style="font-weight: 700;"><td>700</td><td>The quick brown fox jumps over a lazy dog.</td></tr>

<tr style="font-weight: 800;"><td>800</td><td>The quick brown fox jumps over a lazy dog.</td></tr>

<tr style="font-weight: 900;"><td>900</td><td>The quick brown fox jumps over a lazy dog.</td></tr>

</table>

</body>

</html>

图5.9 font-weight属性的关键字所对应的显示效果

字体的粗和细这种描述方法本身就是一种相对描述，所谓粗和细也必须要有一个参照体。例如，在上面介绍的3类属性值之间需要有一个相互对照匹配的过程，这是一个很难界定的过程。关键字“normal”相当于“400”，“bold”相当于“700”。除了“normal”和“bold”以外的其他关键字常常会令浏览器产生误解，无法直接和数值相匹配，此时字体的粗细程度通常取决于字体本身的设置。

在以下介绍的内容中，将通过一些普遍的法则，来描述字体粗细程度的规律。

对于林林总总的字体而言，目前并没有一个统一的规则标明粗细的程度。有的字体名称本身就能描绘粗细程度，如图5.10所示，在“Arial Bold”等类似字体的名称中，本身就能表示自己的粗细。Arial Bold的字体显示也确实要比Arial粗不少。

图5.10 字体本身名称中就带有“bold”字样

像这样的字体名称的主要作用就是在单个字体集中区别字体的粗细程度，例如在Arial字体集中区别粗细程度。

另外，有的字体看上去比较粗，但是它们的字体描述却是“Regular、Roman、Book（常规）”、“Medium、Semi-（半）”或者“DemiBold、Bold、Black（黑体）”等字样，这主要取决于该字体本身“normal”表示的粗细程度。

正因为没有一个标准的字体名称用法，所以当前CSS 2.1版本的粗细属性值用“400”代表“normal”无论它究竟有多粗或者多细。与“normal”或者“400”相关联的粗细名称通常是“Book、Regular、Roman、Normal、Medium”，表示“普通、中等”的意思。

在字体集名称和9级数值之间，有着一些对应关系，表5.5列举了一些映射规则。

表5.5 映射规则

条件	处理方式
如果字体集中已经使用了9级数值的范围（例如OpenType一样）	字体的粗细应该直接与9级数值相匹配
如果一种字体同时拥有Medium，还有Book、Regular、Roman或者Normal的字体集名称	Medium通常分配为“500”，其他4个分配为“400”
字体集中有标记为“bold”的名称	相当于“700”数值
如果字体集中少于9级粗细级别	参照缺失填补方式，即表5.6所示

如果字体集中少于9级粗细度算法，那么填补缺失的方法如表5.6所示。

表5.6 填补缺失的方法

缺失数值	填补方法
“500”缺失	和“400”相同
缺失“600、700、800、900”中任何一个值	和下一等级较粗的值相同。如果没有，则和下一等级较细的值相同
缺失“300、200、100”中任何一个值	和下一等级较细的值相同。如果没有，则和下一等级较粗的值相同

例如，如果一个字体中缺失“500”和“900”，那么该字体的9级粗细值就应该相当于“100、200、300、400、400、600、700、800、800”。

表5.7所示的是一种字体的常规对应方式，假设有一种字体叫做“Myownfont1”，它共有Regular、Medium、Bold、Heavy等4个关键字表示粗细等级，则对应匹配方式如下。

表5.7 字体常规对应方式

可用字体名	分配	填补空缺
Myownfont1 Regular	400	100、200、300
Myownfont1 Medium	500	-
Myownfont1 Bold	700	600
Myownfont1 Heavy	800	900

假设有一种字体叫做“Myownfont2”，共有6个等级，此时对应匹配方式如表5.8所示。

表5.8 Myownfont2的对应匹配方式

可用字体名	分配	填补空缺
Myownfont2 Book	400	100、200、300
Myownfont2 Medium	500	-
Myownfont2 Bold	700	600
Myownfont2 Heavy	800	-
Myownfont2 Black	900	-
Myownfont2 ExtraBlack	不分配	-