CSS字体

字体系列

在 CSS 中，有两种不同类型的字体系列名称：

通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或"Monospace"）

特定字体系列 - 具体的字体系列（比如 "Times" 或"Courier"）

除了各种特定字体系列外（如 Times、Verdana、Helvetica 或 Arial），CSS 还定义了 5 种通用字体系列：

Serif字体

这些字体成比例，而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度，则成该字符是成比例的。例如，小写 i 和小写 m 的宽度就不同。上下短线是每个字符笔划末端的装饰，比如小写 l 顶部和底部的短线，或大写 A 两条腿底部的短线。Serif 字体的例子包括 Times、Georgia 和 New CenturySchoolbook。

Sans-serif字体

这些字体是成比例的，而且没有上下短线。Sans-serif字体的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。

Monospace字体

Monospace 字体并不是成比例的。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出，甚至更老式的视频显示终端。采用这些字体，每个字符的宽度都必须完全相同，所以小写的 i 和小写的 m 有相同的宽度。这些字体可能有上下短线，也可能没有。如果一个字体的字符宽度完全相同，则归类为 Monospace 字体，而不论是否有上下短线。Monospace字体的例子包括 Courier、Courier New 和 Andale Mono。

Cursive字体

这些字体试图模仿人的手写体。通常，它们主要由曲线和 Serif 字体中没有的笔划装饰组成。例如，大写 A 再其左腿底部可能有一个小弯，或者完全由花体部分和小的弯曲部分组成。Cursive 字体的例子包括 ZapfChancery、Author 和 Comic Sans。

Fantasy字体

这些字体包含某种风格的装饰性字体，那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。这样的字体包括 Western、Woodblock 和 Klingon。

font-family属性（即创建一个首选字体列表）可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。

只有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。例如：

p{

font-family:”Emblema One”,san-serif;

}

字体风格

font-style 属性最常用于规定斜体文本。

该属性有三个值：

normal - 文本正常显示

italic - 文本斜体显示

oblique - 文本倾斜显示

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

字体变形

font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

字体加粗

font-weight 属性设置文本的粗细，使用 bold 关键字可以将文本设置为粗体。

关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而700 等价于 bold，如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。

字体大小

font-size 属性设置文本的大小。

font-size 值可以是绝对或相对值。

绝对值：

将文本设置为指定的大小

不允许用户在所有浏览器中改变文本大小（不利于可用性）

绝对大小在确定了输出的物理尺寸时很有用

相对大小：

相对于周围的元素来设置大小

允许用户在浏览器改变文本大小

如果没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。

使用像素来设置字体大小

通过像素设置文本大小，可以对文本大小进行完全控制

使用em来设置字体大小

1em 等于当前的字体尺寸。浏览器中默认的文本大小是 16 像素，如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。

结合使用百分比和em

在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值

CSS 字体属性

属性	描述
font	简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-size-adjust	当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch	对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style	设置字体风格(正常或倾斜)。
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	设置字体的粗细。