html table font-weight,font-weight-CSDN博客

字体粗细设置属于一种比较复杂的字体样式定义，之所以说它复杂，是因为字体本身粗细千变万化，没有统一标准，对于字体粗细的具体定义也各不相同。

中文名

字体粗细外文名

font-weight

font-weight简介

编辑

语音

本节主要讨论的就是在如此纷繁的字体粗细标准中，总结出一套可行的规律。

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

初始值：normal

作用于：所有元素

是否继承：是

百分比值：不适用

计算值：见文本

font-weight指定方法

编辑

语音

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

font-weight示例

编辑

语音

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

图1示例1

CSS Demo

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

font-size: 18pt; }

table { border-collapse: collapse; }

关键字	效果
normal	The quick brown fox jumps over a lazy dog.
bold	The quick brown fox jumps over a lazy dog.
bolder	The quick brown fox jumps over a lazy dog.
lighter	The quick brown fox jumps over a lazy dog.
100	The quick brown fox jumps over a lazy dog.
200	The quick brown fox jumps over a lazy dog.
300	The quick brown fox jumps over a lazy dog.
400	The quick brown fox jumps over a lazy dog.
500	The quick brown fox jumps over a lazy dog.
600	The quick brown fox jumps over a lazy dog.
700	The quick brown fox jumps over a lazy dog.
800	The quick brown fox jumps over a lazy dog.
900	The quick brown fox jumps over a lazy dog.

font-weight效果

编辑

语音

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

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

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

图2

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

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

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

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

font-weight映射规则

编辑

语音

条件处理方式

如果字体集中已经使用了9级数值的范围(例如OpenType一样)字体的粗细应该直接与9级数值相匹配

如果一种字体同时拥有Medium，还有Book、Regular、Roman或者Normal的字体集名称Medium通常分配为“500”，其他4个分配为“400”

字体集中有标记为“bold”的名称相当于“700”数值

如果字体集中少于9级粗细级别参照缺失填补方式，即表5.6所示

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

表4 填补缺失的方法缺失数值填补方法

“500”缺失和“400”相同

缺失“600、700、800、900”中任何一个值和下一等级较粗的值相同。如果没有，则和下一等级较细的值相同

缺失“300、200、100”中任何一个值和下一等级较细的值相同。如果没有，则和下一等级较粗的值相同

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

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

表5 字体常规对应方式可用字体名分配填补空缺

Myownfont1 Regular400100、200、300

Myownfont1 Medium500-

Myownfont1 Bold700600

Myownfont1 Heavy800900

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

表6 Myownfont2的对应匹配方式可用字体名分配填补空缺

Myownfont2 Book400100、200、300

Myownfont2 Medium500-

Myownfont2 Bold700600

Myownfont2 Heavy800-

Myownfont2 Black900-

Myownfont2 ExtraBlack不分配-

由表6可以看出，浏览器不会为ExtraBlack的关键字分配9级数值对应匹配。

有了以上匹配方式，对于“bolder”和“lighter”的匹配也不难理解。“bolder”就是匹配字体集中可用的下一级较粗字体，反之“lighter”也是一样，匹配下一级较细字体。它们的参照系都是继承值，因此粗细程度都是相对于继承值而言的。注意如果继承值已经是“900”，那么无论添加多少“bold”关键字也不会再加粗字体。

对于字体的粗细程度的定义就基本限于以上介绍的内容。对于实际应用而言，一般设计者不会在一篇文章中定义超过3级的粗细程度，且设计的时候粗细程度应该有所跳跃，否则反而不能突出加粗的内容。

词条图册

更多图册