解决字体跨系统显示不一致的关键是设计合理回退链：优先调用各平台默认无衬线字体（如 macOS 用 -apple-system，Windows 用 "Segoe UI"），按平台适配优先级排序，末尾保留 sans-serif；字体名含空格需加英文双引号，纯通用族名不加引号；仅在必要时以 @font-face 引入 Web Font 并置于列表末尾。
字体在不同系统显示不一致，本质是系统中缺少声明的字体，浏览器会按 font-family 列表顺序回退到下一个可用字体。解决的关键不是“统一字体”，而是设计合理的回退链，兼顾可读性、美观性和系统覆盖率。
优先使用系统默认字体栈
现代主流系统（macOS、Windows、iOS、Android）都自带高质量的无衬线字体，直接调用它们加载快、渲染顺、符合用户习惯。避免盲目依赖 Web Font 或自定义字体，除非有强品牌一致性要求。
- macOS 推荐：
-apple-system, BlinkMacSystemFont（Safari / Chrome） - Windows 推荐：
"Segoe UI", "Helvetica Neue" - Linux 常见：
Ubuntu, Cantarell, "Fira Sans" - 通用兜底：
sans-serif（必须保留，确保最后有可用字体）
按平台分层书写 font-family
把最匹配当前系统的字体放在前面，让浏览器自然选择。顺序不是随意罗列，而是有逻辑的“平台适配优先级”：
body {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Ubuntu, Cantarell,
"Helvetica Neue", Arial, sans-serif;
}
这个写法中，macOS 会优先用 San Francisco（通过 -apple-system），Windows 用 Segoe UI，Linux 用 Ubuntu 或 Cantarell，老系统或异常情况则退到 Arial 或通用 sans-serif。
立即学习“前端免费学习笔记（深入）”；
慎用引号与空格，避免解析错误
字体名含空格或特殊字符（如 Helvetica Neue、Times New Roman）必须加英文双引号；纯英文单字（如 serif、sans-serif、monospace）不用引号。错误写法会导致整条链跳过该字体：
- ✅ 正确：
"Helvetica Neue", Arial, sans-serif - ❌ 错误：
Helvetica Neue, Arial, sans-serif（浏览器可能只识别 Helvetica） - ❌ 错误：
"sans-serif"（引号会让它变成自定义字体名，而非通用族）
需要一致外观时再引入 Web Font
如果品牌字体（如 PingFang SC、HarmonyOS Sans）或特殊排版需求无法靠系统字体满足，再通过 @font-face 加载。但要注意：
- 始终保留在
font-family列表末尾，作为补充而非主力 - 配合
font-display: swap防止文字闪白或阻塞渲染 - 提供 WOFF2 + WOFF 双格式，兼顾新旧浏览器支持
