中文字体名必须用英文引号包裹，否则浏览器会因解析失败而忽略整个font-family声明；“宋体”不加引号会失效，因其含中文字符，违反css对未引号字体名仅允许ascii字母、数字、连字符和下划线的规则。
中文字体名必须用英文引号包裹，否则整个 font-family 声明可能被浏览器忽略。
为什么“宋体”不加引号会失效？
中文字体名如 宋体、微软雅黑、苹方 SC 在 CSS 中属于 family-name 类型，但它们含中文字符或空格——这违反了 CSS 对未引号字体名的解析规则（只允许 ASCII 字母、数字、连字符和下划线）。浏览器遇到 font-family: 宋体, sans-serif; 会直接丢弃该声明，退回到用户代理默认字体。
- 正确写法只有两种：
"宋体"或'SimSun'（即英文名） -
"Microsoft YaHei"和"PingFang SC"同理，空格不可省，引号不可少 - 部分旧版 IE（如 IE7/8）对中文引号（“”）或全角符号极其敏感，务必用英文
"或'
中英混排时 font-family 顺序怎么排？
顺序不是按“语言”切换，而是按“字体文件是否支持当前字符”逐个 fallback。把中文字体放最前，英文也会强制走它——结果小字号英文发虚、字距崩坏。
- 纯英文字体优先：
"Helvetica Neue"、Arial、Verdana - 中英双语字体居中：
"Microsoft YaHei"、"PingFang SC"、"Hiragino Sans GB" - 通用字体族收尾：
sans-serif（不能写成system-ui，后者不是所有浏览器都识别为 generic family） - 错误示例：
font-family: "Microsoft YaHei", Arial, sans-serif;→ 英文全走微软雅黑 - 推荐写法：
font-family: "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif;
如何验证 font-family 是否生效？
光看 DevTools 的 computed 面板不够——它只显示“最终选中的字体”，不反映 fallback 过程。真正要确认的是：英文字符是否用了前面的英文字体，中文字符是否落到后面的中文字体上。
- 在页面插入测试文本：
<p>Hello 你好</p> - 用 DevTools 的
Computed标签页查看font-family值，再点开font行右侧的“放大镜”图标，查看实际渲染字体（Chrome 显示为font: 16px "Helvetica Neue"或font: 16px "Microsoft YaHei"） - 若英文段落显示为
"Microsoft YaHei"，说明顺序错了；若中文段落显示为Arial，说明该字体根本不支持中文，fallback 失败 - 注意：某些字体（如
system-ui）在 macOS 上会动态映射到PingFang SC，但它不属于标准 generic family，不要替代sans-serif
最容易被忽略的点是：你以为写了 "微软雅黑" 就万事大吉，其实它只是 fallback 链里的一环；真正起效的，永远是列表里第一个系统能加载且字符集匹配的字体——而这个“匹配”，完全取决于你写的顺序和用户机器上装了什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
