font-family必须用有逻辑顺序的字体栈，不可单写一个字体；需分中英文栈并以sans-serif兜底，中文名含空格须加引号，末尾通用族不加引号。
直接在 CSS 里用 font-family 设置，别碰 <font></font> 标签——它早被浏览器无视了，连开发者工具里都看不到生效。
font-family 必须写成字体栈，不能只写一个名字
只写 font-family: "Microsoft YaHei"; 是危险的：用户没装这个字体，就会回退到浏览器默认（通常是 Times New Roman 或等宽字体），排版可能突然崩坏。必须提供 fallback 链：
- 中文字体优先列系统字体，比如
"PingFang SC"（macOS）、"Microsoft YaHei"（Windows）、"Noto Sans CJK SC"（Linux/Android） - 西文字体往前放，比如
"Helvetica Neue", Arial，因为中文字体文件里西文渲染质量常不如原生西文字体 - 末尾一定加通用族，
sans-serif或serif，这是最后防线
典型写法：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Microsoft YaHei", sans-serif;
中文名带空格或标点，必须用英文引号包裹
像 PingFang SC、Hiragino Sans GB 这类名字含空格，不加引号会被浏览器截断为两个无效字体名，直接跳过。错误示例：font-family: PingFang SC, sans-serif; → 实际只读取 PingFang，失败。正确写法必须是：font-family: "PingFang SC", sans-serif;
注意：system-ui 和 -apple-system 这类关键字不用引号；但所有含空格、中文、短横线的字体名，一律加双引号。
@font-face 引入自定义字体时，font-display: swap 是底线
不加 font-display，或者用 auto / block，用户会遇到 FOIT（Flash of Invisible Text）：页面空白几秒，等字体下载完才显示文字。尤其移动端弱网下更明显。
-
font-display: swap;是目前最稳妥的选择：先用 fallback 字体渲染，等自定义字体加载完成再无感替换 - WOFF2 格式必须优先声明，它比 WOFF 小 30% 左右，现代浏览器全支持
- 别把整套字重（light / regular / bold / medium）全塞进一个
@font-face；每个字重单独声明，按需加载
简例：
@font-face {<br> font-family: 'MyFont';<br> src: url('myfont.woff2') format('woff2');<br> font-weight: 400;<br> font-display: swap;<br>}
选择器权重不够，font-family 就是不生效
写了 h1 { font-family: "Noto Sans CJK SC"; } 却没变？大概率是被其他 CSS 规则覆盖了。打开浏览器 DevTools（F12），选中元素，看 font-family 属性是否被划掉。
- 检查是否用了更具体的选择器，比如
.article-header h1比h1权重高 - 避免靠
!important硬顶，应理清样式来源顺序（外部 CSS - 如果只想改某几个标题，加 class 更可靠，比如
<h1 class="page-title"></h1>，再写.page-title { font-family: ... }
真正容易被忽略的，是字体栈里中西文顺序和系统字体 fallback 的组合逻辑——它不报错，但一换设备就露馅。别只盯着“能不能显示”，要盯“在 Windows、macOS、iOS、Android 上是否都按预期渲染”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
