font-display: swap 在 ie9、android 4.4（部分）及 safari 14.5 前不支持：ie9 完全忽略该属性；android 4.4 仅支持 .ttf/.woff，.woff2 置顶会导致整个 @font-face 失效；safari 14.5 前视其为无效，仍执行 block 行为致 foit。
font-display: swap 在 IE9 / Android 4.4 等旧浏览器里根本不会解析
因为 font-display 是 CSS Fonts Level 4 规范里的属性，IE9、Android 4.4 及更早的 WebKit/Blink 内核根本不认识它——不是配置错，是语法直接被忽略。这类浏览器遇到未知属性会静默跳过，连 warning 都不报。
实操建议：
- 用
@supports (font-display: swap)包裹相关字体声明，避免旧浏览器误读或干扰其他规则 - 对必须兼容 IE9 的项目，
@font-face中完全不要写font-display，改用.eot嵌入式字体 +font-family回退链兜底 - Android 4.4（WebView based on Chromium 30）支持
font-display: swap，但仅限于.ttf和.woff；若src列表里.woff2排最前，整条@font-face会被跳过（不降级），导致字体加载失败且无回退
Chrome/Firefox 显示正常但 Safari 14.5 之前不触发 swap 替换
Safari 直到 14.5 才开始支持 font-display: swap，此前版本即使写了也当不存在，仍走默认的 auto（≈ block）行为：文本空白等待最多 3 秒，然后才 fallback。这不是缓存或路径问题，是内核能力缺失。
常见错误现象：
- Mac 上用 Safari 14.4 测试时，文字长时间空白，DevTools 的 Network 面板显示字体已下载完成，但页面就是不渲染
- 在 iOS 14.4 及更早系统中，
font-display: swap完全无效，用户看到的是 FOIT（Flash of Invisible Text）而非 FOUT
实操建议：
- 用
@supports not (font-display: swap)单独为 Safari font-display: block 缩短阻塞时间 - 别依赖 User-Agent 检测做 JS 动态注入 —— Safari 14.4 会把
font-display当非法属性丢弃，JS 注入后依然无效
写了 font-display: swap 却还是白屏或闪动严重
真正生效的前提是：该属性必须紧贴 src 和 font-family 出现在同一段 @font-face 块内。漏掉 format()、多字重未分别声明、preload 路径错误，都会让整个规则失效，进而使 font-display 形同虚设。
容易踩的坑：
-
@font-face { font-family: "Inter"; src: url("inter.woff2"); font-display: swap; }—— 缺少format("woff2")，Edge 18 及部分旧版 Firefox 会忽略整条规则 - 只给 Regular 字重加了
font-display: swap，但 Medium、Bold 等变体没单独声明，浏览器对这些变体会回退到默认阻塞策略 -
<link rel="preload" href="inter.woff2">路径与@font-face中的url()不一致（比如协议不同、带 query 参数差异），preload 失败且无提示，swap 的“立即 fallback”就变成“等一个永远不会来的字体”
font-display: swap 导致中日韩文字显示方块或乱码
这不是 swap 本身的问题，而是 fallback 字体链不匹配语言范围。swap 强制先用后备字体渲染，如果后备字体（比如 sans-serif）在当前系统里不支持中文/日文/韩文，就会出现方块、问号，甚至被系统强制替换为宋体或黑体，造成“字体切换失败”的错觉。
关键点：
- Windows 上
sans-serif默认映射到微软雅黑，能较好显示简体中文；macOS 上则映射到 Helvetica，对中日韩字符支持弱 - 推荐显式声明多语言 fallback 链：
font-family: "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; - 开发阶段优先用
font-display: block或auto验证字体链是否正确，确认无乱码后再切回swap
最常被忽略的一点：font-display 控制的是“何时替换”，不是“替换成什么”。替换目标是否可用，全靠 font-family 声明链的完整性和系统实际字体支持情况——这两者出问题，swap 再快也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
