font-family应按西文字体、中文字体、通用字体族顺序书写，含空格的字体名需加引号，末尾必须保留sans-serif等通用族作为兜底；Web Font需配font-display: swap并确保度量兼容。
font-family 里多个字体名怎么写才有效
浏览器只按你写的顺序从左到右尝试加载字体，遇到第一个系统里装了（或已通过 @font-face 加载成功）的就立刻用它，后面全忽略。所以顺序 = 优先级，不是“备选池”。
常见错误是把中文字体堆在前面却没考虑英文场景，比如 font-family: "PingFang SC", "Helvetica Neue", sans-serif —— 在 Windows 上 "PingFang SC" 根本不存在，直接跳到 "Helvetica Neue"，结果英文字体崩成默认宋体，还查不出原因。
- 中英文混排时，**先写西文字体族，再写中文字体名，最后加通用族**，例如：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif - 每个字体名含空格或特殊字符的，必须用引号包裹；英文关键字如
sans-serif不用引号 - 不要写系统几乎不可能存在的字体，比如
"SF Pro Display"单独放在 Windows 环境里，等于直接跳过
为什么 macOS 和 Windows 渲染效果差很多
不是 CSS 写错了，是底层字体栈差异太大：macOS 有 -apple-system 和 BlinkMacSystemFont 这类专有别名，Windows 则依赖 "Segoe UI" 或 "Microsoft YaHei"；Linux 更靠 DejaVu Sans 或 Noto Sans。同一行 font-family 在不同系统实际生效的字体可能完全不同。
典型现象：开发时在 Mac 看着很清爽，上线后用户反馈 Windows 下字发虚、行高异常——大概率是中文部分 fallback 到了 "SimSun"（宋体），而它的度量和渲染方式跟无衬线字体不兼容。
立即学习“前端免费学习笔记（深入）”；
- 用
font-family前先确认目标平台主流字体是否存在，别依赖“听说有” - 避免跨平台项目里只写一个中文字体，比如单独写
"Noto Sans CJK SC"而不配西文基础字体 - 如果用了 Web Font，确保
@font-face的font-display设为swap，否则会闪动或回退失败
font-family 中的 generic family 有什么用
sans-serif、serif、monospace 这些不是摆设。当所有指定字体都不可用时，它们是浏览器最后的兜底方案，由系统决定具体用哪个字体（比如 Windows 的 sans-serif 通常是 "Microsoft Sans Serif"，macOS 是 "Helvetica"）。
但要注意：它们不参与“字体度量继承”。如果你前面指定了一个高 x-height 的字体，又 fallback 到系统默认 sans-serif，行高、字重、甚至换行位置都可能突变。
- 永远以
sans-serif或serif结尾，别漏掉——这是防崩底线 - 不用
cursive或fantasy，它们不可控，且多数系统没靠谱实现 - 在 CSS reset 或基础样式里统一定义一次即可，别在每个组件里重复写整套列表
Web Font 加载期间字体回退行为怎么控制
浏览器默认会等 Web Font 加载完成才渲染文字（FOIT），或者短暂用系统字体替代（FOUT）。这两种行为都由 @font-face 的 font-display 决定，跟 font-family 列表本身无关——但很多人误以为多写几个本地字体就能缓解。
真正影响体验的是：如果 Web Font 加载失败，而你的 font-family 又没给够合理 fallback，页面就会突然“缩字体”或“撑开布局”，尤其在移动端。
-
font-display: swap最常用，但要确保 fallback 字体和 Web Font 的 metrics 尽量接近（可用size-adjust或ascent-override微调） - 别在
font-family里混写 Web Font 名和本地字体名，除非你明确知道该 Web Font 已加载完成 - 用
document.fonts.load()检测关键字体是否就绪，比单纯依赖 CSS fallback 更可靠
最麻烦的从来不是写对那行 font-family，而是你没法预判用户电脑上到底装了什么、缺了什么、以及字体度量如何悄悄破坏行高和对齐。每次改完记得在三台设备上快速扫一眼真实渲染效果，比看文档管用。
