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

作者：袖梨 2026-07-25

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 动态注入，浏览器解析不到，会退回到默认行为