可靠方案是按「高保真英文字体→系统主力中文字体→通用族」顺序写font-family fallback栈，如-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif；中文字体名含空格或中文须加引号；sans-serif不可省；避免中文字体前置导致西文渲染异常；html需设font-size: 16px或100%作为rem基准。
直接在 CSS 里写死 `font-family` 栈并配好 fallback，比任何“字体面板”都可靠。浏览器没有原生字体选择面板 API，所谓“面板”全是前端模拟，本质还是控制 `font-family`、`font-size`、`font-weight` 这几个属性的组合输出。
font-family fallback 栈怎么写才不翻车
中英文混排时，顺序错一格，西文就糊成细线，中文就发虚。关键不是“选哪个字体”，而是“谁先加载、谁兜底”。
- 必须按「高保真英文字体 → 系统主力中文字体 → 通用族」顺序列，例如：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; - 中文字体名含空格或中文，必须加引号，
"PingFang SC"有效，PingFang SC在 Firefox 和 Safari 下直接跳过 - 末尾的
sans-serif不可省——没它，Linux 或旧版 Chrome 可能 fallback 到Times New Roman，中文标点全错位 - 别把
"Microsoft YaHei"放Roboto前面，否则 Windows 下英文会走微软雅黑西文子集（窄、轻、x-height 低），和正文割裂
font-size 用 rem 但根字号没设好，等于白搭
很多人写了 font-size: 1.2rem; 却发现缩放失效、响应式错乱，问题出在 `` 没统一基准。
- 在
html元素上显式设font-size: 16px;或font-size: 100%;，这是所有rem的锚点 -
body { font-size: 1rem; }才真正让正文从 16px 起步；小屏可用@media (max-width: 768px) { html { font-size: 15px; } }微调 - 避免
clamp()用于正文字号——中文字体在 clamp(1rem, 2.5vw, 1.125rem) 比纯流体更可控
font-weight 数值写了也不生效？先看字体支不支持
font-weight: 600; 在多数免费中文字体里是摆设。浏览器不会报错，只会默默 fallback 到最近可用字重（比如 400 或 700）。
- 用开发者工具的 Computed 面板看最终解析出的
font-weight值，不是看 Styles 里你写的那个 -
normal≡400，bold≡700，中间值如 500/600 多数系统中文字体根本不提供 - 引入 Web Font 时，
@font-face必须显式声明font-weight: 500;，否则即使文件里有，CSS 也认不出来
表单控件、代码块、图标字体最容易漏继承
只给 body 设了字体，结果 是 Lucida Grande， 是 Courier， 显示方块——这不是面板没做好，是继承链断了。
- 强制表单元素继承：
input, textarea, select, button { font-family: inherit; font-size: 1rem; } - 等宽内容单独定义：
code, pre { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; } - 图标字体必须确保
font-family: 'Font Awesome 6 Free';生效，且父容器没用font-family覆盖它；查 Network 面板确认.woff2返回 200
真正难的不是写几行 CSS，是每处字体表现背后都卡着三层：字体文件是否含对应字重、系统是否启用 subpixel 渲染、用户设备是否禁用字体 hinting。你看到的“字体面板”，只是把这三层压缩成一个下拉菜单而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
