font-family回退链必须以sans-serif、serif或monospace结尾，中文字体需用英文双引号包裹且置于西文字体之后，@font-face字体须嵌入完整回退链，Linux/macOS推荐使用"simsun"而非"宋体"。
font-family 回退链必须以通用字体族结尾
浏览器遇到 font-family 声明时，会从左到右逐个尝试字体，一旦某个字体在当前系统中不可用，且后面没跟合法的通用族名（serif、sans-serif、monospace），整个回退链就中断——后续所有字体都会被忽略，最终可能回退到浏览器默认字体（比如 Times New Roman），完全偏离预期。
常见错误写法：font-family: "Helvetica Neue", "PingFang SC", sans serif;（末尾是两个词）或 font-family: Arial, "Microsoft YaHei", "SimSun";（结尾没通用族）。
正确写法要点：
- 末尾必须是
sans-serif、serif或monospace三者之一，不能拼错、不能带空格 - 中文字体名含空格或中文字符，必须用英文双引号包裹，如
"PingFang SC"、"Microsoft YaHei" - 逗号后不加空格，尤其 Safari 旧版本对
"SimSun", sans-serif敏感，写成"SimSun", sans-serif可能被截断
中英文字体顺序错位会导致英文渲染异常
如果把中文字体写在英文字体前面，例如 font-family: "SimSun", Arial, sans-serif;，部分浏览器（尤其是 Chrome on Windows）会在渲染英文时强行调用宋体，导致字母发虚、字距异常、甚至出现锯齿。这不是 bug，是字体引擎按声明顺序“硬匹配”的结果。
解决思路是按语言使用习惯分层：优先声明西文字体，再列中文字体，最后通用族。典型安全栈如下：
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
"PingFang SC", "Microsoft YaHei", "SimSun", sans-serif;
}
说明：
-
-apple-system和BlinkMacSystemFont是 macOS/iOS 原生无衬线字体，优先保障苹果设备体验 -
"Segoe UI"覆盖 Windows，"Helvetica Neue"兜底部分 Linux 桌面环境 - 中文字体靠后，仅在前述西文字体无法显示中文时才启用，避免干扰英文渲染
@font-face 加载失败时回退链照样要起作用
很多人以为只要 @font-face 引入了自定义字体，font-family 里写它就万事大吉。但网络中断、CORS 报错、字体文件路径错误、或用户禁用字体下载时，@font-face 规则根本不会生效——此时若你的 font-family 声明里只写了自定义字体名，比如 font-family: "MyCustomFont";，那浏览器找不到该字体，又无回退，就会直接跳到系统默认字体。
务必把自定义字体嵌入完整回退链中：
@font-face {
font-family: "MyCustomFont";
src: url("fonts/mycustom.woff2") format("woff2");
}
body {
font-family: "MyCustomFont", "PingFang SC", "Microsoft YaHei", sans-serif;
}
关键点：
-
@font-face中的font-family值，和 CSS 使用时的值必须**完全一致**（大小写、空格、引号） - 即使用了
@font-face，也绝不能省略系统字体和通用族——它们是最后一道防线 - 用开发者工具 Network 面板确认字体文件返回 200，否则回退链再完整也没用
Linux 和 macOS 默认不带“宋体”，simsum 是更稳妥的写法
直接写 "宋体" 在 Windows 上没问题，但在 macOS/Linux 上基本无效——这些系统没有注册这个中文名，@font-face 之外几乎无法命中。而 simsun 是宋体的 PostScript 名（英文内部标识），macOS 12+ 和主流 Linux 发行版都支持该名称映射。
所以中文字体声明建议同时包含中英文名，并把英文名放前面：
p {
font-family: "Microsoft YaHei", "PingFang SC", "simsun", "宋体", sans-serif;
}
注意：
-
"simsun"必须加引号，否则会被解析为变量或关键字 - 不要依赖
"SimSun"（首字母大写），部分 Linux 环境只认小写simsun - macOS 用户若需 PingFangSC 字体包，可直接克隆
https://gitcode.com/gh_mirrors/pi/PingFangSC，但注意其 TTF/woff2 文件需通过@font-face显式引入，不能直接当系统字体名用
最常被忽略的一点：字体兼容性不是“写完就跑”，而是每次新增第三方 UI 库、升级框架、或接入 CMS 内容时，都要重新检查其 CSS 是否覆盖了你的全局 font-family 规则——特别是那些带 !important 的组件样式，它们会无声地切断你的回退链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
