font-display: swap 必须写在每个@font-face规则内才生效，漏写会导致FOIT；preload字体需同时满足crossorigin、as="font"、type="font/woff2"；Google Fonts的&display=swap仅对link有效，@import会忽略；Safari/Edge要求显式声明format("woff2")，否则整个@font-face被忽略。
font-display: swap 必须写在每个 @font-face 里才生效
浏览器只认 @font-face 规则内部的 font-display: swap，写在 class、style 属性、@supports 块甚至 JS 的 element.style.fontDisplay 上，全都不起作用。
常见错误是：多个 @font-face 共用同一个 font-family 名（比如 Inter），但只给 font-weight: 400 的那个加了 font-display: swap，而 700 和 italic 版本没加——结果粗体或斜体文字仍会白屏 3 秒（FOIT）。
另一个坑是用 @import 引入字体 CSS，误以为它能继承加载策略。其实 @import 是串行、阻塞的，浏览器照旧卡住，font-display 根本没机会生效。
preload 字体必须带 crossorigin、as="font"、type
preload 不是加了 <link rel="preload"> 就完事。字体请求默认是匿名的，CORS 策略会静默拦截未声明 crossorigin 的响应，导致字体下载完成也不应用。
立即学习“前端免费学习笔记（深入）”；
这三样缺一不可：
-
crossorigin属性（哪怕同源也得加） -
as="font"（写成as="fetch"或漏掉就退化为普通 fetch） -
type="font/woff2"（类型不匹配，Chrome Network 面板 Priority 显示为 Low）
示例正确写法：
<link rel="preload" href="/fonts/inter-bold.woff2" as="font" type="font/woff2" crossorigin>
注意：preload 只对 swap 或 optional 有效；设成 block 时，预加载反而延长阻塞时间。
Google Fonts 的 &display=swap 参数只管 link 引入，不管 @import
用 <link href="https://fonts.googleapis.com/..." rel="stylesheet"> 时，&display=swap 能让 Google Fonts 服务端自动注入 font-display: swap 到返回的 CSS 中——这是有效的。
但如果你改用 @import url('https://fonts.googleapis.com/...&display=swap');，这个参数会被忽略。因为 @import 加载的是纯 CSS 内容，不经过 Google Fonts 的渲染逻辑，最终返回的 CSS 里没有 font-display 声明，浏览器仍按默认 auto 处理。
所以：要真用上 swap，就别用 @import 引 Google Fonts；或者手动把返回的 CSS 拷出来，自己补全每个 @font-face 的 font-display: swap 和 format("woff2")。
漏写 format("woff2") 会让整个 @font-face 被 Safari/Edge 忽略
旧版 Safari 和 Edge 对 @font-face 的解析很严格：如果没显式声明 format("woff2")，整个规则会被跳过——哪怕字体文件存在、URL 正确，font-display 也跟着失效。
这不是警告，是直接不注册该字体。检查方式很简单：打开 DevTools → Elements → 找到文字元素 → 查看 Computed 面板里的 font-family 是否回退到了 fallback，再看 Fonts 面板有没有加载成功记录。
正确写法示例：
@font-face {<br> font-family: 'Inter';<br> src: url('/fonts/inter-var-latin.woff2') format('woff2');<br> font-display: swap;<br>}
别省略 format()，也别写错（比如写成 format("woff") 却加载 .woff2 文件）。
最常被忽略的其实是 fallback 字体链的设计：swap 后文字会先用系统字体撑开布局，如果 fallback 字体和自定义字体的字宽、行高差异太大，会导致文本重排（layout shift），用户看到“跳动”。这不是阻塞问题，但体验一样差。
