设置字体属性是 CSS 样式表最常见的用途之一。为你的页面选择合适的字体以及样式能增强读者的用户体验。

1. 字体类型

在 CSS 中，有两种不同类型的字体系列名称：
(1) 通用字体系列 —— 拥有相似外观的字体系统组合（例如 “Serif” 或 “Cursive”）
CSS 定义了 5 种通用字体系列：
① Serif 字体（衬线字体）：字体成比例，而且有上下短线装饰。
② Sans-serif 字体（非衬线字体）：字体成比例，但是没有有上下短线装饰。
③ Monospace 字体（等宽字体）：每个字符的宽度都是一样的。
④ Cursive 字体（草书字体）：手写体的一种模仿。
⑤ Fantasy 字体（虚幻字体）：无法用任何特征来定义。

(2) 特定字体系列 —— 具体的字体系列（例如 “Times” 或 “Arial”）

2. 字体属性

2.1 使用指定字体

2.1.1 font-family

CSS 属性 font-family 允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。

font-family 属性有 2 种值可选：
① family-name：即字体名称，可以使用多个字体名称，用空格分隔。
② inherit：继承父元素的字体。

尽管 font-family 属性能帮你把任何字体应用到文章中，但是使用中还需要注意以下几点：
① 为了避免用户代理无法提供与规则匹配的特定字体，我们最好在所有的 font-family 属性中都提供一个通用字体。font-family 支持我们一次性指定多种字体并为其创建一个优先次序（我们称之为「字体堆栈」）。
② 当一个字体名中有一个或者多个空格（如 New York），或者如果字体名包括 # 或 $ 之类的符号，需要在 font-family 声明中加引号（单双引号都可以）；如果 font-family 被双引号括起，就必须在规则内部使用单引号。
③ 说到字体可用性，只有某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用。这些都是所谓的「网页安全字体」。在各种资源中，cssfontstack.com 网站维护了一个可用在 Windows 和 Mac 操作系统上使用的网页安全字体的列表，这可以帮助决策网站的安全性。

2.1.2 @font-face

@font-face 通过指定字体的下载地址（当这种字体在用户的计算机上没有安装时，就会自动下载）来让你调用字体，即便用户在浏览时使用的计算机上没有安装相应的字体也可以使用。
@font-face 一般有三个属性 font-family、src、format。
① font-family 属性指定了字体的名称。
② src指定了字体的路径。它可以是远程字体文件位置的URL或者用户计算机上的字体名称，也可以使用 local 语法通过名称指定用户的本地计算机上的字体(例如 src: local('Arial');）。为兼容所有浏览器，你可能需要提供字体多种不同版本的路径。
③ format指定了字体的格式。一般包括 eot、woof、ttf / otf、svg 这几种。
④ 其他还能在 @font-face 中指定的属性值有 font-style、font-size、font-variant、font-weight、font-stretch。

2.2 字体大小

CSS 使用 font-size 来对字体的大小进行控制，它的实际作用是为给定字体的 em 框提供一个大小，而不能保证实际显示的字符就是这种大小。

font-size 属性有 5 种值可选：
① xx-small ~ xx-large：绝对大小，用户代理会根据 medium 字体大小的值乘以一定的缩放因子为字体取值。
② smaller/larger：相对大小，会相对于元素父元素字体大小进行缩放。
③ (length)：使用固定的长度值来指定文本的字体大小。
④ (percentage)：根据父元素的继承大小来计算。
⑤ inherit：继承父元素的字体大小的计算值。

在调整字体大小时候，最常用的单位有三个：
① px : 即像素单位。px 是绝对单位，它导致了在任何情况下，页面上的文本所计算出来的像素值都是一样的。
② em : em 值可以以父元素中的文本大小作为参照物来改变当前元素中的文本大小。
③ rem : rem 字体尺寸单位将根据页面上的根元素（一般指 html 元素）的字体大小而计算出的实际大小。

PS : 文本在浏览器中的默认大小为 16px ；继承的是计算值而不是百分数。

2.3 字体颜色

CSS 使用 color 来对字体的颜色进行控制，颜色指定的方式可详见 CSS 之颜色。

2.4 字体风格

CSS 使用 font-style 来定义字体的风格。

font-style 属性有 4 种值可选：
① italic：使用字体的斜体样式。
② oblique：使用字体的倾斜样式，即将字体以一定的角度进行倾斜。
③ normal：默认值，即非斜体或倾斜的文本。
④ inherit：继承父元素的字体样式。

PS ：在使用属性值 italic 的时候，如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italic。

2.5 字体粗细

CSS 使用 font-weight 来对字体的粗细进行控制。

font-weight 属性有 5 种值可选：
① 100 ~ 900：绝对大小，字体指定了 9 级加粗度，一般来说，400 等同于 normal，而 700 等同于 bold。
② smaller/larger：相对大小，会相对于元素的父元素字体粗细进行粗细调整。
③ normal：默认值，即正常字体粗细。
④ bold：为字体设置粗体样式。
⑤ inherit：继承父元素的字体粗细的计算值。

2.6 字体变形

CSS 使用 font-variant 使字体发生一种变形。其中 normal 用于描述正常文本，small-caps 要求使用小型大写字母文本。

font-variant 属性有 3 种值可选：
① small-caps：使用小型大写字母文本，即为一种采用不同大小的大写字母文本。
② normal：默认值，即正常文本。
③ inherit：继承父元素的字体变形样式。

2.7 字体伸缩

CSS 使用 font-stretch 来让字体的字符进行变得更胖或更瘦。

2.8 字体调整

CSS 使用 font-size-adjust 来对保证当所用字体并非创作人员首选时，仍然可以保证辨识。

font-variant 属性有 3 种值可选：
① (number)：声明字体的 aspect 值，x-height 除以 font-size 的结果成为方面值。
② none：默认值，即不进行调整。
③ inherit：继承父元素的字体调整样式。