CSS 字体

CSS定义了5种通用的字体系列。

  • Serif 字体——成比例，有上下短线，包括: Times、Georgia和New Century Schoolbook
  • Sans-serif 字体——成比例，没有上下短线，包括：GenevaVendana、Arial和Univers
  • Monospace 字体——等宽，可能有上下短线，用于模拟打字机文本和老式点阵打印机的输出，包括: Courier、Courier New 和 Andale Mono
  • Cursive 字体——模仿手写体，包括：Zapf Chancery、Author和Comic Sans
  • Fantasy 字体——无法用特征来定义，包括: Western、Woodblock和Klingon

font-family 字体系列

font-family: [[<family-name> | <generic-family>], ]* [<family-name> | <generic-family>] | inherit

初始值： 用户代理指定的值

应用于： 所有元素

继承性：　有

计算值： 根据指定值确定

font-family可以使用通用字体系列和指定字体系列。

如果希望文档使用一种sans-serif字体而不关心是哪一种具体字体时可以用：①body {font-family:sans-serif;}这样用户代理就会从sans-serif字体系列中选择一个字体来应用到body元素。

如果使用具体字体：②h1{font-family: Georgia;}如果Georgia字体可用，用户代理将对所有的h1使用Georgia字体。如果不可用，规则无效，采用用户代理的默认字体显示h1。

当然可以通过结合特定字体和通用字体来达到文档的尽量统一： h1 {font-family: Georgia, serif;}此声明表示如果Georgia可用则使用Georgia字体，否则使用另外一种serif字体。

强烈建议在所有的font-family规则中都提供一个通用字体系列（备选），因为在一个跨平台的环境，将无法知道谁安装了什么字体。

Note: 如果字体名中出现一个或多个空格，或者包含#或$之类的符号时，尽量使用引号 ‘ ‘ 来包住:h1 {font-family: 'New Century Schoolbook'}

CSS2.1 规定包含符号的字体并不一定要加引号，但是这是安全的做法，是“最佳实践”。但如果字体名字和关键字相同，尽管没有空格或特殊符号，也必须使用引号，如”cursive”字体。在指定具体的通用系列时不能加引号，否则用户代理会认为你需要一个与此同名的特字体如serif，而不是一个通用字体。

font-weight 字体加粗

- 格式

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

初始值： normal

应用于： 所有元素

继承性：　有

计算值： 数字值(如100等等)，或某个数字值加上某个相对数(bolder或lighter)

p {font-weight: bold}会使字体加粗显示，实际上是使用字体的一种加粗变形来显示p元素。如果p的使用字体是Times, 那么加粗的p则是使用TimesBold字体。

- 如何加粗

加粗等级分成9级： 100 200 … ~ … 900

CSS规范只是指出，每个数对应一个加粗度，它至少与前一个数指定的加粗的相同。因此100、200、300和400都可能映射到同样的较细变形；500和600可能对应到同样的较粗字体变形；而700、800和900可能都生成同样的很粗的字体变形。只要一个关键字的变形不会比前一个关键字所对应的变形更细，就都是允许的。

100到900的数字表现要字体指定，一般400定义为normal，700对应于bold。

两个特殊值：bolder会导致加粗度上移，同理lighter会导致加粗度下移。

font-size 字体大小

font-size: xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | <length> | <percentage> | inherit

初始值： medium

应用于： 所有元素

继承性：　有

百分数： 根据父元素的字体大小来计算

计算值： 绝对长度

font-size属性与用户看到的实际字体大小直径的具体关系由字体的设计者来确定，这种关系设置为字体本身中的一个em方框。em不一定指示字体中字符建立边界，相反，它指示如果没有定义额外行间距（line-height）设置字体时基线间的距离。某种字体的的字符可能比基线要高，但大部分字体都定义字符小于其em框。font-size的作用是为给定字体的em框提供一个大小，而不能保证实际显示的字符就是这种大小。

  • 绝对大小：xx-small, x-small, small medium, large, x-large, xx-large。 CSS1规范，一个绝对大小与下一个绝对大小之间的差别（或缩放因子）应当是向上1.5或者往下0.66，这个缩放因子由用户代理来定义。

  • 相对大小：smaller & larger 相对于其父元素大小在绝对大小梯度采用计算因子上移或下移

