旧浏览器会静默忽略含未知属性（如font-display）或语法错误的@font-face规则，导致字体加载失败；需用兼容写法、绝对路径、内联声明及严格匹配font-family名称来兜底。
font-display 在旧浏览器里不是“失效”，而是被完全忽略——整条 @font-face 规则可能直接丢弃，连 fallback 字体都用不上。
为什么 Safari 10、IE11 看不到自定义字体
老浏览器遇到不认识的 CSS 属性（比如 font-display），不会报错，也不会降级，而是静默跳过整条 @font-face 声明。更糟的是，只要 src、format() 或引号类型写错一个字符（如用了中文引号、漏了 format("woff2")），该规则就作废。
-
format("woff2")写成format(“woff2”)（中文引号）→ Safari 10 直接忽略整条规则 -
src中local()没放最前 → IE11 和旧 Android WebKit 不识别后续所有url() - 用了可变字体语法如
font-weight: 300 700→ 老浏览器解析失败，整块@font-face丢弃 - 路径是相对路径，但构建后 CSS 文件层级变了 → 请求 404，Network 面板里根本看不到字体请求
不依赖 font-display 的兜底方案
不能靠 JS 检测 font-display 是否生效——CSS 层面不支持就是静默失效，无提示、无 warning。必须用兼容性确定的手段提前加载并声明：
- 把
.woff2放在src列表最前，但必须紧跟着.woff和.ttf（注意写format("truetype")，不是"ttf"） - 用绝对路径写
src，例如url("/fonts/inter-regular.woff2")，避免相对路径在构建后错位 - 对关键字体，在
<head>中内联关键@font-face声明，不通过@import或外部 CSS 引入 - 如果服务端可控，给字体资源配好
Access-Control-Allow-Origin: *，否则加了crossorigin反而触发 403
preload 在老浏览器里为什么没用
<link rel="preload" as="font"> 在 Safari 10、IE、旧 Android 浏览器中根本不被识别——Safari 10 把它当普通 as="fetch" 处理，IE 直接忽略。结果就是：你写了 font-display: swap，但字体压根没提前加载，首屏仍 FOIT。
立即学习“前端免费学习笔记（深入）”；
- Safari 10 不支持
as="font"，必须降级为as="fetch"并手动加type="font/woff2" - IE 完全不支持
preload，只能靠内联关键字体 CSS + 提前解析来抢时间 - 所有 preload 标签必须带
crossorigin，否则 Chrome 不会复用预加载资源，导致双倍请求 - 只 preload 首屏真正需要的字重（如标题用
Inter-Bold.woff2），别全量 preload
最容易被忽略的细节：font-family 名称和大小写
font-family 是自定义标识符，不是文件名，也不是类名。它区分大小写、空格、引号，且必须和 HTML 中 font-family 声明里写的**完全一致**。
- CSS 里写
font-family: "Inter"，HTML 里写font-family: inter→ 不匹配，回退到系统字体 - Linux 服务器上
Inter-Regular.woff2和inter-regular.woff2是两个文件 → 本地开发不报错，上线 404 - 用了 Google Fonts，但没加
&display=swap或&text=...参数 → 返回的字体文件可能不含liga表，连字不生效
真正麻烦的不是“怎么写对”，而是“写对了也看不出错”——老浏览器既不报错也不警告，只默默用 Times New Roman 渲染。验证必须打开 Network 面板过滤 fonts，确认字体请求发出去了、返回 200、且字体文件实际被应用（Elements → Computed → font-family）。
