Tailwind CSS如何优化字体加载性能_借助font-display属性控制CSS字体渲染

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 对这个新请求依然生效，但用户感知就是“部分文字没换字体”。