Safari ≤10.1 完全不支持 font-display，遇未知属性会直接丢弃整条 @font-face 规则；需用 woff/woff2 双格式、preload、内联 CSS 及严格字体匹配来兼容。

老版本 Safari（≤10.1，对应 iOS 10.3 及更早）根本不支持 font-display，写了也白写——不是配置错，是浏览器压根不识别这个属性。

为什么 font-display 在 Safari ≤10.1 中完全无效

Chrome 60+、Firefox 60+、Edge 17+ 和 Safari 11.1+ 才开始原生支持 font-display。Safari ≤10.1 遇到不认识的 @font-face 属性，会直接跳过整条规则，连 fallback 字体都用不上。这不是“没生效”，而是“被丢弃”。常见触发点包括：

• format("woff2") 写成中文引号或漏掉 format() 函数
• src 里混用 url() 和 local()，且 local() 没放在最前
• 用了现代语法如 font-weight: 300 700（可变字体范围），老内核报错后整块规则作废

如何验证 font-display 是否真被支持

别靠 JS 检测——CSS 层面的 unsupported 是静默失效，无报错、无 warning。正确做法是：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 打开 Safari 开发者工具 → Elements → 找到 @font-face 声明 → 看是否被标灰并显示 “invalid” 或 “Not supported”
• 在 Network 面板过滤 Fonts，确认字体请求状态码是 200；若字体根本没出现在列表里，说明 @font-face 规则已被跳过
• 临时执行 document.fonts.check("16px 'YourFontName'")，返回 false 且字体未加载，基本可判定规则失效

兼容 Safari 10.x 的实际替代方案

放弃 font-display，改用更底层、更可控的组合策略：

• 必须提供 .woff2 + .woff 双格式，并在每个 @font-face 中显式写出 format("woff2") 和 format("woff")
• 在 最前面加预加载：（crossorigin 不可省，否则 Safari 10 下 403）
• 兜底用内联关键 CSS：把核心 @font-face 声明直接写在 标签里，避免外链 CSS 加载延迟导致规则错过解析时机
• fallback 字体必须与 Web 字体度量接近（字号、行高、x-height），否则 swap 即使生效也会引发 CLS；可用 font-size-adjust: 0.52 锁定比例（注意 Safari 17+ 才完整支持，老版本仅靠选对 fallback）

最容易被忽略的细节

很多人以为只要 fallback 字体能显示就万事大吉，但 Safari ≤10.1 对 font-family 的匹配更敏感：系统若已安装同名字体（比如 macOS 字体册里有 “Inter”），它会优先调用本地版本，导致图标乱码或字重错乱。务必检查字体册并禁用冲突本地字体，再确认 CSS 中 font-family 的拼写、引号、空格与 @font-face 中声明的完全一致——差一个空格，整个家族就断连。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！