font-display: swap 是唯一不改 html、js 就能让文本“立刻可见”的方案：系统字体先撑开布局，自定义字体就绪后替换；preload 必须带 crossorigin 属性；优先用 woff2 格式并提供 woff 降级；document.fonts.load() 仅用于失败上报。
font-display: swap 必须显式写在 @font-face 里
不写 font-display，浏览器就按 auto 处理，实际等同于 block：文字先空白约 100ms，再最多等 3 秒加载字体，失败才 fallback。在线预览场景下，用户打开页面第一眼看到的就是白屏段落，不是加载慢，是浏览器在守规矩。
用 swap 是唯一不改 HTML、不写 JS 就能让文本「立刻可见」的方案：系统字体先撑开布局，等自定义字体一就绪就替换。重排风险存在（尤其中英文混排或字宽差异大时），但比白屏好十倍。
别用 block，也别省略 font-display；fallback 和 optional 适合非关键文本（如装饰性标题），正文类优先选 swap。
preload 字体必须带 crossorigin 属性
<link rel="preload"> 是唯一能在 HTML 解析阶段就触发字体下载的手段，但漏掉 crossorigin，浏览器会静默忽略该请求——哪怕字体跟页面同源。
正确写法只有一种组合：as="font" + type="font/woff2" + crossorigin（值为空即可，crossorigin="" 或 crossorigin 都行）。
常见错误现象：
- Network 面板里看不到该字体请求，或 Priority 显示为
lowest - 写了
crossorigin，但字体服务没配 CORS 响应头 → 控制台报CORS error - 只 preload 首屏确定用到的字重，比如
Inter-Bold.woff2，别把整套 variable font 全 preloaded
只上线 WOFF2 格式，并提供 woff 降级
所有现代浏览器（Chrome 36+、Firefox 39+、Safari 10+、Edge 14+）原生支持 WOFF2，压缩率比 TTF 高 30%~80%，中文字体子集化后常压到原大小 20% 以内。
常见错误是只写一个 src，导致某些网络或系统条件下 fallback 失败。必须提供至少两个格式：
- 优先
url("/fonts/Inter.woff2") format("woff2") - 降级
url("/fonts/Inter.woff") format("woff") - 别用
ttf（无压缩、体积大），更别为 IE 保留eot或svg（IE11 已退出主流支持周期）
服务器需对 .woff2 文件返回 Content-Type: font/woff2，否则部分浏览器拒收。
document.fonts.load() 只用于失败上报，不控制首屏
document.fonts.load() 无法解决首屏渲染问题，它既不能加速加载，也不能替代 font-display: swap 的作用。它的唯一合理用途是：检测字体是否加载失败，用于异常上报或轻量级 fallback 提示。
比如 CDN 故障、路径写错、CORS 拦截等情况，仅靠 swap 用户永远看不到异常，但你也不知道出了问题。
示例用法：
document.fonts.load('1em "Inter"', 'a').then(() => {
// 加载成功，可忽略
}).catch(() => {
// 上报监控或打日志，不建议在此改样式或重试
});
注意：别在 load() 成功后才设置 body 类名来“启用”字体样式——这会让首屏文字再次闪动或延迟出现，违背优化初衷。
真正影响首屏文字是否及时出现的，只有三件事：font-display 值、preload 是否生效、字体文件体积是否足够小。其他操作都是补救或观测手段，别本末倒置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
