font-display: swap 是必须显式设置的，否则浏览器默认 block 行为会导致首屏文字白屏约3秒；它强制立即用系统字体渲染，待自定义字体加载完成后再无感替换，是优化移动端字体加载体验的核心手段。
font-display: swap 是必须加的，不加就默认 block，首屏文字大概率白屏 3 秒——这不是 bug，是浏览器在严格执行规范。
必须显式设置 font-display 属性
所有 @font-face 规则里都要写 font-display: swap，别信 auto 或留空。Chrome、Firefox 默认等同于 block：先藏文字 100ms，再等最多 3 秒，失败才 fallback。对内容页就是硬伤。
-
swap：最稳妥，立即显示系统字体，加载完立刻替换（注意可能触发重排） -
fallback：只给约 100ms 加载窗口，超时永久 fallback，适合非关键标题 -
optional：仅缓存命中或网络极快时才用，适合装饰性 icon 字体 - 别用
block，等于主动制造 FOIT；也别省略该属性，等于默认启用block
preload 关键字体必须带 crossorigin
<link rel="preload"> 是唯一能提前触发字体下载的 HTML 级手段，但漏掉 crossorigin，浏览器直接忽略请求——哪怕字体跟页面同源。
- 必须同时写
as="font"、type="font/woff2"和crossorigin - 只对首屏确定要用的字体做 preload，比如正文/标题所用的
Inter.woff2 - preload 不替代
@font-face，两者要共存：preload 负责提前取，@font-face 负责声明和应用 - 在 Chrome DevTools Network 面板里，正确 preload 的请求 Priority 显示为
high，否则就是写错了
只上线 WOFF2，删掉所有其他格式
WOFF2 在 Chrome 36+、Firefox 39+、Safari 10+、Edge 14+ 全面支持，体积比 TTF 小 30%~80%，尤其中文字体子集化后更明显。继续打包 TTF/EOT/woff1 只会增加 CDN 缓存压力、HTTP 请求数和构建复杂度。
- 构建流程中用
fonttools或web-font-generator直接转 WOFF2，删掉其他格式 - 服务器返回
.woff2文件时，响应头必须含Content-Type: font/woff2，否则部分浏览器拒收 - IE11 已退出主流支持周期，真有强制需求再单独走 JS 动态加载
用 document.fonts.load() 主动检测加载状态
靠 CSS 声明没法知道字体到底加载成功没。document.fonts.load() 是唯一标准 API，能让你在 JS 层感知失败并降级处理。
- 示例：
document.fonts.load('1em "Inter"', 'a').then(() => console.log('loaded')) - 它不阻塞渲染，但需配合
font-display: swap才有意义 - 错误时不会抛异常，要检查
Promise的 resolve 结果是否为true - 别依赖
WebFont.load()这类第三方库，现代浏览器原生支持已足够稳定
最容易被忽略的是：字体加载失败时没有任何控制台报错，用户看到的只是文字突然“跳”了一下或一直没换——你得自己用 document.fonts.load() 检查，否则永远不知道优化有没有真正生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
