单写font-family: "microsoft yahei"无法跨平台一致，因其仅windows预装，macos/linux跳过并回退至默认serif字体；正确写法需分层：-apple-system, blinkmacsystemfont, "segoe ui", "microsoft yahei", "pingfang sc", "noto sans cjk sc", sans-serif，兼顾各系统原生字体与兜底兼容。
直接写 font-family: "Microsoft YaHei" 无法保证跨平台显示一致——它只在 Windows 生效，macOS 和 Linux 上会跳过并 fallback 到系统默认 serif 字体（比如 Times New Roman），实际效果不可控。
为什么单写中文字体名基本等于失效
浏览器按 font-family 列表从左到右匹配，但只认“已安装且支持当前字符集”的字体。中文文本在 macOS 上不会用 Arial 或 Helvetica Neue 渲染汉字，哪怕它们排在列表里；同样，"Microsoft YaHei" 在 macOS/Linux 上根本不存在，整条声明就会被跳过，最终退回到浏览器默认字体。
常见错误现象：
-
font-family: Microsoft YaHei;（没引号）→ Windows 偶尔能解析，其他系统直接忽略 -
font-family: "SimSun";（无 fallback）→ Win11 默认不装宋体，显示为 Times New Roman -
font-family: "PingFang SC", "Microsoft YaHei";（顺序反了）→ Windows 用户永远用不上前者，但 macOS 用户根本看不到后者
跨平台 font-family 推荐写法与参数差异
真正可用的系统字体栈必须分层：先写各平台原生主力字体别名，再补通用中文字体，最后以 sans-serif 收尾。2026 年主流写法如下：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
说明：
-
-apple-system是 macOS/iOS 的 San Francisco 字体标准入口，比"PingFang SC"更底层、更稳定 -
BlinkMacSystemFont是 Chromium 内核浏览器（Edge、新版 QQ 浏览器等）在 macOS 上识别系统字体的必要补充 -
"Segoe UI"必须带英文引号，且放在"Microsoft YaHei"前——Windows 10+ 系统优先用它渲染西文和部分 UI 文本，中文字体由后续项承接 -
"Noto Sans CJK SC"是 Linux 和部分 Android 设备上最可能预装的开源中文字体，比"WenQuanYi Micro Hei"兼容性更广
内联、内部、外部 CSS 中的写法区别
无论在哪种方式里写 font-family，规则都一样：引号、逗号、顺序、兜底缺一不可。但容易被忽略的是作用域和覆盖逻辑：
- 内联样式如
<p style="font-family: 'Segoe UI', sans-serif;"></p>优先级最高，适合临时调试，但无法复用 - 内部
<style></style>块里写body { font-family: ...; }能统一控制全局，但若子元素有 class 定义了不同font-family，就会被覆盖 - 外部 CSS 文件中定义
.text-main { font-family: ...; }最利于维护，但要注意加载时机——如果 CSS 还没加载完，首屏文本会短暂用浏览器默认字体渲染
性能提示：系统字体栈零加载，无需 @font-face 或 <link>，但若混用网络字体（如 Google Fonts），务必加 font-display: swap，否则可能触发 FOIT（空白闪动）。
字体没变？先查 Computed 面板里的真实值
写了 font-family 却没生效，90% 是因为被更高优先级规则覆盖，或继承自父级。打开浏览器 DevTools → Elements → 右侧 Computed 标签页，直接看 font-family 行显示的最终值——它才是浏览器真正采用的字体链。
容易被忽略的点：
- 某些 UI 框架（如 Bootstrap、Ant Design）自带全局
font-family设置，会静默覆盖你的规则 - Chrome 和 Safari 对
-apple-system的解析行为略有差异，macOS 上用BlinkMacSystemFont补全更稳妥 - Linux 发行版差异大，
"Ubuntu"在 Ubuntu 系统有效，但在 CentOS 或 Arch 上大概率不存在，此时依赖"Noto Sans CJK SC"+sans-serif才是实际兜底路径
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
