font-display 是 @font-face 中控制字体加载期间文本渲染策略的描述符，决定是否显示空白（foit）或先用系统字体（fout）。其值如 swap、fallback、optional 可避免首屏文字消失，需为每个字重单独设置。
font-display 是什么，为什么它能影响首屏渲染
font-display 是 @font-face 规则里的一个描述符，告诉浏览器：当字体还没加载完时，文本该“等”还是“先用系统字体顶上”。它不改变字体文件大小，但直接决定用户是否看到空白文本（FOIT）或闪动（FOUT）。默认值是 auto，行为由浏览器决定，Chrome 会阻塞约 3s，Firefox 更久——这在弱网下极易造成首屏文字消失。
font-display 可选值的实际表现差异
四个常用值中，只有三个有明确、可预测的行为：
-
swap：立即用系统字体渲染，字体加载完成立刻替换。适合品牌字体，但要注意 FOUT（字体切换闪动）是否可接受 -
fallback：短等待（100ms 左右）后用系统字体，之后加载完成也不再替换。兼顾性能与稳定性，推荐多数场景 -
optional：只在字体缓存命中时使用，否则全程用系统字体。适合非关键字体（如装饰性标题字），节省带宽 -
block和auto基本等价于 FOIT，不建议线上使用
如何正确写 @font-face 并启用 font-display
必须把 font-display 放在 @font-face 块内，且位置无关先后；但注意它只对当前声明生效，每个字体需单独设置：
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-var-latin.woff2') format('woff2');
font-weight: 100 900;
font-display: fallback; /* 必须在这里 */
font-style: normal;
}
常见错误包括：
- 漏写
font-display，尤其在从 Google Fonts 复制 CSS 时（它默认不带） - 误写成
display: font或放在外部 CSS 规则里 - 用了
swap却没配好font-weight范围，导致粗体仍回退到系统字体
搭配 preload 和字体子集进一步提速
font-display 解决的是“怎么展示”，但加载本身还得靠其他手段：
- 对关键字体（如正文
body使用的），用<link rel="preload">提前触发请求：<link rel="preload" href="/fonts/inter-var-latin.woff2" as="font" type="font/woff2" crossorigin>
- 避免全量引入：用
unicode-range切子集（如只含中文字符的版本），或构建时用glyphhanger提取实际用到的码点 - 确保服务器返回
font/woff2的正确 MIME 类型，否则 Chrome 可能拒绝解析
最常被忽略的一点：font-display: fallback 在字体加载失败时不会重试，也不会降级到其他 @font-face 声明——它只管“这次这个字体”的策略。所以多个字重（light / bold）必须各自声明并各自设 font-display。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
