font-weight

更新时间:2024-07-11 13:39

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

简介

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

属性值: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)的字体粗细程度。每一个数字定义的粗细都要比上一个等级稍微粗一些。

示例

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

示例1

CSS Demo

关键字效果

效果

字体的粗和细这种描述方法本身就是一种相对描述,所谓粗和细也必须要有一个参照体。例如,在上面介绍的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列举了一些映射规则。

映射规则

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

表4 填补缺失的方法

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

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

表5 字体常规对应方式

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

表6 Myownfont2的对应匹配方式

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

有了以上匹配方式,对于“bolder”和“lighter”的匹配也不难理解。“bolder”就是匹配字体集中可用的下一级较粗字体,反之“lighter”也是一样,匹配下一级较细字体。它们的参照系都是继承值,因此粗细程度都是相对于继承值而言的。

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

免责声明
隐私政策
用户协议
目录 22
0{{catalogNumber[index]}}. {{item.title}}
{{item.title}}