font-display: fallback 是弱网移动端最稳的选择，它让浏览器在500ms内用系统字体撑开布局，超时即放弃加载，避免白屏与重排抖动，但必须配合 preload、crossorigin、as="font" 及完整 @font-face 声明才能生效。
font-display: fallback 是弱网移动端最稳的选择，不是 swap，也不是 optional。 它让浏览器在 500ms 内用系统字体撑开布局，超时就放弃加载，既不白屏、也不强求替换——尤其在 3G、地铁弱 Wi-Fi 或 iOS Safari 下，swap 的“等加载完再换”反而导致文字先闪后跳，optional 则大概率全程 fallback 失去品牌字体。
为什么 font-display: swap 在弱网下更糟
swap 要求浏览器“立刻渲染后备字体，等 Web 字体加载完立刻替换”，但中文字体常 ≥2MB，弱网下加载耗时 2–3 秒。这期间系统字体（如 PingFang SC）和你的 Web 字体在 x-height、ascent、字宽上差异极大，浏览器按前者分配空间，替换时重排 → 标题下移、按钮换行点突变、图标错位。iOS Safari 还有渲染队列延迟，有时替换卡在帧末尾，造成“闪一下再跳一下”的双重抖动。
常见误判：本地没抖动，线上首屏抖得厉害——因为本地缓存掩盖了首次加载的度量偏差；线上弱网放大了这个过程。
- swap 只控制“什么时候换”，不解决“换了之后尺寸准不准”
- 未声明 font-display 时 Chrome 默认按
block行为处理，弱网下白屏约 3 秒 - 旧版 iOS Safari（15.4 之前）根本不支持
font-display，直接回退到 FOIT 白屏
font-display: fallback 必须配合 preload 才生效
font-display: fallback 的 500ms 窗口非常短，如果字体请求还没发出，窗口就已关闭，用户滚动后才收到字体，首屏永远用系统字体。所以 <link rel="preload"> 不是可选项，而是前提。
-
crossorigin属性不能省，哪怕字体同源——CDN 或 SaaS 字体服务下漏掉它，预加载直接失败，后续@font-face可能报 CORS 错误 -
as="font"必须显式写，写成as="style"或漏掉，浏览器当普通资源 fetch，失去高优先级 -
href路径必须和@font-face中src完全一致（包括查询参数），否则预加载资源无法复用
正确写法示例：
<link rel="preload" href="/fonts/inter-bold.woff2" as="font" type="font/woff2" crossorigin>
每个字重必须单独声明 @font-face
同一字体族（如 Inter）的 Regular、Medium、Bold 是不同文件，浏览器不会自动推导。只给 font-weight: 400 的规则加 font-display: fallback，而 700 没声明，那粗体就会 fallback 到过粗的系统字体（如 Bold System Font），导致视觉失衡甚至布局偏移。
- 每个
@font-face块必须包含完整声明：font-family、font-weight、src、font-display、format("woff2") -
format("woff2")必须显式写出，旧版 Safari 和某些 WebView 不认省略格式的src - 拼错值（如
swop、"swap"、swap:）会导致整条@font-face被忽略
中文字体必须子集化 + 显式尺寸约束
一个完整中文字体常超 2MB，font-display 再怎么调也盖不住几秒空白或跳动。fallback 的 500ms 窗口，本质是靠“放弃加载”来保体验，但如果字体本身体积失控，连 fallback 都来不及触发——用户已划走。
- 首屏必需字重（如标题用的 Bold）必须单独子集化，控制在 ≤200KB；别把 Regular / Italic 全塞进去
- 容器需加
min-height或固定line-height，防止即使度量对齐后，因字号缩放、行数变化引发微小偏移 - 图标字体（如 Iconfont）也适用同一套逻辑：子集化 +
font-display: fallback+preload，否则图标会错位或延迟出现
真正容易被忽略的是：fallback 不是“设了就灵”，它是整套链路里最脆弱的一环——路径错一字符、crossorigin 少一个属性、子集漏一个常用字，都可能让首屏文字彻底脱离设计预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
