font-display: fallback是多数场景的默认选择，因其在500ms内用系统字体渲染、超时后放弃加载，不阻塞布局也不强求替换，兼顾稳定性与用户体验；需配合preload、正确@font-face声明（含format("woff2")和crossorigin）、按字重单独配置，并避免仅依赖swap——后者在弱网或ios safari下易加剧闪烁。
font-display: fallback 为什么是多数场景的默认选择
直接用 font-display: fallback，配 preload 和正确 @font-face 声明，90% 的字体闪烁问题就没了。它不是“最快”，而是“最稳”：500ms 内用系统字体渲染，超时后放弃加载，不阻塞布局，也不强求替换。
中英文混排、首屏文案、表单文本都适合它。别只写 swap 就以为搞定——它在弱网或 iOS Safari 下反而容易闪得更明显。
-
fallback对应行为是：先显示后备字体（如sans-serif），若自定义字体在 500ms 内加载完成，则平滑替换；否则继续用后备字体，不再等 - 它比
swap更克制：避免用户长时间看到不一致排版，也规避了 iOS Safari 对swap的激进实现（延迟替换 + 渲染卡顿） - 比
optional更可靠：后者依赖浏览器预估 100ms 内能否就绪，而实际网络波动会让这个判断失准，尤其对未缓存字体
@font-face 里 font-display 怎么写才生效
必须写在每个 @font-face 规则内部，且只对该声明起作用。外层 CSS、<link> 或 JS 动态插入都无效。
常见错误是复制粘贴漏掉引号、拼错值（比如写成 swop 或 swap:），整个规则会被浏览器忽略——字体不加载，连 fallback 都没机会触发。
- 每个字重都要单独声明
@font-face，不能共用一个font-family名却只给其中某个加font-display - 中文字体必须为
Regular/Bold/Medium等每种字重单独配font-display，否则部分字重仍走默认策略 -
src中必须带format("woff2")，漏写会导致 Safari、旧 Edge 直接忽略整条规则，退回到auto行为，引发 FOIT - WOFF2 路径带跨域时，
src必须加crossorigin，否则 iOS Safari 可能拒绝加载
为什么写了 font-display 还在闪？检查 preload 是否配套
font-display 控制的是“怎么显示”，preload 控制的是“什么时候开始加载”。只设 fallback 不预加载，字体资源仍可能被浏览器排到低优先级，首屏文字已渲染完，字体才刚发起请求。
-
<link rel="preload" href="/fonts/inter-bold.woff2" as="font" type="font/woff2" crossorigin>必须加crossorigin，否则在跨域字体下失效，且后续@font-face可能报 CORS 错误 - 只
preload首屏真正需要的字重（比如标题用Inter-Bold.woff2，正文用Inter-Regular.woff2），别全量preload -
preload的href必须和@font-face中src的路径完全一致（含查询参数，如?v=2） - 必须写
as="font"，写成as="style"或漏掉，浏览器当普通资源 fetch，失去高优先级
中文字体加载闪得特别狠？子集化 + font-size-adjust 才是解法
一个完整中文字体常超 2MB，font-display 再怎么调也盖不住几秒空白。这时单靠 CSS 不够：
- 用
fontmin或在线工具提取首屏实际用到的汉字（如“立即购买”“登录”“首页”），生成 ≤ 200KB 子集字体 - 对关键文本容器显式设置
font-size、line-height、min-height，锁住布局高度，避免替换时跳动 - 搭配
font-size-adjust: 0.5（数值根据 fallback 和 Web 字体的 ex 比例实测），让不同字体基线更一致 - 别指望
swap解决中文字体抖动——它只解决“要不要等”，不解决“换了之后别乱动”
真正卡住字体闪烁的，从来不是某个属性写没写对，而是从 @font-face 声明、子集体积、preload 路径一致性到容器尺寸约束，一环扣一环。漏掉任意一环，font-display 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
