跨平台中文字体 fallback 必须按系统预装能力分层书写：macOS 用 -apple-system、BlinkMacSystemFont、"PingFang SC"；Windows 用 "Segoe UI"、"Microsoft YaHei"；Linux/Android 用 "Noto Sans"、"Source Han Sans CN"；末尾必加 sans-serif；中英字体分离、含空格字体名必须加英文双引号，否则解析失败或回退失效。
直接给结论：跨平台中文字体 fallback 顺序不能靠“猜系统”，必须按平台预装字体能力分层书写，且中英分离、空格加引号、sans-serif 必须垫底——否则 macOS 显示发虚、Windows 行距错乱、Linux 字体突然变细，都是真问题。
为什么“Microsoft YaHei, sans-serif”在 Linux 上会失效
因为多数 Linux 发行版（如 Ubuntu 24.04、Debian 12）默认不预装 Microsoft YaHei，浏览器找不到就跳过，直接 fallback 到系统默认的 sans-serif（通常是 Noto Sans 或 DejaVu Sans），而这些字体的中文渲染权重、字宽、标点占位与 Windows/macOS 完全不同。更糟的是，如果漏写引号，Microsoft YaHei 会被解析成两个独立关键字 Microsoft 和 YaHei，整条声明作废。
避免方式：
-
Microsoft YaHei必须用英文双引号包裹："Microsoft YaHei" - 不能单独依赖它——它只对 Windows 可靠，其他平台需前置对应主力字体
- 末尾必须保留未加引号的
sans-serif，这是唯一跨平台语义稳定的兜底项
正确分层顺序：macOS → Windows → Android/Linux → 中英双语 → 通用族
现代字体栈不是“堆一堆名字”，而是按平台主力字体存在性排序。浏览器从左到右匹配，第一个存在的即生效，后续全部忽略。所以顺序本质是“平台适配优先级”。
立即学习“前端免费学习笔记（深入）”；
推荐写法（已验证于 Chrome 128 / Safari 18 / Firefox 130）：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Noto Sans", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", "Source Han Sans CN", sans-serif;
关键点：
-
-apple-system和BlinkMacSystemFont是 macOS 原生 San Francisco 的别名，优先级最高且无兼容风险 -
"Segoe UI"在 Windows 10+ 全系预装，比"Microsoft YaHei"更适合英文段落 -
"PingFang SC"和"Microsoft YaHei"都是中英双语字体，但前者在 macOS 上更轻量，后者在 Windows 上更稳定；二者位置不可颠倒——"PingFang SC"应在"Microsoft YaHei"前，因 macOS 用户基数仍高于纯 Windows 用户 -
"Source Han Sans CN"是 Adobe 开源字体，Linux 桌面环境（如 Fedora Workstation）常预装，作为双语字体的开源兜底
中英文混排时 font-family 里不能塞 font-weight
常见错误是写成 font-family: "Helvetica Neue Bold", Arial;——这会让浏览器去找一个叫 "Helvetica Neue Bold" 的完整字体文件，但系统里实际只有 "Helvetica Neue" 这个字体族，粗体由 font-weight: bold 触发。混入 weight 名称会导致整个字体声明被忽略。
正确做法：
- 所有字体名只写家族名，不含
Bold、Italic、Medium等字样 - 中英混排需强调英文清晰度时，把纯英文字体（如
"Helvetica Neue",Arial）放在中英双语字体（如"Microsoft YaHei"）之前 - 若需控制斜体行为（比如仅西文斜体、中文保持正体），必须用
@font-face+unicode-range，不能靠font-family列表解决
最容易被忽略的是：字体栈生效前提是字体真实存在且可访问。Docker 容器、CI 构建环境、某些 Linux headless 系统可能连 sans-serif 都没装全。上线前务必在目标环境开 DevTools → Computed → font-family，看最终解析结果，而不是信 CSS 里写了什么。
