全局字体应设在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" 都需要引号。
