font-display需配合preload、正确@font-face声明和字体格式才能抑制fout/foit；常见失效原因包括漏写format("woff2")、相对路径404、错放位置、拼写错误等。
font-display 不是加了就管用的开关，它必须配合 preload、正确的 @font-face 声明和字体格式才能真正压住 FOUT/FOIT。
为什么写了 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
中文字体加载闪得特别狠？子集化 + 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 声明、preload 路径、字体格式、子集范围到容器排版，一环断了，前面全白搭。尤其注意 iOS Safari 对 crossorigin 和 format() 的严格校验——它不会报错，只会静默失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
