font-family 多字体是fallback机制而非叠加显示，浏览器按顺序选用首个可用字体；中文字体名需加英文引号；安全字体应置于末尾；全局设置推荐写在 :root 并配合 CSS 变量；中英混排时中文字体宜放在英文后、通用关键字前；组件字体异常多因内部显式声明覆盖，需通过 DevTools 定位并优先使用主题变量调整。
font-family 里写多个字体是为 fallback，不是叠加显示
浏览器只会用列表里第一个它系统里装了的字体，后面全是备用方案。比如 font-family: "Helvetica Neue", Arial, sans-serif，Mac 上优先用 Helvetica Neue，Windows 没这个字体就跳到 Arial，连 Arial 都没有才兜底到系统默认无衬线体。
常见错误是以为写了多个就会“混合出新效果”，其实完全不会——font-family 不是字体合成器，只是按顺序找一个能用的。
- 中文字体名带空格或中文时，必须用英文引号包裹，比如
"Microsoft YaHei"、"PingFang SC"，否则解析失败 - Web 安全字体（如
serif、sans-serif、monospace）必须写在最后，作为保底，不能省略 - 避免把
system-ui放太靠后——它在现代浏览器里能调用当前系统原生字体（如 macOS 的 San Francisco、Win11 的 Segoe UI），但老浏览器不支持，得放 fallback 链前面一点
全局设置该写在 :root 还是 html？
写在 :root 更稳妥。它等价于根元素（即 html），但优先级略高，且能配合 CSS 自定义属性做后续扩展；而直接写 html { font-family: ... } 在某些框架（比如 Next.js 的 SSR 渲染）里可能被重置覆盖。
实际项目里，如果你还打算用 var(--font-base) 控制不同区块字体，那必须从 :root 开始定义：
code>:root {
--font-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
body {
font-family: var(--font-base);
}
- 不要只设
body——button、input等表单元素默认不继承body的font-family，容易出现字体不一致 - 如果用了 CSS-in-JS 或 Tailwind，注意它们可能注入自己的
font-sans规则，会和你的全局设置冲突，得检查最终生成的 CSS 顺序
中英混排时 font-family 顺序错位会导致渲染异常
中文 Windows 用户常遇到“英文正常、中文方块乱码”，大概率是字体列表里中文字体位置太靠后，或者没加引号被当成了多个关键词解析。
典型错误写法：font-family: sans-serif, "Microsoft YaHei" —— 这会让浏览器先尝试无衬线体，再 fallback 到微软雅黑，但很多系统默认无衬线体根本不支持中文（比如早期 Ubuntu 的 DejaVu Sans），结果中文直接挂掉。
- 中文字体建议放在英文主力字体之后、通用关键字之前，例如：
"Inter", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif - macOS 和 iOS 对
"-apple-system"支持好，但 Windows 完全不认识，所以不能只靠它；同理，"Segoe UI"是 Windows 专属，Linux 下基本无效 - 用
@font-face加载网络字体时，别把它塞进全局font-family列表开头——加载未完成前会空白或触发回退，影响首屏体验
font-family 设置后部分组件字体还是不对
不是设置没生效，而是组件内部显式声明了 font-family，CSS 层叠规则让它覆盖了你的全局设置。尤其常见于 UI 库（如 Ant Design、Element Plus）和富文本编辑器（如 Quill、Tiptap）。
查问题最快的方式：打开 DevTools，选中异常文字，看 Computed 标签页里的 font-family 值从哪来，再点 Styles 查来源文件和行号。
- 第三方组件通常提供主题变量（如
@primary-font），优先改它们的配置，而不是暴力加!important - 若必须覆盖，用更具体的选择器，比如
body .ant-btn而不是只写body；避免无差别写* { font-family: ... }，性能差且易引发意外 - 某些组件（如 CodeMirror）会内联 style，此时只能用
!important强制，但得加注释说明原因，方便后续维护
字体这件事，看着只是写一串逗号分隔的名称，但背后牵扯系统差异、加载时机、选择器权重和框架干预——任何一个环节松动，都会让“全局”变成“局部”。真正稳住，得在 fallback 顺序、作用域范围、组件兼容这三处反复对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
