font-display: swap在旧版safari（≤15.6）和edge（≤18）中完全不生效，因其直接跳过漏format("woff2")或含相对路径的@font-face规则，退回到auto导致foit；它必须写在@font-face内、无引号无冒号全小写，且需配合preload、正确format声明及每字重单独配置才有效。
font-display 在 Safari 和旧 Edge 中根本不会生效
这不是兼容性“差”，而是规则压根没被解析——旧版 Safari（≤15.6）、Edge ≤18 会直接跳过整条 @font-face 声明，只要里面漏了 format("woff2") 或路径写成相对地址（比如 url(./fonts/icon.woff2)），就等于没写 font-display。它们退回到 auto 行为，导致 FOIT（文字空白）持续数秒甚至永不显示。
Chrome、Firefox、新版 Edge（≥79）和 Safari ≥16 支持完整，但行为仍有差异：
-
swap在 iOS Safari 渲染更激进：后备字体与 Web 字体的行高/基线不一致时，文字会明显上移或下移一帧，尤其在flex或中英文混排里 -
optional在 Safari 上实际效果接近swap，但部分 WebView（如微信内置浏览器）会直接忽略该值，降级为auto -
block的阻塞期在各浏览器中不统一：Chrome 是 3 秒，Safari 可能长达 5 秒甚至无限等待
@font-face 必须带 format() 才能触发 font-display
只写 src: url("font.woff2") 是无效的；浏览器必须看到明确的格式声明，才会启用 font-display。漏掉 format("woff2")，整条规则静默失效。
- ✅ 正确写法：
src: url("/fonts/inter-bold.woff2") format("woff2") - ❌ 错误写法：
src: url("inter-bold.woff2")（无 format）、src: url("inter-bold.woff2") format("woff")（格式错配） - WOFF2 是唯一安全选择：TTF/OTF 在 iOS 上解析慢，容易延长闪烁窗口；EOT/woff 已淘汰，仅用于 IE 兜底，但 IE 不支持
font-display
font-display 值写错一个字符就全失效
font-display 对语法极其敏感，拼错、加引号、大小写错误都会导致整条 @font-face 被浏览器丢弃——连 fallback 都没机会触发。
- ❌
font-display: "swap"（引号非法） - ❌
font-display: swap:（冒号多余） - ❌
font-display: SwAp（大小写错误） - ✅
font-display: swap（全小写、无引号、无冒号） - 它只能出现在
@font-face块内，不能塞进<link>、JS 插入的 style 标签或外层 CSS 中
不配合 preload，swap 就是纸上谈兵
font-display: swap 控制“怎么显示”，<link rel="preload"> 控制“什么时候开始加载”。没预加载，swap 的替换窗口在弱网下可能拖到 1.5 秒以上——用户已经滚动半屏，字体请求才刚发出。
-
<link rel="preload" href="/fonts/inter-bold.woff2" as="font" type="font/woff2" crossorigin>——crossorigin必须加，否则 CDN 字体预加载失败 -
as="font"不能写成as="style"或省略，否则失去高优先级 - href 必须和
@font-face中src的路径完全一致（含查询参数，如?v=2） - 只 preload 首屏真正需要的字重：标题用 Bold，正文用 Regular；别把所有字重都 preload
最易被忽略的是：每个字重（font-weight: 400、600、700）都要单独声明 @font-face 并各自配 font-display 和 preload，共用一条声明会导致部分字重失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
