foit/fout是字体加载导致的文本渲染阻塞现象：foit为白屏，fout为回退字体闪现后替换；font-display: swap可立即用系统字体渲染并无缝替换，配合preload和本地字体fallback能有效优化。
字体加载导致的FOIT/FOUT是什么
浏览器默认会阻塞文本渲染，直到自定义字体（比如 @font-face 定义的 Web Font）加载完成或超时，这期间要么空白（FOIT），要么回退字体闪一下再换（FOUT）。这不是“闪烁”本身的问题，而是字体加载策略没控制好。
font-display 是解决闪烁最直接的配置项
在 @font-face 规则里加 font-display，能明确告诉浏览器怎么处理加载中的字体。不加它，Chrome 等现代浏览器默认用 font-display: auto，行为不可控，容易 FOIT。
推荐用 font-display: swap：
- 立即用系统字体渲染文字，等自定义字体加载完再无感替换
- 避免白屏，也避免长等待后突然重排造成的跳动
- 兼容性好（Chrome 60+、Firefox 60+、Safari 11.1+）
示例：
@font-face {
font-family: 'Inter';
src: url('inter.woff2') format('woff2');
font-display: swap; /* 关键 */
}
预加载关键字体可缩短 FOUT 时间
仅靠 font-display: swap 还不够——如果字体文件大或网络慢，回退字体显示太久，用户仍会觉得“闪得明显”。这时需要提前触发字体下载。
用 <link rel="preload"> 提前拉取字体资源：
- 只对核心文本用的字体做预加载（如标题字体），别全量预加载
- 确保
as="font"和type="font/woff2"都写上，否则可能被忽略或 MIME 校验失败 - 必须加
crossorigin属性，否则字体预加载会静默失败（即使路径正确）
示例：
<link rel="preload" href="inter.woff2" as="font" type="font/woff2" crossorigin>
本地字体 fallback 能进一步降低感知延迟
即使用了 swap 和 preload，首次访问用户仍要等网络请求。如果字体支持良好，可以加一层本地字体兜底，让文字从第一帧就“看起来像设计稿”。
比如：
body {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
注意点：
- 本地字体列表要按兼容性从高到低排，iOS/macOS 的
-apple-system渲染质量高，优先放前面 - 别把 Web Font 放在本地字体后面（如
"Inter", sans-serif），否则 swap 前根本不会用它 - 不同系统对同名字体的渲染差异大，别依赖“名字一样就长得一样”
真正影响闪烁体验的，从来不是“用了什么字体”，而是你有没有主动控制加载时机、降级路径和回退节奏。漏掉 crossorigin 或误写 font-display: optional 这类小配置，都可能让整套优化失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
