font-family 必须从具体字体到通用字体（如sans-serif）以确保正确回退；中文字体名含空格需加英文引号；子元素如input会覆盖body设置，建议全局重置为inherit；推荐写法按系统分组并以sans-serif结尾。
font-family 设置顺序为什么必须从具体到通用
浏览器不会自动帮你 fallback，font-family 列表里靠前的字体一旦匹配成功，后面的就彻底不看了。所以你写 "Microsoft YaHei", "PingFang SC", sans-serif，Windows 用户看到微软雅黑，Mac 用户看到苹方，Linux 或旧系统用户才兜底到默认无衬线字体。
常见错误是把 sans-serif 放最前，或者中间漏掉逗号——比如写成 "Helvetica Neue" "Arial" sans-serif，这会直接让整个声明失效，浏览器退回到 UA 默认字体（通常是 Times New Roman）。
- 中文字体名含空格必须加英文引号，如
"Hiragino Sans GB"；英文字体如Helvetica、Arial可不加，但统一加更安全 - 避免用系统已淘汰的字体，比如
"SimSun"在 macOS 和新 Linux 上根本不存在，纯属摆设 - 不要依赖“用户装了某字体”——哪怕你本地有
"Noto Sans CJK SC"，线上用户大概率没有
body 上设置 font-family 为什么经常被子元素覆盖
因为 CSS 继承不是无条件的：只有明确声明为「可继承」的属性才会下传，font-family 是可继承的，但一旦某个子元素（比如 button、input、code）自己写了 font-family，就会完全屏蔽 body 的设置。
典型场景是表单控件——浏览器 UA 样式表里，input 和 textarea 默认带 font-family: monospace 或系统等宽字体，直接覆盖 body 的设定。
- 检查是否被 UA 样式干扰：用浏览器开发者工具看 computed 栏，点开
font-family查看来源 - 全局重置建议加一条：
button, input, select, textarea { font-family: inherit; } - 别只改
body，顺手加上html：有些老框架或 reset.css 会先设html { font-size: 100%; }，但没设字体，导致继承链断在 html 层
中文网页 font-family 推荐写法（兼顾兼容与现代）
没有万能写法，但有一条底线：别让 Windows 用户看到宋体，也别让 Mac 用户看到 Helvetica（它不支持中文）。主流方案是按系统分组，用逗号隔开，末尾必须是 sans-serif。
实测有效的一行是：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
-
-apple-system和BlinkMacSystemFont是 macOS/iOS 原生字体，优先级高于"PingFang SC" -
"Microsoft YaHei"要放在 Windows 字体组末尾，避免干扰其他系统——它在非 Windows 下无效，但放太前可能拖慢字体匹配 - 删掉所有带
"SimHei"、"KaiTi"的项：这些是旧版 Windows 默认字体，渲染质量差，且新版 Edge/Chrome 已不推荐使用
font-family 设错后最常出现的三个视觉问题
字体设错很少报错，但会默默导致布局偏移、行高异常、甚至中英文混排时字距崩坏。最典型的三种现象：
- 页面突然变“窄”：因为 fallback 到
serif或monospace，字宽和行高跟预期sans-serif不一致 - 中文显示为方块或小方框（）：说明当前字体完全不支持中文 Unicode 区段，比如用了纯英文字体
"Inter"却没配中文字体 fallback - Chrome DevTools 显示
font-family: initial：其实是声明语法错误（比如多了一个冒号、引号不闭合），整条规则被丢弃，退回到浏览器默认
真正麻烦的是那些“看起来还行但其实不对”的情况——比如 Mac 上显示正常，Windows 上却用上了 "SimSun"，而你根本没意识到。所以每次改完，务必在不同系统+浏览器组合里快速过一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
