Safari 10.x 及更早版本不支持 font-display，会整条丢弃 @font-face 规则，导致字体不加载、图标消失；应通过显式 format 声明、preload 预加载和内联 CSS 三步兜底。
老旧浏览器（尤其是 Safari 10.x 及更早、IE11）根本不支持 font-display，直接忽略该声明——这不是“兼容性差”，而是语法无效。所以别试图给它加 @supports 包裹，它连解析都跳过。
为什么 Safari 10.x 下 font-display 完全不生效？
Safari 10.0–10.1（2016–2017 年发布）未实现 font-display CSS 属性，任何含该关键字的 @font-face 规则会被整个丢弃，包括其中的 src、font-weight 等其他有效字段。这意味着：字体根本不会加载，图标字体消失，文本回退到系统字体且无任何提示。
- DevTools 的 Styles 面板里，整条
@font-face规则会变灰并标为 “invalid” - Network 面板看不到字体请求，
src路径完全没触发 - 即使写了
font-display: swap，也等同于没写@font-face
绕过 font-display 的三步兜底策略
放弃在旧 Safari 中启用 font-display，转而用底层可控手段确保字体至少能加载出来：
- 每个
@font-face必须显式声明format("woff2")和format("woff")，且woff2放在src列表最前——Safari 10 只认format()声明，漏写或顺序错会导致整条规则被跳过 - 在
中添加预加载：；crossorigin属性不可省，否则 Safari 10 请求字体时返回 403 - 把关键
@font-face规则内联进 HTML 的标签里，避免依赖外链 CSS 加载完成后再解析——旧 Safari 对外链 CSS 中的字体声明响应极慢，常错过首屏渲染时机
font-display: fallback 在移动端实际失效的典型场景
很多人以为 font-display: fallback 是“安全牌”，但在 iOS Safari（尤其 14–15）中，它对中文字体几乎无效：2MB+ 的子集化字体文件，100ms 内不可能加载完成，结果就是永远走 fallback，图标和标题全用苹方显示，品牌一致性归零。
- 不要对中文字体单独用
fallback；正文建议改用swap+preload+ 尺寸约束（如font-size: clamp(1rem, 4vw, 1.5rem)） - 每个字重（
Regular/Bold/Medium）必须独立写@font-face，共用一个font-family名但只给其中一个设font-display，旧浏览器会直接忽略全部 -
font-display值必须拼写准确：swop、"swap"、swap:全部导致整条规则失效
真正难的不是写对 font-display，而是当它被浏览器静默丢弃时，你得提前准备好另一套加载逻辑——预加载、格式声明、内联位置，这三个点漏掉任何一个，旧 Safari 就只会显示空白或乱码图标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
