font-display 在 Safari 10 及更早版本、IE 全系列和旧版 Android Browser 中完全不被识别，导致 @font-face 规则被整体忽略，回退至 font-display: auto（等效 block），引发首屏白屏 3 秒（FOIT）；验证方式为 DevTools 中规则灰显；常见触发点包括中文引号、format() 缺失、local() 未置首、可变字体语法错误；Chrome 与 Firefox 对 swap/fallback 的时机处理存在差异；关键文本推荐 swap，大体积中文字体标题建议 fallback；同一字体族不同字重需独立声明并配对应 font-display；preload 必须搭配 crossorigin 才生效，且 Safari 10 不支持 as="font"；size-adjust 仅 Chromium 和 Safari 17.4+ 支持，需与 swap 共用才能缓解布局偏移，但依赖 @font-face 正确解析。
font-display 在 Safari 10 及更早版本中完全失效
不是写错了，是浏览器压根不认识这个属性。Safari ≤10、IE 全系列、旧版 Android Browser 都不支持 font-display，遇到带该声明的 @font-face 规则会直接跳过整条——连 fallback 字体都用不上。结果就是回退到默认的 font-display: auto，实际等效于 block，首屏白屏 3 秒（FOIT）。
验证方法很简单：打开 Safari 10 的 DevTools → Elements 面板 → 找到你的 @font-face 声明 → 如果整块规则灰掉或没生效，基本就是被忽略了。
常见触发点包括：
-
format("woff2")里用了中文引号或漏了format()函数 -
src中local()没放在最前（老浏览器要求 strict order） - 写了
font-weight: 300 700这类可变字体语法（Safari 10 解析失败，丢弃整条）
Chrome/Firefox 支持但行为不一致：swap vs fallback 的选择偏差
font-display: swap 在 Chrome 和 Firefox 下表现接近，但对“替换时机”的容忍度不同。Chrome 一旦字体加载完成就立刻触发重绘；Firefox 有时会等布局稳定后再换，导致轻微延迟。而 font-display: fallback 在 Chrome 是 ~100ms block + fallback，Firefox 则可能延长到 ~500ms，这在弱网下会让用户更早看到系统字体，但也可能错过字体加载窗口。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 正文/按钮/表单标签这类关键文本，统一用
font-display: swap，确保可见性优先 - 标题类内容若体积大（如中文字体 >1.5MB），改用
font-display: fallback，避免用户已滚动走才触发替换 - 别混用值：同一字体族内，
font-weight: 400和700必须各自声明独立的@font-face并配对应font-display，否则部分字重会静默回退失败
preload 与 crossorigin 不配对，等于没写
写了 <link rel="preload" as="font"> 却没加 crossorigin，Chrome 就不会把预加载资源用于 @font-face ——即使路径完全正确，也会重新发一次请求。这是因为字体属于跨域资源，浏览器强制要求显式声明才能共享缓存。
更麻烦的是兼容性断层：
- Safari 10 不认识
as="font"，会当普通资源 fetch，但不加crossorigin又可能 403 - IE 和旧 Android 浏览器根本不支持
preload，必须靠内联关键 CSS 或服务端注入兜底 - 动态用 JS 插入
preload标签，在老浏览器里执行时机不可控，常晚于 CSS 解析，失去意义
正确写法只有一种：<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>
size-adjust 能压 layout shift，但只在 Chromium 和 Safari 17.4+ 生效
font-display: swap 解决不了文字抖动，因为回退字体和自定义字体的 x-height、line-height、字宽不同，替换时必然重排。这时候 size-adjust 才是关键，但它不是万能的。
它只接受百分比值（如 size-adjust: 102%），作用是微调回退字体的占位比例，让初始渲染空间更贴近目标字体的实际度量。但注意：
- 必须和
font-display: swap共存才起作用 - 仅 Chromium（Chrome/Edge）和 Safari 17.4+ 支持，Firefox 和旧 Safari 完全忽略
- 值需要实测：DevTools → Rendering → Layout Shift Regions，硬刷新后观察红框是否减弱
最容易被忽略的一点：你调好了 size-adjust，但如果 @font-face 本身因格式或语法错误被老浏览器跳过，那这个值再准也没人读得懂。
