字体回退是单向链式匹配，由font-family顺序、lang属性和@font-face声明共同锁死；写错任一环会导致中文方块、斜体崩排、ios闪屏。
字体回退不是浏览器“自动兜底”，而是你写的 font-family 顺序 + lang 属性 + @font-face 声明共同锁死的一条单向链。写错任何一环，中文就变方块、斜体就崩排版、iOS 就闪白屏。
font-family 列表顺序决定 fallback 路径
浏览器从左到右逐个匹配，找到第一个本机存在的字体就停，后面全忽略。这不是“备选池”，是“单向链”。
- Windows 用户实际生效的是
"Microsoft YaHei"或"SimSun"，写黑体这种模糊名根本不会被识别 - macOS 用户依赖
"PingFang SC"、"Hiragino Sans GB"，而local("Helvetica")在 Windows 下直接跳过，不报错也不兜底 - 字体名含空格或特殊字符（如
"Noto Sans SC"）必须用英文双引号包裹；写成Noto Sans SC会被解析为三个独立字体：Noto、Sans、SC，整条声明作废 - 必须以
sans-serif或serif收尾；否则 iOS Safari 在font-style: italic场景下可能 fallback 到Times，中英文混排错乱
lang 属性触发语言感知字体链
浏览器不是靠内容猜语言，而是靠 lang 值启用内置的中文字体链。没写、写错或局部缺失，中文就进西文 fallback 链，最终落到 Courier New 或 Times 上——字形错乱、标点撑开、间距爆炸。
-
lang="zh-CN"才启用"PingFang SC"、"Heiti SC"；lang="en-US"或未声明，同一段中文就被当英文处理 - 某些字体（如
Noto Sans CJK）按 BCP 47 标签分字形分支：只有lang="zh-Hans"才调简体字形，lang="ja-JP"才调假名字形 - 富文本插入的
<p></p>若没带lang，即使根节点是zh-CN，该段仍走英文 fallback 链 - 验证是否生效不能只看 DevTools 的
font-family计算值，要展开Computed→font-family→ “resolved value”，确认第一个生效字体是不是"Microsoft YaHei"或"PingFang SC"
@font-face 中 src 顺序和 font-display: swap 是硬性前提
不加 font-display: swap，浏览器默认 FOIT（Flash of Invisible Text）：等字体加载完才渲染文字，期间页面空白——这时候根本没机会“回退”，因为文本压根没显示。
-
font-display: swap必须写在每个@font-face规则内部，对每个字体单独声明；写在body或其他选择器里无效 -
src是单向尝试链：浏览器只加载第一个能成功解析的来源。如果第一个是local("PingFang SC")，那 macOS 上它就直接用系统字体，后面所有url()都不会触发 - 想让自定义字体真正“可回退”，要把网络字体放前面、
local()放后面：src: url('fonts/myfont.woff2') format('woff2'), local("PingFang SC") -
font-weight和font-style必须和字体文件元数据严格一致；woff2 文件本身是normal+normal，但 CSS 写了font-weight: 700，浏览器就判定“不匹配”，跳过不用 - Safari 14.1+ 才完整支持
swap，旧版 Safari 会退化为auto（即 FOIT），所以系统字体链必须足够健壮
跨平台系统字体栈必须分平台声明
直接写 "Helvetica" 或 "Segoe UI"，浏览器大概率 fallback 到默认字体——不是名字错了，而是你没告诉它“这玩意儿在哪个系统上才存在”。
- macOS 用
"-apple-system"、"BlinkMacSystemFont"（Safari/Chrome 都认） - Windows 用
"Segoe UI"、"Roboto"（注意"Segoe UI"在 Win7+ 才预装，Win10 前可能 fallback 到"Tahoma"） - Linux 没统一字体，
"Ubuntu"、"Cantarell"、"Fira Sans"是常见发行版自带，但得靠用户装了才生效 - 最后一定要加通用族名：
sans-serif，否则 iOS Safari 15.4+ 等新版本可能直接忽略整条声明 - 中文必须显式声明：
"PingFang SC"、"Hiragino Sans GB"，不能指望sans-serif自动挑出合适的中文字体
最容易被忽略的其实是 lang 和 font-display: swap 的耦合：一个控制“该不该走中文字体链”，一个控制“有没有机会走”。两者缺一，回退就失效——不是字体没加载，是浏览器压根没启动回退逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