p {font-size: medium} strong, em{font-size: larger}

1
2
3
4
5
6
7

<p> medium
	<strong> large
		<em> x-large
			<strong>xx-large</strong>
		</em>
	</strong>
<p>

  • 百分数和大小：根据父元素继承的大小来计算。

  • 字体大小和继承：根据计算值继承

1
2
3

p {font-size: 12px;}
em {font-size: 120%;}
strong {font-size: 135%;}

其中strong元素的大小值计算如下： 12px ✖ 120% = 14.4px （可能取整为14px） 14.4px ✖ 135% = 19.44px（可能取整为19px）

  • 使用长度单位
1
2
3
4
5

p.one {font-size: 36pt;}
p.two {font-size: 3pc;}
p.three {font-size: 0.5in;}
p.four {font-size: 1.27cm;}
p.five {font-size: 12.7mm;}

font-style 字体风格

值： normal | oblique | normal | inherit

初始值： normal

应用于： 所有元素

继承性：　有

计算值： 根据指定确定

italic 和 oblique的区别：斜体（italic）是一种单独的字体风格，对每个字母的结构有一些小改动。而倾斜（oblique）则是正常竖直（normal）文本的一个倾斜版！

font-variant 字体变形

值： small-caps | normal | inherit

初始值： normal

应用于： 所有元素

继承性：　有

计算值： 根据指定确定

若定义规则

1

h1 {font-variant: small-caps;}

在h1元素的显示中，只要文本源中出现大写字母则显示一个更大的大写字母，出现一个小写字母，就显示一个小型的大写字母。

small-caps由字体来定义。若没有这样的字体则：1）用户代理自己缩放大写字母来创建一个small-caps字体。2）让所有字母都大写，而且大小相同（和声明text-transform:upper-case;一样）。

font-stretch 拉伸字体

值： normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit

初始值： normal

应用于： 所有元素

继承性：　有

这个属性用于让一种字体的字符更胖或更瘦。

font-size-adjust 调整字体

值： <number>; | none | inherit

初始值： none

应用于： 所有元素

继承性：　有

font 属性

值： [[<font-style> || <font-varian> || <font-weight>] ? <font-size> [/<line-height>] ? <font-family>] | caption | icon | menu | message-box | small-caption | status-bar | inherit

初始值： 根据单个属性

应用于： 所有元素

继承性：　有

百分数： 对于<font-size>要相对于父元素来计算；对于 <line-height>则相对于元素的<font-size>来计算

计算值： 见单个属性（font-style等）

  • 前三个属性 - 只有前面三个属性<font-style>   <font-varian>   <font-weight> 可以按照任何顺序来写。如果三个中某一属性为normal，则可以忽略。

  • 两个必要属性 - font-size一定要在font-family前面，而且font声明里面必须有这两个值，其他值都是可选的。

  • line-height - 增加行高，它是一个文本属性，但也可以作为对font-size的一个补充，用一个斜线（／）与之分隔：h2 {font: bold italic 200%/1.2 Verdana, Helvertica, Arial, sans-serif;}line-height是可选的，如果出现必须在font-size／后面。

  • 简写 - 所有被忽略（没写出来的属性）都会重置为其默认值。

  • 使用系统字体 - 取得操作系统中的元素字体大小、字体系列、字体加粗、字体风格和变形，并将其应用到一个元素。例如把一个按钮的字体设置为与操作系统的按钮字体完全相同：button {font: caption}。系统字体可能只能整体设置，字体系列、大小、加粗、风格等一起设置。不过一旦设置了系统字体，就可以修改其中的单个值。如：确保按钮的字体与其父元素的字体大小相等：button{font: caption; font-size: 1em;}。在需要一个系统字体但用户机器上找不到的时候，用户代理可能试图找一种近似的字体。

字体匹配

过程比较复杂……

【本文内容摘自：《CSS权威指南》（第三版） Eric A. Meyer 著 尹志忠 侯妍 译】