使用 CSS 在网页中进行字体排版是非常常见的操作，字体不仅仅是文字表达的载体，也是网页设计中不可或缺的一部分。本文将详细介绍CSS文档中常用的字体。
1. 字体分类
在CSS中，可用的字体通常可以分为5类：
1.1 万能字体（Generic Font Family）
这类字体指的是在CSS中预设的，没有具体字体族名的通用字体，当具体的字体不可用时，网页上就会呈现为这些字体之一。例如：
font-family: sans-serif;
以上代码表示要在这个元素中使用“无衬线字体族（Sans-serif font family）”。这个字体族通常用来显示较小的字体或需要较高的可读性的情景，例如段落文本。
1.2 衬线字体（Serif Font Family）
这类字体的特点是每个字体都有独特的装饰，在每个字母或图形的末端都有一条笔画，通常称之为“衬线”（Serif）。例如：
font-family: serif;
以上代码表示要在这个元素中使用“衬线字体族（Serif font family）”。这个字体族通常用来显示较大一些的文本，例如标题。
1.3 等宽字体（Monospace Font Family）
这类字体的特点是每个字符的宽度相等，这样可以使得字体更易阅读。例如：
font-family: monospace;
以上代码表示要在这个元素中使用“等宽字体族（Monospace font family）”。这个字体族通常用来显示像代码这样需要对齐的文本。
1.4 手写字体（Cursive Font Family）
这类字体通常被设计成有一些风格的连笔和倾斜，以模仿手写字符。例如：
font-family: cursive;
以上代码表示要在这个元素中使用“手写字体族（Cursive font family）”。
1.5 平面字体（Fantasy Font Family）
这类字体的特点是“不寻常”，可能是一些花哨的字体或装饰字体，用来提高设计性。例如：
font-family: fantasy;
以上代码表示要在这个元素中使用“平面字体族（Fantasy font family）”。
2. 指定字体
要在CSS中指定字体，可以用“font-family”属性。例如：
p {
font-family: Arial, sans-serif;
}
这段代码中，“p”表示要将下列样式应用于段落，之后紧跟着的“font-family”属性表示要使用“Arial”字体。如果找不到Arial，则使用第二个通用字体族“sans-serif”。
如果需要同时使用多个字体，可以在“font-family”属性中使用逗号来分隔字体名，浏览器会按照顺序逐一查找支持的字体并选择该使用哪一个字体。例如：
p {
font-family: "Helvetica Neue", Arial, sans-serif;
}
这里先指定了“Helvetica Neue”字体，浏览器首先会查找该字体是否存在，如果存在则使用该字体，否则继续查找下一个字体。
3. 字体样式
除了字体种类之外，我们还可以通过CSS控制字体的各种样式，包括：
3.1 字体粗细
在CSS中，可以通过“font-weight”属性控制字体的粗细程度，取值方式如下：
- 100 - Thin
- 200 - Extra Light (Ultra Light)
- 300 - Light
- 400 - Normal
- 500 - Medium
- 600 - Semi Bold (Demi Bold)
- 700 - Bold
- 800 - Extra Bold (Ultra Bold)
- 900 - Black (Heavy)
例如：
h1 {
font-weight: bold;
}
这里将“h1”元素的字体设置为“bold”即加粗。
3.2 字体大小
在CSS中，可以通过“font-size”属性控制字体的大小，可以采用像素、EM、rem和百分比等多种单位，例如：
p {
font-size: 16px;
}
这段代码把“p”元素中的字体大小设置为16像素。
3.3 字体样式
在CSS中，可以通过“font-style”属性控制字体的样式，取值如下：
- normal - 默认字体样式
- italic - 斜体字
- oblique - 倾斜字
例如：
em {
font-style: italic;
}
这里将“em”元素中的字体样式设置为斜体。
3.4 文本转换
在CSS中，可以通过“text-transform”属性控制文本的大小写格式，取值如下：
- none - 不变换
- uppercase - 大写字母
- lowercase - 小写字母
- capitalize - 首字母大写
例如：
.strong {
text-transform: capitalize;
}
这里将“strong”元素中的文本转换成首字母大写。
4. 字体引入
有时候我们需要使用一些自定义的字体，这时候可以通过CSS引入自定义字体文件。字体文件通常以“.ttf”、“.woff”或“.otf”等后缀结尾，在CSS中引入自定义字体文件方式如下：
@font-face {
font-family: "MyFont";
src: url("myfont.ttf");
}
这段代码用“@font-face”关键字定义一个自定义字体，其中“font-family”指定字体的名称，“src”指定字体文件路径。之后就可以使用“font-family: MyFont”来引用这个字体了。
5. 总结
通过本文的介绍，我们了解了CSS中常用字体的分类、指定方法，以及字体样式的控制方式。字体不仅仅是文字的表达载体，在网页设计和排版中也有着不可或缺的作用。了解CSS字体可以帮助我们更好地进行网页排版，提高用户体验。