HTML字体是否依赖加载闪烁_加载闪烁对HTML字体限制【手册】

font-display: swap 必须写在 @font-face 规则内且紧贴 src 和 font-family 才生效，漏写 format、未为多字重分别声明、preload 路径/MIME/跨域配置错误、iOS Safari 14.5 前不触发替换、fallback 字体不匹配导致重排，均会使字体加载优化失效。

字体加载本身不“依赖”闪烁，但默认行为必然引发 FOIT 或 FOUT——这是浏览器的固有机制，不是 bug，也不是配置错误。关键在于你能否主动控制它。

font-display: swap 必须写在 @font-face 里才生效

很多人把 font-display: swap 加在普通 CSS 类或全局 :root 中，结果毫无作用。它只对声明了 @font-face 的字体起效，且必须紧贴 src 和 font-family 出现。

• 错误写法：.headline { font-display: swap; } —— 完全无效
• 正确写法：@font-face { font-family: "Inter"; src: url("inter.woff2") format("woff2"); font-display: swap; }
• 漏写 format("woff2") 会导致部分浏览器（如旧版 Edge）忽略整条规则，font-display 也跟着失效
• 多个字重需分别声明：@font-face 每一条都得带自己的 font-display，不能共用

preload 字体失败的三个静默原因

<link rel="preload"> 看似简单，但实际常因路径、协议或 MIME 类型不匹配而完全不触发下载，浏览器也不会报错。

• href 路径必须和 @font-face 中的 src 完全一致（包括大小写、斜杠方向、查询参数），例如 url("/fonts/inter-bold.woff2?v=1") 对应的 href 也得带 ?v=1
• 必须同时写 as="font" 和 type="font/woff2"，缺一不可；只写 as="font" 时 Chrome 可能降级为普通资源处理
• crossorigin 属性不可省略——字体是匿名请求，没它就跨域失败，且失败无提示
• 本地双击打开 HTML（file:// 协议）下，preload 直接被忽略，必须起 HTTP 服务（如 npx serve）

iOS Safari 14.5 之前 swap 不触发替换

即使字体文件已下载完成，iOS 14.4 及更早版本的 Safari 会卡在 fallback 字体上，始终不切换到自定义字体——这不是缓存问题，是引擎级缺陷。

立即学习“前端免费学习笔记（深入）”；

• 检测方式：document.fonts.check("1em Inter Bold") 返回 true，但页面文字仍不更新
• 临时修复：手动触发重排，比如给 body 切换一个无样式的 class：document.body.classList.toggle("force-repaint")
• 更可靠方案：放弃纯 CSS，改用 FontFace API 显式加载：const font = new FontFace("Inter", "url(inter-bold.woff2)"); font.load().then(() => document.fonts.add(font));
• 别指望 document.fonts.ready 在老 iOS 上准时兑现——它可能永远 pending

fallback 字体选错，swap 就等于白加

font-display: swap 只解决“要不要等”，不解决“换的时候跳不跳”。如果 fallback 和目标字体的 x-height、字宽、行高差异大，段落重排肉眼可见。

• 避免混用衬线与非衬线 fallback，例如不要写 font-family: "Inter", "Georgia", serif；优先用系统级无衬线链："Inter", "system-ui", -apple-system, BlinkMacSystemFont, "Segoe UI"
• 中文 fallback 必须显式包含常见中文字体，如 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei"；只写 "Helvetica", "Arial" 在 Windows/Linux 中文系统下极易降级到 Courier New
• 标题等敏感元素慎用合成字重：如果只引入了 Inter Regular，但 CSS 里写了 font-weight: 700，浏览器会强行加粗，导致宽度突变，FOFT 更明显
• Chrome 120+ 支持 size-adjust 微调度量，但 Safari/Firefox 还不支持，线上项目暂不建议依赖

最易被忽略的一点：字体加载策略不是“设完就跑”，它和首屏渲染路径强耦合。哪怕所有配置都对，只要字体文件放在 CDN 上且 DNS 解析慢，或者服务器没开 Brotli 压缩，swap 窗口依然会拉长——这时候再好的 CSS 也救不了体验。