font-display: fallback 是多数移动端场景的合理起点，它让浏览器在500ms内用系统字体渲染，超时即放弃加载，兼顾不阻塞布局与避免强替换跳动，尤其适配弱网及iOS Safari；需配合preload（带crossorigin和as="font"）、正确format声明、中文字体子集化及显式尺寸约束方可生效。
font-display: fallback 是多数移动端场景的合理起点
直接用 font-display: fallback，配 preload 和正确 @font-face 声明，能覆盖 90% 的首屏字体闪烁问题。它让浏览器在 500ms 内用系统字体渲染，超时就放弃加载，既不阻塞布局，也不强求替换——比 swap 更稳，尤其在弱网或 iOS Safari 下。
常见误用：swap 被当成“万能开关”，但中文字体体积大（常 ≥2MB），加载慢导致替换延迟，文字先显示再跳动；optional 则可能完全跳过加载，连图标字体都失效。
-
fallback适合正文、标题、按钮等关键文本，中英文混排表现更一致 - 每个字重（Regular / Bold / Medium）必须单独写
@font-face并声明font-display，不能共用一个font-family名却只给其中某个加 - 值必须拼写准确：写成
swop、"swap"或swap:都会导致整条规则被忽略
preload 必须带 crossorigin 和 as="font"
font-display 控制“怎么显示”，preload 控制“什么时候开始加载”。没预加载，fallback 的 500ms 窗口可能刚过，字体请求才发起——用户已滚动，首屏文字早已用系统字体渲染完毕。
常见失效原因：
立即学习“前端免费学习笔记（深入）”；
- 漏掉
crossorigin：跨域字体（CDN、SaaS 字体服务）下预加载直接失败，后续@font-face可能报 CORS 错误 - 写错
as值：写成as="style"或漏掉，浏览器当普通资源 fetch，失去高优先级 - href 路径与
@font-face中src不一致：比如预加载/fonts/inter-bold.woff2，但 CSS 里写的是./fonts/inter-bold.woff2，路径不匹配导致复用失败
中文字体必须子集化 + 显式尺寸约束
一个完整中文字体常超 2MB，font-display 再怎么调也盖不住几秒空白。真正卡住体验的不是 CSS 属性，而是字体体积和布局稳定性。
可行做法：
- 用
fontmin或在线工具提取首屏实际用到的汉字（如“立即购买”“登录”“首页”），生成 ≤200KB 子集字体 - 为文本容器显式设置
font-size、line-height、min-height，锁住高度，避免替换时跳动 - 搭配
font-size-adjust：实测 fallback 字体与 Web 字体的 ex 比例后设值（如font-size-adjust: 0.5），让基线更一致
@font-face 声明漏 format("woff2") 就等于没写
很多项目写了 font-display: swap 却没效果，根本原因是浏览器压根没执行这条规则——旧版 Safari、Edge 直接忽略整条 @font-face，退回到默认 auto 行为，导致 FOIT。
必须检查：
-
src中是否明确写了format("woff2")：只写url("Inter.woff2")不够，要写成url("Inter.woff2") format("woff2") - 路径是否用绝对地址：相对路径（如
url(./fonts/Inter.woff2)）在某些 WebView 或file://协议下会 404 - 是否用
@import引入字体 CSS：这会导致预加载失效、解析延迟，应改用<link>或内联
真正容易被忽略的点是：子集字体、preload、font-size-adjust 这三者缺一不可——哪怕 font-display 写对了，少了任意一个，移动端的“闪一下再跳一下”依然会出现。
