font-display 是策略声明而非开关，仅在 @font-face 内生效，需配合 format()、preload 和正确路径才能抑制闪烁；常见失效原因包括漏写 format、路径错误、位置错放、值拼写错误等。
font-display 不是开关，而是策略声明——它只在 @font-face 内部生效，且必须配合 format()、preload 和字体格式才能真正压住闪烁。
为什么写了 font-display: swap 还在闪？
浏览器根本没执行这条规则，常见原因有：
-
@font-face里漏了format("woff2")—— Safari、旧 Edge 直接忽略整条规则，退回到auto行为，导致 FOIT -
src路径写成相对地址（如url(./fonts/Inter.woff2)），在某些 WebView 或file://协议下 404，规则失效 - 把
font-display错写在<link>标签或外层 CSS 里 —— 它只在@font-face块内部起作用 - 拼错值：写成
swop、swap:或带引号的"swap"，整个声明被丢弃
font-display 该选 swap 还是 fallback？
这不是偏好问题，而是场景判断：
-
swap：适合品牌字体、图标字体（如 Iconfont）、非关键装饰性文字；但必须确保 WOFF2 ≤ 100KB，否则弱网下替换延迟明显，iOS Safari 还会放大跳动 -
fallback：500ms 内用系统字体渲染，超时后放弃加载；适合正文、标题、按钮等关键文本，中英文混排尤其稳 -
optional：只用于图标字体的非关键 icon，或明确接受降级的极差网络场景；别用在主文案上，浏览器可能直接跳过加载
不配 preload 的 font-display 是纸面策略
font-display 控制“怎么显示”，preload 控制“什么时候开始加载”。没预加载，swap 的“窗口期”在弱网下可能拖到 1.5 秒以上，用户已经滚动半屏了字体才刚发起请求。
- 必须加
crossorigin属性，否则跨域字体（CDN、SaaS 字体服务）预加载失败 - 必须写
as="font"，写成as="style"或漏掉，浏览器当普通资源 fetch，失去高优先级 - 只
preload首屏真正需要的字重——比如标题用Inter-Bold.woff2，正文用Inter-Regular.woff2，别全量 preload -
preload的href必须和@font-face中src的路径完全一致（含查询参数，如?v=2）
中文字体加载闪得特别狠？子集化 + font-size-adjust 才是解法
一个完整中文字体常超 2MB，font-display 再怎么调也盖不住几秒空白。这时单靠 CSS 不够：
- 用
fontmin或在线工具提取首屏实际用到的汉字（如“立即购买”“登录”“首页”），生成 ≤ 200KB 子集字体 - 对关键文本容器显式设置
font-size、line-height、min-height，锁住布局高度，避免替换时跳动 - 搭配
font-size-adjust: 0.5（数值根据 fallback 和 Web 字体的 ex 比例实测），让不同字体基线更一致
真正卡住字体闪烁的，从来不是某个属性写没写对，而是从 @font-face 声明、路径、格式、预加载到 fallback 字体链，整条链路里任意一环断掉，font-display 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
