font-display不被识别的根本原因是浏览器不支持该css fonts level 4特性，chrome 60+、firefox 60+、safari 11.1+、edge 17+才原生支持，ie全系列、safari≤10、旧版android browser等直接忽略声明而回退至等效block的auto行为，导致foit。
font-display 不被识别，根本原因是浏览器不支持该属性
font-display 是 CSS Fonts Level 4 的特性，Chrome 60+、Firefox 60+、Safari 11.1+、Edge 17+ 才原生支持。IE 全系列、Safari ≤10、旧版 Android Browser 等直接忽略 font-display 声明——不是写错了，是压根不认识这个属性。
这类浏览器 fallback 到默认行为：font-display: auto 实际等效于 block，即阻塞渲染最多 3 秒，造成 FOIT（文字空白）。
- 用
caniuse.com查目标浏览器支持率，重点关注 Safari 10.x 及更早版本 - 不要依赖 JS 检测
font-display是否生效：CSS 层面的 unsupported 就是静默失效，无报错、无 warning - 若需兼容 Safari 10 或 iOS 10.3 以下，必须放弃
font-display，改用@font-face+local()+ 多格式降级 + 更激进的 preload
@font-face 中写了 font-display 却没效果，可能是规则被浏览器跳过
老浏览器遇到无法解析的语法，会整条 @font-face 规则丢弃——哪怕只错一个字符，整个声明就作废，连 fallback 字体都用不上。
常见触发点：
-
format("woff2")写成format("woff2")（引号类型错误，如中文引号）或漏掉format()—— Safari 10、IE11 直接跳过该条规则 -
src里混用url()和local()，且顺序不对（老浏览器要求local()必须放在最前） - 用了现代语法如
font-weight: 300 700（可变字体范围），老浏览器报错并丢弃整块@font-face
为什么加了 preload 还是白屏？跨域和优先级问题在老浏览器里更严重
老浏览器对 <link rel="preload" as="font"> 支持不一致：Safari 10 不支持 as="font"，会当普通资源 fetch；IE 和旧 Android 浏览器根本不认识 preload。
结果就是：你写了 font-display: swap，但浏览器根本没提前加载字体，首屏仍卡在 FOIT。
- 必须同时提供
<link rel="preload">（现代浏览器）和<link rel="stylesheet">内联关键字体 CSS（兜底） - 对 Safari 10，
crossorigin属性不能省——不加就 403，加了又可能触发 CORS 预检失败，得配好服务端响应头 - 避免在
里用 JS 动态插入preload标签：老浏览器执行时机不可控，常晚于 CSS 解析
fallback 字体选错，会让 font-display 的“换”变成“瞎换”
font-display: swap 或 fallback 能起作用的前提是：fallback 字体和自定义字体在字号、行高、字宽上足够接近。老浏览器不支持 font-display 时，这个问题会被放大——用户看到的不是“替换”，而是“突然缩放+重排”。
中英文混排尤其危险：
- 用
"Helvetica Neue", Arial, sans-serif作 fallback，但自定义字体是等宽中文（如 "Noto Sans CJK"），宽度差 30%+，导致按钮文字换行、卡片布局崩塌 - fallback 里没写
sans-serif通用族名，某些老 Android 浏览器找不到匹配字体，直接回退到系统默认（可能是 Times New Roman），破坏设计一致性 - 中文 fallback 推荐组合：
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif（注意引号、逗号、末尾连字符）
真正难的不是写对 font-display，是在它失效时，你的字体链还能稳住排版底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
