font-display必须写在@font-face规则内才生效，写在外部css类、style属性或js中均无效；每个字重和变体需单独声明并配font-display，且src必须含format()，fallback字体度量需接近以防重排。
font-display 必须写在 @font-face 里，否则无效
浏览器只认 @font-face 规则内部的 font-display，写在其他地方（比如全局 CSS 变量、外部 class、style 属性）完全不起作用。很多开发者误以为加个 font-display: swap 到 body 或字体类上就能控制加载行为，结果首屏还是白屏或跳动——那是因为根本没命中规则。
常见错误包括：
- 把
font-display当成普通 CSS 属性，试图用 JavaScript 动态设置element.style.fontDisplay - 在
@font-face外层套了@supports或媒体查询，导致规则被忽略 - 多个
@font-face声明共用同一个font-family名但没统一设font-display，部分变体退回到默认block
正确做法是每个独立变体都显式声明：
@font-face {
font-family: "Inter";
src: url("inter-regular.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Inter";
font-weight: 700;
src: url("inter-bold.woff2") format("woff2");
font-display: swap;
}
swap 不等于不跳，fallback 字体度量必须接近
font-display: swap 的“无感替换”是假象，实际是否跳，取决于 fallback 字体和 Web 字体的 cap-height、line-gap、字宽分布是否一致。中英文混排时尤其明显：比如用 "sans-serif" 作 fallback，Windows 下可能渲染为 Arial，macOS 下是 Helvetica，而你的 WOFF2 是 Inter，三者行高计算差 2–3px，段落就会突然撑高。
稳妥的 fallback 写法要分系统锁定：
- 中文正文：
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif - 英文正文：
system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif - 避免泛用
sans-serif或serif作为唯一 fallback - 必要时用
line-height和font-size显式固定，防止重排放大跳动感
preload 必须带 crossorigin，否则字体请求直接失败
<link rel="preload"> 加载字体时，如果字体托管在 CDN 或跨域服务上，crossorigin 属性不可省略。漏掉它会导致两个后果：
- 预加载请求被浏览器静默丢弃（Network 面板里看不到该请求）
- 后续
@font-face加载时触发 CORS 错误：Access to font at 'https://cdn.example.com/font.woff2' from origin 'https://site.com' has been blocked by CORS policy
正确写法只有这一种：
<link rel="preload" href="https://cdn.example.com/inter.woff2" as="font" type="font/woff2" crossorigin>
注意：crossorigin 是布尔属性，不用写 crossorigin="anonymous"；type 推荐带上，帮助浏览器提前识别资源类型。
Safari 11.1 以下不支持 font-display，得靠 document.fonts.load 回退
如果你的用户仍有 Safari 10 或 iOS 10 设备（尤其企业内网场景），font-display 完全被忽略，浏览器会走默认 block 行为：文字白屏约 3 秒。这时候不能只靠 CSS，得用 JS 主动干预：
- 用
document.fonts.load("1em Inter")检测字体是否就绪 - 配合
document.fonts.readyPromise，在加载完成后再移除 loading 状态类 - 对超时情况（如 2s 未加载）主动降级，比如添加
font-fallbackclass 强制用系统字体渲染
这不是锦上添花，而是保底逻辑。现代项目里，font-display + document.fonts.load() 是一对必须共存的组合，尤其当品牌字体出现在首屏关键文案中时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
