font-display: swap 失效主因是 @font-face 规则被浏览器忽略：漏 format("woff2")、相对路径404、写错位置或拼写错误；需配合 preload、子集化及排版锁定才能根治闪烁。
font-display: swap 能解决大部分 FOIT，但不是加了就生效——浏览器根本没读到这条规则，才是你页面还在闪的真正原因。
为什么写了 font-display: swap 还在闪？
常见失效不是值写错了，而是 @font-face 规则本身被浏览器忽略：
-
@font-face里漏了format("woff2")：Safari、旧 Edge 直接跳过整条规则，退回到font-display: auto（即默认 FOIT 行为） - 字体路径是相对地址（如
url(./fonts/Inter.woff2)）：在 WebView 或file://协议下 404，规则静默失效 -
font-display写在<link>标签或外层 CSS 里：它只在@font-face块内生效，放错位置等于没写 - 拼写错误：写成
swop、swap:或带引号的"swap"，整个声明被丢弃
font-display 选 swap 还是 fallback？
这不是风格偏好，而是文本重要性的判断：
-
swap：适合图标字体、品牌 slogan、装饰性文字；但要求 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
中文字体加载闪得特别狠？子集化 + 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 声明、路径、格式、预加载时机到文本容器排版，一环扣一环。漏掉任意一环，都可能让 font-display 形同虚设。 
