WEB基础之：CSS字体
字体
1. 字体系列
除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：
- Serif 字体: 这些字体成比例，而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度，则称该字体是成比例的。例如，小写 i 和小写 m 的宽度就不同。上下短线是每个字符笔划末端的装饰，比如小写 l 顶部和底部的短线，或大写 A 两条腿底部的短线。Serif 字体的例子包括 Times、Georgia 和 New Century Schoolbook。
- Sans-serif 字体: 这些字体是成比例的，而且没有上下短线。Sans-serif 字体的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。
- Monospace 字体: Monospace 字体并不是成比例的。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出，甚至更老式的视频显示终端。采用这些字体，每个字符的宽度都必须完全相同，所以小写的 i 和小写的 m 有相同的宽度。这些字体可能有上下短线，也可能没有。如果一个字体的字符宽度完全相同，则归类为 Monospace 字体，而不论是否有上下短线。Monospace 字体的例子包括 Courier、Courier New 和 Andale Mono。
- Cursive 字体: 这些字体试图模仿人的手写体。通常，它们主要由曲线和 Serif 字体中没有的笔划装饰组成。例如，大写 A 再其左腿底部可能有一个小弯，或者完全由花体部分和小的弯曲部分组成。Cursive 字体的例子包括 Zapf Chancery、Author 和 Comic Sans。
- Fantasy 字体: 这些字体无法用任何特征来定义，只有一点是确定的，那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。这样的字体包括 Western、Woodblock 和 Klingon。
2. font-family使用字体系列
font-family 先确定多个字体的优先顺序，然后用逗号将它们连起来：
p {font-family: "Times New Roman", "Microsoft New Tai Lue", Georgia, Serif, Arial;}
根据上面的列表。用户代理会按所列的顺序查找这些字体，若所列所有字体都不可用，就会简单地选择一个可用的serif字体。
即：font-family 属性的值是用于某个元素的字体族名称一个优先级列表。浏览器会调用按优先顺序查找后可识别的第一个字体名称。
- 建议在所有font-family规则中都提供一个通用字体系列，在用户代理无法提供与规则匹配的特定字体时，会选择一个候选字体。
- font-family中使用引号：使用场景是当一个字体名中有一个或多个空格，或者字体名包含#或$之类的符号；
3. font-weight字体加粗
加粗的相对值必须要限制在绝对大小范围内。
p {font-weight: normal;}
p {font-weight: bold;}
p {font-weight: 900;}
| 属性值 | 描述 |
|---|---|
| normal | 默认值。定义标准的字符。 |
| bold | 定义粗体字符。 |
| bolder | 定义更粗的字符。 |
| lighter | 定义更细的字符。 |
| 100 200 300 400 500 600 700 800 900 | 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 |
| inherit | 规定应该从父元素继承字体的粗细。 |
4. 字体大小
| 属性值 | 描述 |
|---|---|
| xx-small x-small small medium large x-large xx-large | font-size有7个绝对大小值，从 xx-small 到 xx-large。 默认值：medium。 |
| smaller larger | 不同于加粗的相对值，相对大小不必限制在绝对大小范围内。 因此一个字体的大小可以超过属性值描述xx-small和xx-large的大小。 |
| length | 把 font-size 设置为一个固定的值。 |
| % | 基于父元素继承的大小计算一个百分比值。 有时长度值em等价于百分数值，即确定字体大小时1em等于100% |
| inherit | 规定应该从父元素继承字体尺寸。 |
- 使用 em 来设置字体大小
W3C 推荐使用 em 尺寸单位。避免在 Internet Explorer 中无法调整文本的问题。浏览器中默认的文本大小是 16 像素。1em 等于当前的字体尺寸，那么对于浏览器来说，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。
可以使用下面这个公式将像素转换为 em：pixels/16=em
假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em
h2 {font-size:2.5em;} /* 40px/16=2.5em */
在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：
body {font-size:100%;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
5. 字体风格和变形
5.1 font-style属性
该属性设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。理论上讲，用户代理可以根据正常字体计算一个斜体字体。
| 属性值 | 描述 |
|---|---|
| normal | 默认值。浏览器显示一个标准的字体样式。 |
| italic | 浏览器会显示一个斜体的字体样式。 |
| oblique | 浏览器会显示一个倾斜的字体样式。 |
| inherit | 规定应该从父元素继承字体样式。 |
斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
5.2 font-variant属性
font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
| 属性值 | 描述 |
|---|---|
| normal | 默认值。浏览器会显示一个标准的字体。 |
| small-caps | 浏览器会显示小型大写字母的字体。 |
| inherit | 规定应该从父元素继承 font-variant 属性的值。 |
6. 拉伸和调整字体
6.1 font-stretch拉伸字体
p {font-stretch: ultra-condensed;}
| 属性值 | 描述 |
|---|---|
| normal | 默认值。把缩放比例设置为标准。 |
| wider | 把伸展比例设置为更进一步的伸展值；测试时不支持 |
| narrower | 把收缩比例设置为更进一步的收缩值；测试时不支持 |
| ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded | 设置 font-family 的缩放比例。 “ultra-condensed” 是最宽的值 “ultra-expanded” 是最窄的值。 |
| inherit | 规定应该从父元素继承font-stretch 属性的值。 |
6.2. font-size-adjust 调整字体
| 属性值 | 描述 |
|---|---|
| none | 默认。如果此字体不可用，则不保持此字体的 x-height。 |
| number | 定义字体的方面值比率。x-height与字符大小的比 可使用的公式： 声明的font-size * （font-size-adjust 值 / 可用字体的方面值）= 调整后的font-size 举例： font-size设置为10px ，Verdana字体x-height与字符大小的比值是0.58，而对于Times则是0.46，在使用Times代替Verdana字体的情况下，那么替代字体的尺寸将是 10 * (0.58/0.46) = 12.6px。 |
7. font属性
| 属性值 | 描述 |
|---|---|
| font-style | 规定字体样式。 |
| font-variant | 规定字体异体。 |
| font-weight | 规定字体粗细。 |
| font-size/line-height | 规定字体尺寸和行高。 |
| font-family | 规定字体系列。 |
| caption | 定义被标题控件（比如按钮、下拉列表等）使用的字体。 |
| icon | 定义被图标标记使用的字体。 |
| menu | 定义被下拉列表使用的字体。 |
| message-box | 定义被对话框使用的字体。 |
| small-caption | caption 字体的小型版本。 |
| status-bar | 定义被窗口状态栏使用的字体。 |
7.1 典型字体规则
p {font: italic 900 small-caps 30px Verdana, Helsinki, Arial, sans-serif;}
font的属性值要以font-size在前，font-family在后，作为声明中的最后两个值，而且，font声明中必须有这两个值。
7.2 line-height增加行高
该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。可以作为对font-size值的一个补充，并用斜线(/)与之分隔。
body {font-size: 12px;}
p {font: bold italic 200%/1.2 Verdana, Helsinki, Arial, sans-serif;}
