font-display: fallback是多数场景的平衡点，500ms内用系统字体渲染，超时后放弃加载，不阻塞布局也不强求替换；需配合preload、WOFF2格式及正确@font-face声明才生效。
直接用 font-display: fallback，配 preload 和正确 @font-face 声明，90% 的字体闪烁问题就没了。别只写 swap 就以为搞定——它在弱网或 iOS Safari 下反而容易闪得更明显。
font-display 值选哪个才不闪
不是越快越好，也不是默认最稳。auto 和 block 容易造成 FOIT（文字空白），swap 虽然立刻显示系统字体，但若自定义字体加载慢或失败，用户会长时间看到不一致的排版，且 iOS Safari 对 swap 的实现会更激进，可能延迟替换；optional 浏览器可能直接跳过加载，图标字体尤其危险。
fallback 是多数场景的平衡点：500ms 内用系统字体渲染，超时后放弃加载，不阻塞布局，也不强求替换。中英文混排、首屏文案、表单文本都适合它。
-
fallback：推荐 Web 应用正文、标题、按钮等关键文本 -
swap：仅限品牌字体、非核心装饰性文字，且必须确保 WOFF2 文件小（≤100KB） -
optional：只用于图标字体（如 Iconfont）的非关键 icon，或网络条件极差时可接受降级的场景
@font-face 里 font-display 怎么写才生效
必须写在每个 @font-face 规则内部，且只对该声明起作用。外层 CSS、HTML 的 <link> 或 JS 动态插入都无效。
常见错误是复制粘贴漏掉引号、拼错值（比如写成 swop 或 swap:），整个规则会被浏览器忽略——字体不加载，连 fallback 都没机会触发。
- 每个字重都要单独声明
@font-face，不能共用一个font-family名却只给其中某个加font-display - 中文字体必须为 Regular / Bold / Medium 等每种字重单独配
font-display，否则部分字重仍走默认策略 - WOFF2 路径带跨域时，
@font-face的src必须加format('woff2') 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首屏真正需要的字重（比如标题用 Bold，正文用 Regular），别全量 preload -
preload的href必须和@font-face中src的路径完全一致，大小写、斜杠都不能错 - 不要在异步加载的 CSS 文件里放
@font-face，应放在主样式表靠前位置，否则preload提前拉了，CSS 还没解析到声明，字体不会应用
移动端中文字体加载特别容易闪，怎么办
一个完整中文字体常超 2MB，3G 网络下加载数秒，swap 或 fallback 都救不了——系统字体撑开布局后，大字体一来就会导致重排+重绘，视觉上就是“跳”。
根本解法不是调 font-display，而是缩小字体体积：提取首屏用字生成子集（如用 pyftsubset 或在线工具），控制在 ≤200KB；再配合 font-display: optional + preload，让浏览器只在能快速就绪时才用它。
- 避免在
@font-face中并列多个src（如 WOFF2 + WOFF + TTF），移动端解析开销高，优先单写 WOFF2 - 给文本元素显式设置
font-size、line-height、height，防止字体切换时布局抖动 - IE11 不支持
font-display，需用document.fonts.load()主动监听，或用webfontloader控制加载时机
最容易被忽略的一点：字体闪烁从来不是单一配置能解决的问题。font-display 是开关，preload 是油门，字体体积和字重拆分才是底盘。三者不匹配，再对的值也压不住闪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
