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 强制所有用户看到同一款字体。
