CSS3字体属性详解：font-family、font-size与font简写实践

脚本专家

在Web开发中，字体设置是前端样式的基础。CSS3提供了多组字体属性来控制文字的外观，包括字体族、大小、粗细、样式以及变形。本文将结合实例梳理这些属性的用法与注意事项，帮助开发者正确区分字体与文本属性，并掌握font简写规则的要点。

字体与文本的区别
字体指文字的具体体式（如Times、Helvetica），包含衬线、无衬线、等宽等类别；而文本指具体的内容块（如标题、段落）。CSS中字体属性描述字体的外观（类型、大小、粗斜），文本属性描述排版方式（行高、缩进、下划线）。两者不应混淆。

1. font-family：指定字体族
使用font-family可以设置首选字体及后备字体，例如：

2. h2 { font-family: times, serif; }

复制代码

通用字体族包括：
- serif（衬线，笔画末端有装饰）
- sans-serif（无衬线，笔画末端无装饰）
- monospace（等宽，适用于代码）
- cursive（草书或手写体）
- fantasy（装饰性字体）
建议在字体列表末尾添加通用族作为保底。

2. font-size：控制字号
常用单位有px、em、百分比。浏览器默认字体大小为16px，即1em = 16px。rem单位相对于根元素（html）的字体大小，修改根元素字体后所有rem值会统一变化，适合响应式设计。示例：

2. h2 { font-size: 18px; }

复制代码

3. font-style与font-weight：斜体与粗细
font-style取值：italic（斜体）、oblique（倾斜体）、normal（正常）。italic通常使用字体的斜体版本，oblique由普通字体倾斜模拟。

2. a { font-style: italic; }

复制代码

font-weight取值：100~900数字，或关键字lighter、normal、bold、bolder。常用bold和normal。

2. a { font-weight: bold; }

复制代码

4. font-variant：小型大写字母（慎用）
取值为small-caps时将小写字母显示为小型大写字母，常用于块引用或首行伪元素::first-line。

2. blockquote { font-variant: small-caps; }

复制代码

注意：该效果可能在非英文字符中表现不佳，建议谨慎使用。

5. font简写属性
font可以将多个字体属性合并声明，但必须遵守两条规则：
- 必须包含font-size和font-family。
- 顺序为：font-weight、font-style、font-variant（三者顺序不限），然后是font-size，最后是font-family，之间用空格分隔。
示例：

2. p:nth-child(2) {
3.   font: bold italic small-caps 2em sans-serif;
4. }

复制代码

该声明等价于分别设置font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 2em; font-family: sans-serif;。

总结
CSS3字体属性是前端样式的基础模块。通过合理选择font-family后备列表、使用rem统一字号、以及利用font简写减少代码量，可以高效实现跨平台字体控制。注意区分字体属性与文本属性的职责，避免将行高或缩进误用字体属性设置。掌握这些细节，有助于编写更健壮的样式表。

热心网友5

感谢楼主的详细整理！字体属性这块确实是前端基础中的重点，特别是 `font` 简写顺序很多人容易搞混，你总结的“必须包含 size 和 family，顺序固定”这一点很实用。另外提一个细节：`font-variant: small-caps` 在中文环境下基本无效，这个提醒也很到位，新手可能会踩坑。 我个人习惯把 `font-size` 统一用 rem 配合根元素百分比，这样整体缩放很方便。想问一下楼主，对于 `font-weight` 的数字值，不同浏览器对 400、500 这类中间值的渲染表现一致吗？有时候感觉同样设 500，不同字体差异挺大，不知道你有没有类似的观察？