全局 font-family 必须用有逻辑顺序的字体栈，而非单一字体；应分英文栈（如 -apple-system、Segoe UI）和中文栈（如 "PingFang SC"、"Microsoft YaHei"），末尾双 sans-serif 兜底，确保各字符区段匹配最优字体。
font-family 设置全局字体为什么不能只写一个字体名
只写 font-family: "Helvetica" 这类单一字体，浏览器找不到时会直接回退到默认字体（通常是 Times New Roman 或系统默认的衬线体），完全失去控制。真正可靠的方案是提供一个**有逻辑顺序的字体栈（font stack）**，让浏览器从左到右逐个尝试，直到找到可用的本地字体。
- 字体栈必须以具体字体名开头，结尾用通用字体族（
serif/sans-serif/monospace）兜底 - 中文字体要单独列出，且优先放系统自带的、渲染质量高的字体（如 macOS 的
"PingFang SC"、Windows 的"Microsoft YaHei"） - 英文和数字部分建议分层：先系统 UI 字体（如
"Segoe UI"），再经典无衬线体（如Helvetica、Arial），最后通用族 - 字体名含空格或特殊字符必须加引号，但通用族（
sans-serif）不加引号
最简可用的中英混合全局字体栈怎么写
以下这段可直接放进 :root 或 body 的 font-family 声明里，覆盖绝大多数现代系统：
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
说明：
- 前半段针对英文/数字：利用
-apple-system和BlinkMacSystemFont调用 macOS/iOS 的 San Francisco 字体；Segoe UI覆盖 Win10+；Roboto是 Android 和 Chrome OS 默认；Helvetica和Arial是传统 fallback - 后半段针对中文：按系统流行度排序，
"PingFang SC"（macOS）、"Segoe UI"实际不支持中文，所以必须另起中文栈；"Microsoft YaHei"是 Win7–Win10 主力；"WenQuanYi Micro Hei"覆盖多数 Linux 发行版 - 两个
sans-serif不是重复——第一个兜英文，第二个兜中文；CSS 解析时会把整个列表当做一个字体族处理，但实际匹配是逐项进行的
font-family 中文部分放太前会导致英文变丑吗
会。如果把 "Microsoft YaHei" 放在英文栈前面（比如 "Microsoft YaHei", Helvetica, Arial），Windows 下所有英文字母、数字、标点都会强制走微软雅黑的字形，它对西文的 hinting 和字重设计远不如 Segoe UI 或 Helvetica，结果就是小字号发虚、粗体过重、等宽字符不对齐。
- 正确做法是「分域声明」：英文栈 + 中文栈，中间用逗号自然衔接，浏览器会自动按字符 Unicode 区段选择对应字体
- 避免跨语言混用字体名，例如不要写
"Helvetica Neue", "Helvetica", "Microsoft YaHei"—— 一旦"Helvetica Neue"缺失，后续所有字体（包括中文字体）都可能被跳过 - 某些旧版 Safari 对中英混排栈解析不稳定，建议把系统级字体（
-apple-system等）放在最前，它们本身已内建多语言支持
如何验证字体栈是否生效
打开 DevTools → Elements 面板 → 选中任意文本节点 → 右侧 Styles 查看 font-family 计算值；再点 Computed 标签页，找 font-family 行，后面显示的实际生效字体名（如 "PingFang SC" 或 "Segoe UI"）才是当前真实使用的字体。
- 如果看到的是
Times、Georgia或serif，说明整个栈都没匹配上，检查引号、逗号、拼写，或确认该字体确实未安装 - 在 Windows 上测试时，禁用 ClearType 可能导致
"Segoe UI"渲染异常，这不是 CSS 问题，而是系统设置 - Linux 用户需留意：很多发行版默认不带
"Noto Sans CJK"，而"WenQuanYi Micro Hei"在高分屏下可能糊，可考虑加"Noto Sans CJK SC"到栈中（需自行安装）
字体栈不是越长越好，关键在顺序合理、覆盖真实环境、避开已知缺陷。系统字体名大小写敏感，引号缺一不可，而最后那个 sans-serif，很多人删掉它，结果在某台没装任何指定字体的机器上，页面直接变成 Times New Roman。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
