font-family 值按从左到右顺序优先匹配，最想要字体置首，中文字体需显式前置并引号包裹，结尾必须加通用族（如sans-serif），否则声明可能被浏览器忽略。

font-family 属性值的书写顺序决定实际生效字体

浏览器会按 font-family 声明中从左到右的顺序，逐个尝试加载字体。只要某个字体在用户系统中存在（或已被 @font-face 成功加载），就立即采用，后续字体不再检查。这意味着顺序不是“备选”，而是“优先级链”。

• 必须把最想要的字体放在最前面，比如 "Inter"、"Helvetica Neue"
• 紧接其后应是同类型且广泛预装的系统字体，如 Helvetica（macOS）、Arial（Windows）
• 最后必须以通用字体族（sans-serif、serif、monospace）收尾——这是强制要求，否则声明可能被整个忽略
• 中文字体名含空格或中文时，必须用英文引号包裹，例如 "PingFang SC"、"Microsoft YaHei"

中英文混排时 font-family 应分层声明

中文字体通常不包含高质量英文字形，而英文字体几乎不支持中文字符。若只写 font-family: "Helvetica Neue", sans-serif，中文会回退到系统默认（如 macOS 的 STHeiti，Windows 的 SimSun），但该回退不可控且无统一策略。

• 推荐显式分层：先列中文字体，再列英文字体，最后通用族，例如：
  

  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

• 避免把英文优先字体（如 Arial）放在中文前面，否则中文可能被渲染成方块或空白
• WebFont（如 Google Fonts 或自托管 @font-face）建议只用于品牌字体，正文仍依赖系统字体链以保证加载速度和可读性

font-family 中的 generic family 不是“兜底”，而是语法必需项

sans-serif、serif、monospace 这类通用字体族不是可有可无的备选项，而是 CSS 规范强制要求的终止符。缺少它，整个 font-family 声明在部分浏览器（尤其是旧版 Safari 和某些移动端 WebView）中会被静默丢弃。

• 错误写法：font-family: "Roboto", Helvetica;（结尾无通用族）
• 正确写法：font-family: "Roboto", Helvetica, sans-serif;
• 注意：fantasy 和 cursive 属于通用族，但极少用于正文，且渲染差异极大，不建议使用
• 不要写成 font-family: sans-serif; 单独一行——这等于放弃所有控制，完全交由浏览器决定

不同平台系统字体差异大，需针对性覆盖

macOS、Windows、Android、iOS 各自预装的主力 UI 字体完全不同，靠一两个字体名无法全覆盖。必须组合覆盖主流平台，并接受“没有 100% 一致”的事实。

• macOS：优先 "SF Pro Display"（新）或 "Helvetica Neue" → "PingFang SC"（简体中文）
• Windows：优先 "Segoe UI" → "Microsoft YaHei"
• Android：常用 "Roboto"，但部分国产定制系统会忽略，需 fallback 到 Droid Sans 或 sans-serif
• iOS："SF Pro Text" 是首选，但 iOS 13+ 才稳定支持；低版本仍需 "Helvetica" + "Heiti SC"

真正难的不是写全字体名，而是理解：你写的每一条 font-family 都是在向不同设备“请求”一组字体，而最终显示效果取决于那台设备上恰好有什么——这个链条里任何一环缺失，都会触发下一级回退。别指望靠 CSS 强制所有用户看到同一款字体。