font-family书写顺序决定fallback生效：优先级从左到右，首选字体置前、通用族置后；含空格或中文名须加引号；中英文混排需分层声明；@font-face失败仍占用字体名；继承机制要求深层节点显式重置。
font-family 值的书写顺序决定 fallback 是否生效
浏览器按 font-family 列表从左到右尝试加载字体，一旦某个字体可用就停止查找。所以必须把最想要的字体放最前，通用字体族（如 sans-serif）放在最后兜底。
常见错误是把系统字体写成全路径或带空格不加引号，比如 font-family: Helvetica Neue, Arial, sans-serif —— 这里 Helvetica Neue 含空格，必须用引号包裹，否则浏览器只认到 Helvetica 就截断了。
- 中文字体名含空格或中文时一律加双引号：
"Microsoft YaHei"、"PingFang SC"、"思源黑体" - 英文无空格字体可不加引号：
Verdana、Georgia，但统一加更安全 - 避免使用本地未预装的自定义字体名（如
"MyCustomFont"），除非已通过@font-face正确声明并加载
中英文混排时 font-family 要分层声明才不崩
中文字体通常不包含英文字母的优化字形，英文部分直接套用中文字体会显得僵硬；反过来，纯英文字体（如 Inter）往往缺失汉字支持。靠单个 font-family 列表很难兼顾。
稳妥做法是用「语言感知」方式：对中文内容用中文字体优先列表，对英文/数字用西文字体优先列表。CSS 中可通过 :lang() 或专门类名控制，但更常用的是在根元素或 body 上设置主字体栈，再用子选择器覆盖：
立即学习“前端免费学习笔记（深入）”；
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}这个顺序本质是「先试系统级无衬线西文字体 → 再试主流中文字体 → 最后兜底 sans-serif」。注意 PingFang SC 等 macOS 字体在 Windows 上无效，但因有 fallback 所以不影响渲染。
@font-face 加载失败时 font-family 不会自动跳过该字体名
如果用了 @font-face 声明了一个自定义字体（如 font-family: "BrandSans"），但该字体文件 404 或 CORS 阻止加载，浏览器仍会“记住”这个字体名存在——后续在 font-family 中引用它，就会卡在这个名字上，不再往下找 fallback。
- 验证是否加载成功：打开 DevTools → Network 标签页，过滤
font，看对应 woff2/woff 文件状态码 - 临时规避：在
font-family列表中把自定义字体放在系统字体之后，例如font-family: "SystemFont", "BrandSans", sans-serif，这样即使"BrandSans"失效，前面的系统字体还能撑住 - 不要依赖
font-display: swap来“修复”加载失败——它只控制闪动行为，不改变字体名注册状态
font-family 继承机制导致局部重置容易漏掉深层节点
font-family 是可继承属性，一旦在 body 设定，所有后代元素默认沿用。但某些组件（如 code、pre、按钮、输入框）常被设为等宽字体，若只在组件本身写 font-family: monospace，其内部文字（如 span 子元素）可能意外继承外部的非等宽字体。
解决方法不是逐个子元素加样式，而是用 all: unset + 显式重置，或更稳妥地用属性继承切断：
code, kbd, samp, pre {
font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
/* 强制子元素也走这套字体栈 */
font-family: inherit;
}真正容易被忽略的是表单控件（select、textarea）在不同浏览器中的字体行为差异：Chrome 会继承 font-family，但 Safari 可能强制使用系统控件字体，此时需单独加 font: inherit 或显式声明。
