全局 font-family 必须定义在 :root 或 html 上才能真正生效，因为 button、input 等表单元素不继承 body 设置；字体顺序需将中文字体（如 "PingFang SC"）置前，fallback 用 sans-serif；需排查第三方库硬编码、内联样式或 Web Font 加载失败等问题。
font-family 全局定义写在哪儿才真正生效
直接写在 body 上不行，很多元素（比如 button、input、textarea）会继承系统默认字体，不是你设的那个。必须从根元素下手。
- 用
:root或html设置font-family，确保所有后代元素都能继承到（除非被显式覆盖） - 避免只写
body { font-family: "PingFang SC", sans-serif; }——它对表单控件基本没用 - 如果项目用 CSS-in-JS 或 Shadow DOM，还要额外检查作用域是否隔离
font-family 的值顺序为什么不能乱
浏览器按顺序尝试加载字体，遇到第一个存在的就停。顺序错，可能跳过你想要的中文字体，直接落到英文 fallback 上。
- 中文字体放前面：
"Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif - 别把
sans-serif写最前，否则中文显示成系统默认无衬线（比如 macOS 的 Helvetica，缺中文字符时会 fallback 到很丑的替代字） - 字体名含空格或特殊字符，必须加引号；英文通用名（如
serif）不加引号
font-family 全局设置后部分文字还是“不听话”
常见于第三方组件库、内联样式、!important 覆盖，或者用了 Web Font 但未正确加载。
- 检查 DevTools 的 Computed 面板，看最终生效的
font-family值和来源（是 inline？是第三方 CSS？） - 某些 UI 库（如 Ant Design、Element Plus）会给
button等组件硬编码字体，得用更具体的选择器覆盖，比如button, input, select, textarea { font-family: inherit !important; } - Web Font（如 Google Fonts）需确认
@font-face已加载且字体名拼写完全一致（注意大小写、连字符）
font-family 影响性能和可访问性吗
会影响，但不是你想的那样——主要风险不在“多写几个字体”，而在“加载失败时的降级体验”和“强制重排”。
立即学习“前端免费学习笔记（深入）”；
- 字体过多不会拖慢渲染，但 Web Font 加载阻塞文本渲染（FOIT），建议加
font-display: swap; - 别用非标准字体当默认字体，尤其对视力障碍用户：系统字体更易被屏幕阅读器和缩放策略识别
- 移动端慎用太多中文字体名（如同时写 “Noto Sans CJK SC”, “Source Han Sans SC”），iOS 对部分字体名解析不稳定
