font-family 必须用引号包裹中文字体名并提供合理 fallback 链，否则在非 windows 系统可能失效；浏览器按顺序匹配首个已安装且支持当前字符集的字体，推荐跨平台写法：-apple-system, blinkmacsystemfont, "segoe ui", "microsoft yahei", "pingfang sc", "noto sans cjk sc", sans-serif。
直接写 font-family: "微软雅黑" 基本无效——不是浏览器不认，而是你没给 fallback，也没处理系统差异。
font-family 必须带引号 + fallback 链
中文字体名含空格或中文时，font-family 值必须用单引号或双引号包裹，否则解析失败；更关键的是，只写一个字体等于“赌运气”，只要它不存在，浏览器就跳过整个声明，退回到默认字体（通常是 Times New Roman 或系统默认 serif）。
- 错误写法：
font-family: Microsoft YaHei;（无引号，Windows 可能侥幸生效，macOS/Linux 直接失效） - 正确写法：
font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", sans-serif; - fallback 顺序要合理：先列各系统主力中文字体，再列西文字体，最后是通用族名（
sans-serif或serif） - 别用
"SimSun"当兜底——Win11 默认不装宋体，"NSimSun"或"FangSong"更稳妥（但依然不推荐优先放前面）
不同系统对 font-family 的实际加载逻辑
浏览器不是“找一个最像的字体”，而是严格按逗号分隔的列表从左到右匹配：找到第一个**已安装且支持当前字符集**的字体就停。这意味着中文文本在 macOS 上可能根本不会用到 "Helvetica Neue"（它是西文字体），但如果前面的 "PingFang SC" 缺失，就会 fallback 到系统默认的中文字体（比如 "STHeiti"），而非跳到 "Helvetica Neue"。
- Windows 常见可用中文字体：
"Microsoft YaHei"、"NSimSun"、"KaiTi" - macOS/iOS：
"PingFang SC"、"Heiti SC"、"Helvetica Neue"（西文） - Linux：
"Noto Sans CJK SC"、"WenQuanYi Micro Hei"（需确认是否预装） - 推荐跨平台写法：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
为什么写了 font-family 却没变？常见干扰源
不是 CSS 没写对，而是被更高优先级规则覆盖，或继承链里早有定义。Computed 面板里看到的 font-family 值，才是最终生效的那个。
- 第三方 UI 库（如 Ant Design、Element Plus）常在
h2.ant-typography这类选择器里加!important，你的.content p规则直接被无视 - 父元素设置了
font-family，子元素没显式重写，就会继承——检查上层容器是否悄悄设了字体 - 内联
style="font-family: ..."优先级虽高，但若被 JS 动态插入的 style 标签覆盖（比如框架注入的全局样式），也会失效 - 某些浏览器扩展（如字体替换插件）会劫持页面字体渲染，可禁用扩展后验证
该用内联 style 还是外部 CSS？
临时调试或单点微调可用内联 style，但生产环境几乎不该出现重复的 font-family 声明。维护成本和一致性问题远大于“快写一行”的便利。
- 内联只适合极少数场景：邮件模板、CMS 富文本输出、无法改 CSS 的遗留页面
- 外部 CSS 文件里统一写
body { font-family: ...; }，比 20 个style="font-family: ..."容易维护得多 - 路径别写成
./css/style.css——部分服务器（尤其是旧版 Nginx）不识别点斜杠开头的相对路径，直接 404 - 如果用了 Web Font（如 Google Fonts），记得加
&display=swap，避免 FOIT（Flash of Invisible Text）
真正难的不是“怎么写”，而是判断当前生效的字体到底来自哪一层规则、是否真被系统支持、有没有被其他样式静默覆盖——打开 DevTools 的 Computed 面板，盯着 font-family 那一行看，比查文档管用十倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
