font-display必须显式设为swap，否则浏览器按auto（等同block）处理，导致文字先隐藏100ms再最多等待3秒，引发首屏白屏；swap可立即用系统字体渲染并替换，fallback仅提供约100ms窗口且永久回退，block和省略font-display均不可取。
font-display 必须显式设为 swap 或 fallback
不写 font-display，浏览器就按 auto（实际等同于 block）处理：文字先消失 100ms，再等最多 3 秒字体加载，失败才 fallback——首屏白屏就是这么来的。
实操建议：
-
swap是最稳妥选择：立即用系统字体撑开布局，字体一就位立刻替换（注意可能触发小范围重排） -
fallback适合非品牌正文，比如辅助说明文字；它只给约 100ms 加载窗口，超时直接永久 fallback - 绝对别用
block，也别省略font-display——这不是可选项，是必填项 - 每个
@font-face块都得单独配font-display，不能靠全局样式覆盖
preload 字体必须带 crossorigin 属性
漏掉 crossorigin，<link rel="preload"> 就等于没写：浏览器直接忽略请求，Network 面板里根本看不到 high 优先级的字体请求。
正确写法只有这一种组合：
<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>
关键点：
-
as="font"和crossorigin缺一不可，type推荐加上，避免 MIME 类型误判 - preload 只对当前页「确定马上要用」的字体生效，比如标题和正文所用字体；多 preload 一个，就多抢一份带宽
- preload 不替代
@font-face，两者必须共存：前者负责提前拉取，后者负责声明和应用
只上线 WOFF2，删掉所有其他字体格式
TTF、EOT、WOFF1 这些老格式不仅体积大（比 WOFF2 多 30%~80%），还增加 CDN 缓存压力和构建复杂度。现代浏览器（Chrome 36+、Firefox 39+、Safari 10+、Edge 14+）原生支持 WOFF2，没必要留后路。
落地动作：
- 构建流程中用
fonttools或web-font-generator直接转 WOFF2，输出后删掉所有其他格式文件 - 检查服务器响应头：
.woff2文件必须返回Content-Type: font/woff2，否则部分浏览器拒收 - IE11 已退出主流支持周期，真有强制兼容需求，走 JS 动态加载或条件注释，别污染主链路
内联关键 CSS 时别把字体声明挤出去
很多人把首屏必需样式（header、hero、按钮）全塞进 <style></style>，结果 @font-face 被挤到外部 CSS 里——这就导致字体声明滞后，font-display 失效，白屏风险照旧。
正确做法：
-
@font-face规则必须和首屏样式一起内联进的<style></style>中，确保它在 HTML 解析早期就注册 - 内联总大小控制在 ≈14KB（gzip 后建议 4–8KB），否则可能跨 TCP 包影响 TTFB
- 禁止在内联
<style></style>里用@import，它会阻塞解析，且无法被预加载识别
font-display，而是 @font-face 声明的位置和时机——它必须出现在内联 CSS 里，且不能被体积限制挤出首屏资源块。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
