全局字体应设在html元素上以确保继承生效；字体栈需多字体兜底，中文字体前置并加引号；失效主因是选择器权重、拼写错误或本地未安装。
font-family 设置全局字体的正确位置
必须写在 html 或 body 元素上，否则无法真正“全局”生效。只写在某个 class 或 div 上，只会作用于该元素及其后代中未被显式覆盖的部分。
推荐优先写在 html 上，因为 html 是根元素，其字体声明会自然继承给所有后代（包括 body、h1、p、button 等），且能避免部分浏览器对 body 的默认 margin / font 行为干扰。
示例：
html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
字体栈里为什么要有多个字体名
因为用户设备上不一定装有你指定的第一款字体，浏览器会从左到右逐个尝试，直到找到可用的。一旦匹配成功，就停止查找——后续字体完全不会被加载或使用。
立即学习“前端免费学习笔记（深入）”；
常见组合逻辑：
- 优先放系统级优化字体（如
-apple-system、BlinkMacSystemFont），它们在对应平台渲染更清晰、更轻量 - 接着放通用商用字体（如
"Segoe UI"、Roboto），覆盖 Windows / Android 主流环境 - 兜底必须是泛型族名（
sans-serif、serif或monospace），不能省略，否则在极小众系统上可能回退到不可控的默认字体（比如某些 Linux 发行版的DejaVu Sans）
中文网页要特别注意字体顺序和引号
中文字体名含空格或中文时，必须用英文双引号包裹，否则 CSS 解析失败。例如 "PingFang SC"、"Microsoft YaHei"、"Noto Sans CJK SC" 都需要引号。
中西文混排时，建议把中文字体放在西文字体前面——不是为了“优先显示中文”，而是因为多数中文字体本身就内嵌了基本 ASCII 字符集；而纯西文字体（如 Helvetica）通常不支持中文，放前面会导致中文显示为方块。
典型写法：
html {
font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}
font-family 不生效的三个高频原因
实际调试中，以下情况最常导致字体“设了等于没设”：
- 被更具体的 CSS 选择器覆盖，比如某个
h1规则写了font-family: Georgia, serif;，它权重高于html的声明 - 字体名拼写错误或大小写不一致（如写成
segoe ui而非"Segoe UI"），部分浏览器会静默忽略整条声明 - 用了本地未安装的字体且未通过
@font-face加载，浏览器直接跳过该字体名，继续往后找
验证是否生效：打开 DevTools → 选中任意文本元素 → 在 Styles 面板里看 font-family 计算值（Computed），确认最终解析出的字体名是否符合预期。
系统字体不是万能解法，尤其在老旧 Windows 7 或无图形界面的服务器渲染场景下，system-ui 可能退化成 Times New Roman。真要强一致性，得配 Web Font + fallback 降级策略。
