讲解
font-family 接受一个「字体栈」——按优先级列出一串字体名，浏览器用第一个在用户系统里找到的。栈的末尾一定要放一个通用族名兜底：serif（衬线，如宋体）、sans-serif（无衬线，如黑体）、monospace（等宽，代码用）、system-ui（跟随操作系统的界面字体）。字体名含空格时要用引号包起来，如 "Microsoft YaHei"。中文站点的经典写法是西文字体在前、中文字体在后——西文字体不含汉字，中文自然落到后面的中文字体上渲染，互不干扰。
系统自带字体之外，可以用 @font-face 加载网络字体：声明一个字体名、给出字体文件 URL（现代格式首选 woff2，压缩率最好），之后就能在 font-family 里使用。font-display: swap 几乎必写——它让浏览器先用系统字体显示文字、字体下载完再替换，避免「字体加载期间文字不可见」（FOIT）。中文字体动辄几 MB，全量加载不现实，生产环境要用「字体子集化」（只打包用到的字符，Google Fonts 的 css2 API 和中文字体服务都自动做了这件事）。
font 简写属性可以一行写完：font: 样式 字重 字号/行高 字体族，其中字号和字体族是必填，行高跟在斜杠后。注意简写会重置没写到的属性（比如字距），用了简写之前单独设置的 font-variant 等会被清掉。另外绝大多数字体相关属性都会继承，通常在 body 上设一次字体栈，全站生效。
示例
/* 全站字体栈：西文优先，中文随后，通用族兜底 */
body {
font-family:
-apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei', sans-serif;
}
/* 代码用等宽字体 */
code,
pre {
font-family: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
}
/* 加载网络字体（西文展示字体，子集化后体积小） */
@font-face {
font-family: 'MyBrand';
src: url('/fonts/mybrand.woff2') format('woff2');
font-display: swap; /* 先显示后备字体，加载完再替换 */
}
.logo {
font-family: 'MyBrand', sans-serif;
}
/* font 简写：斜体 加粗 16px/1.6 字体族 */
.caption {
font: italic 600 16px/1.6 'PingFang SC', sans-serif;
}
常见坑
- 字体栈没有兜底族：只写 font-family: 'PingFang SC' 在 Windows 上直接掉到浏览器默认衬线字体，风格全毁。末尾永远带 sans-serif 等通用族。
- 带空格的字体名不加引号：font-family: Microsoft YaHei 会被解析成两个名字，必须 'Microsoft YaHei'。
- 全量加载中文字体文件：几 MB 的字体让首屏白屏数秒。中文场景要么用系统字体栈（推荐），要么做子集化只加载用到的几百个字符。
- @font-face 顺序写错：必须先 @font-face 声明再使用；font-display 写在 @font-face 内部，不是使用处。
- 用简写后被覆盖：font 简写会把未列出的字体属性重置为初始值，放在单独声明之前写，或干脆不用简写。
小结
字体栈按「西文 → 中文 → 通用族」排列；@font-face 加 font-display: swap 加载网络字体；中文字体务必子集化或用系统栈。下一章学习背景。