font-display 在 safari 10、ie 全系、旧版 android browser 中不被识别，整条 @font-face 规则被静默丢弃，导致无 fallback 字体、首屏白屏并 foit 卡顿 3 秒。
font-display 在 Safari 10、IE 全系、旧版 Android Browser 中根本不会被解析，整条 @font-face 规则直接被跳过——不是失效，是压根不认识。
为什么写了 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 解析失败，整条规则作废
font-display: swap 和 fallback 在 Chrome/Firefox 下行为不一致
Chrome 一旦字体加载完成就立刻重绘；Firefox 有时会等布局稳定后再换，造成轻微延迟。而 font-display: fallback 的阻塞窗口也不一样：Chrome 是 ~100ms，Firefox 可能延长到 ~500ms。
- 关键文本（正文、按钮、表单标签）统一用
font-display: swap，确保用户第一时间看到内容 - 大体积中文字体标题（>1.5MB）改用
font-display: fallback，避免用户已滚动走才触发替换 - 同一字体族不同字重（如 400/700）必须各自声明独立的
@font-face并配对应font-display，混用会导致部分字重静默回退
preload 不加 crossorigin 就等于没写
font-display 控制的是“怎么显示”，不是“怎么加载”。没提前加载，swap 也救不了首屏。
-
<link rel="preload" as="font">必须出现在所有引用该字体的 CSS<link rel="stylesheet">之前，否则浏览器可能发起重复请求 - Safari 10 不支持
as="font"，会当普通资源 fetch；IE 和旧 Android 浏览器根本不认识preload -
crossorigin属性不能省——不加可能 403；加了又需服务端配好Access-Control-Allow-Origin响应头
兼容 Safari 10 或 iOS 10.3 以下的兜底方案
放弃 font-display，回归更鲁棒的老办法：
- 用
@font-face提供eot/woff2/woff/ttf多格式降级，src中local()放最前 - 内联关键字体 CSS 到
，避免外链延迟阻塞 - 搭配系统级回退链：
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif - 避免 JS 动态插入
preload标签——老浏览器执行时机不可控，常晚于 CSS 解析
最容易被忽略的一点：size-adjust 仅 Chromium 和 Safari 17.4+ 支持，且必须和 swap 共用才能缓解布局偏移；但前提是 @font-face 能被正确解析——Safari 10 连这个前提都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
