font-display 是 @font-face 中控制字体加载期间文本显示行为的描述符，可避免 FOIT 白屏或优化 FOUT 体验；常用值包括 swap（立即回退后替换）、fallback（短阻塞后回退）和 optional（仅缓存命中时使用）。
font-display 是什么，为什么它能解决字体加载卡顿
font-display 是 CSS @font-face 规则里的一个描述符，它告诉浏览器：当自定义字体还没加载完时，该怎么显示文字。不设它，Chrome 和 Edge 默认用 font-display: auto，实际表现接近 block——会等约 3 秒才 fallback 到系统字体，期间文字完全空白（FOIT）。用户看到白块，体验直接掉档。
关键不是“要不要用”，而是选对值：
-
swap：最常用。立即用系统字体渲染，等自定义字体加载完再替换（FOUT），肉眼可见切换但无空白 -
optional：更激进。只在字体缓存命中时使用；否则全程用系统字体，不发起网络请求——适合非品牌核心字体 -
fallback：折中。短暂 block（~100ms），之后 fallback，加载成功再 swap——适合标题类关键文本
Tailwind 项目里怎么加 font-display（不改源码）
Tailwind 本身不生成 @font-face 规则，它不管字体加载逻辑。你得自己写，但可以无缝集成到 Tailwind 工作流里：
- 在
src/styles.css或app.css顶部（@tailwind指令之前）手动写@font-face，确保font-display在里面 - 字体文件路径要和你实际部署位置一致，比如用
url('/fonts/inter-var-latin.woff2')而不是相对路径../fonts/...，避免构建后 404 - 别把字体名写成
Inter Var这种带空格的，用连字符或驼峰，比如InterVar，否则font-family引用容易出错
示例：
@font-face {
font-family: 'InterVar';
src: url('/fonts/inter-var-latin.woff2') format('woff2');
font-weight: 100 900;
font-display: swap;
font-style: normal;
}
用了 swap 还有 FOUT 闪烁？检查这几个地方
设了 font-display: swap 却还是看到明显字体跳变，大概率不是 font-display 的问题，而是：
- 字体文件体积太大：单个
.woff2超过 100KB 就该拆子集（比如只留拉丁文 + 数字），用pyftsubset或在线工具处理 - CSS 中没统一指定
font-family：Tailwind 的font-sans类默认是系统字体栈，你得在tailwind.config.js的theme.fontFamily.sans里显式覆盖成['InterVar', ...default] - 字体加载时机太晚：如果把
@font-face放在 CSS 文件底部，或通过 JS 动态注入，浏览器解析不到，会退回到默认行为
optional 真的适合所有字体吗
不是。它适合那些“没有也行”的字体，比如图标字体、装饰性字体、小字号辅助文本用的字体。但如果你的 logo、主标题强依赖某个可变字体（如 InterVar），设成 optional 可能导致首屏永远看不到设计意图——浏览器干脆不加载。
真正要注意的是缓存策略：optional 下，字体只在 Cache-Control 命中时才用，所以务必确保字体文件响应头带 max-age=31536000 且有 immutable（Vite / Next.js 默认配好，但自己托管静态资源时容易漏）。
复杂点在于：同一个字体家族，不同字重可能被当成不同字体处理。比如你只预加载了 font-weight: 400，但 CSS 里写了 font-medium（对应 500），浏览器仍会发起新请求——optional 对这个新请求依然生效，但用户感知就是“部分文字没换字体”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
