如何用CSS字体回退栈提升跨平台兼容性

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";（结尾没通用族）。

正确写法要点：

1. 末尾必须是 sans-serif、serif 或 monospace 三者之一，不能拼错、不能带空格
2. 中文字体名含空格或中文字符，必须用英文双引号包裹，如 "PingFang SC"、"Microsoft YaHei"
3. 逗号后不加空格，尤其 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;}

说明：

1. -apple-system 和 BlinkMacSystemFont 是 macOS/iOS 原生无衬线字体，优先保障苹果设备体验
2. "Segoe UI" 覆盖 Windows，"Helvetica Neue" 兜底部分 Linux 桌面环境
3. 中文字体靠后，仅在前述西文字体无法显示中文时才启用，避免干扰英文渲染

@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;}

关键点：

1. @font-face 中的 font-family 值，和 CSS 使用时的值必须**完全一致**（大小写、空格、引号）
2. 即使用了 @font-face，也绝不能省略系统字体和通用族——它们是最后一道防线
3. 用开发者工具 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;}

注意：

1. "simsun" 必须加引号，否则会被解析为变量或关键字
2. 不要依赖 "SimSun"（首字母大写），部分 Linux 环境只认小写 simsun
3. macOS 用户若需 PingFangSC 字体包，可直接克隆 https://gitcode.com/gh_mirrors/pi/PingFangSC，但注意其 TTF/woff2 文件需通过 @font-face 显式引入，不能直接当系统字体名用

最常被忽略的一点：字体兼容性不是“写完就跑”，而是每次新增第三方 UI 库、升级框架、或接入 CMS 内容时，都要重新检查其 CSS 是否覆盖了你的全局 font-family 规则——特别是那些带 !important 的组件样式，它们会无声地切断你的回退链。