CSS字体

字体系列

CSS定义了5中通用字体系列

1. Serif

2. Sans-serif

3. Monospace，等宽字体

4. Cursive，手写体

5. Fantasy

   理论上，用户安装的任何字体系列都会落入到上述通用系列之中。

   <p style="font-family: serif;">我是serif字体</p>
   <p style="font-family: sans-serif;">我是sans-serif字体</p>
   <p style="font-family: monospace;">我是monospace字体</p>
   <p style="font-family: cursive;">我是cursive字体</p>
   <p style="font-family: Fantasy;">我是Fantasy字体</p>
   

使用font-family来指定字体。

例如: h1 {font-famliy: Georgia, serif;} 如果Georgia字体不可用，则会使用另外一种serif字体。

建议在所有的font-famliy中都提供一个通用的字体系列

字体加粗

font-weight: normal(初始值) | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit(可以继承)

1. font-weight 取值为数字

对于同一个字体会有很多不同的变形，这些变形使用相同的基本字体，但是每个变形都有不同的加粗。例如：对于字体Zurich而言, Zurich Bold, Zurich Black, Zurich UltraBlack, Zurich Light和Zurich Regular都是其不同的粗细的变形。

字体定义了9级加粗度，分别为100~900，100最细，900最粗。

这些数字都有某个常用的变形名等价，400定义为normal，700对于于bold。

可能有多个数字，对应了同一个变形。

下表中展示了Zurich的不同变形对应的数字

字体	指定的关键字	指定的数字
Zurich Light		100,200,300
Zurich Regular	normal	400
Zurich Medium		500
Zurich Bold	bold	600,700
Zurich Black		800
Zurich UltraBlack		900

font-family: 'Zurich Light'

font-famly: 'Zurich'; font-weight: 100

font-famly: 'Zurich'; font-weight: 200

font-famly: 'Zurich'; font-weight: 300

以上四条规则使用的字体相同。

2. font-weight 取值为border或者lighter

   如果将一个元素的加粗设置为border，浏览器会首先确定其父元素的font-weight的值，然后选择下一个加粗级别中最小的加粗值，若不存在该字体，则设置为下一个更大的数字，直到该数字为900。

   以上面Zurich字体为例：

   p { font-weight: normal; } //400
   p em { font-weight: border; } // 500
   

   p { font-weight: light; } //100
   p em { font-weight: border; } // 400,如果该字体Lighter后面的字体都不存在，则改值为 200
   

   lighter的做法一致，只不过会导致加粗度下移而不是上移。

字体大小

font-size: xx-small | x-small | small | medium(初始值) | large | x-large | xx-large | smaller | lager | <length> | <percentage> (根据父元素的大小来计算)| inherit(可继承)

font-size的作用是为给定字体的em框提供一个大小，而不能保证实际字符就是这种大小。实际字体大小之间的具体关系是由字体的设计者来确定的。

1. 绝对大小

   font-size有7个绝对大小的关键字 xx-small | x-small | small | medium(初始值) | large | x-large | xx-large ，但是这些关键字并没有明确的定义，而是相对定义的。根据css1规范，一个绝对大小与下一个绝对大小之间的差别（缩放因子）应当是向上1.5，向下0.66。但是不同的浏览器使用的缩放因子可能不同。

   假设medium等于16px，对于不同的缩放因子，得到下表中不同的绝对大小。

   关键字	缩放：1.5	缩放：1.2
   xx-small	5px	9px
   x-small	7px	11px
   small	11px	13px
   medium	16px	16px
   large	24px	19px
   x-large	36px	23px
   xx-large	54px	28px

2. 相对大小

   larger和smaller很简单：使元素的大小相对于其父元素的大小在绝对大小梯度上上移或下移，使用计算绝对大小的缩放因子。

   p { font-size: medium} // 16px

   p em { font-size: larger} // 16*1.2

3. 百分数

   百分数总是根据从父元素继承的大小来计算。

4. 继承

   font-size 是可以继承的，但是继承的是计算值而不是百分数。

   例如：

   p { font-size: 12px; }
   p em { font-size: 120%; } // 12*1.2 ≈ 14px(浏览器会对像素大小进行取整)
   p em strong { font-size: 135%; } // 14 * 1.35 ≈ 19px (而非 12*1.2*1.35)
   

字体风格

font-style: italic(斜体) | oblique(倾斜) | normal(正常，初始值) | inherit(可继承)

字体变形

font-variant: small-caps(小型大写字母文本) | normal(初始值) | inherit(可继承)

拉伸和调整字体

font-stretch: 让一种字体的字符更胖或者更瘦

font-size-ajust: 当所用字体非创作人员首选时，仍然保证可以辨识

font-face

使用font-face可以在文档中下载一个远程字体来使用。

@font-face {
  font-family: 'MyFont';
  src: url(http://www.myfont.com/myfont.ps)
}