font-display: swap 仍闪得厉害主因是后备字体与目标字体 metrics 差异大导致文本重排；应选 metrics 兼容的后备字体、用 size-adjust 等属性对齐 baseline，并避免混用衬线/无衬线字体。
font-display: swap 为什么有时还是闪得厉害
不是加了 font-display: swap 就万事大吉。浏览器在字体加载完成前会先用后备字体渲染（FOUT），但若后备字体和目标字体的 metrics 差异太大（比如宽度、行高、字间距），会导致文本重排（reflow），视觉上就是“文字跳动”——这比单纯等字更干扰阅读。
- 优先选 metrics 兼容的后备字体，比如用
"Inter"时，后备设为"system-ui", -apple-system, "Segoe UI"，而不是"Times New Roman" - 用
@font-face的size-adjust或ascent-override/descent-override手动对齐 baseline（Chrome 125+ 支持，需配合font-optical-sizing: none） - 避免在
font-family列表里混用衬线/无衬线大类，例如"Helvetica", "Georgia"组合极易重排
FOIT 完全消失不了？检查 font-display 兼容性边界
font-display: optional 或 block 在旧版 Safari（
- Safari ≤16.3：只支持
auto和swap，其他值等同于auto - Android WebView ≤118：
optional行为不稳定，建议降级为swap并配font-weight精确匹配 - 用
@supports (font-display: swap)做渐进增强，别把所有逻辑压在一个声明里
font-display + preload 怎么配才不冲突
同时用 <link rel="preload" as="font"> 和 font-display: swap 是常见组合，但顺序和属性漏写会导致预加载失效甚至字体重复下载。
-
preload标签必须带crossorigin属性（即使同源），否则字体被当作不带 CORS 的资源拒绝使用 - 确保
preload的href和@font-face的src值完全一致（含查询参数、大小写） - 不要给
preload加media属性——字体预加载不响应媒体查询，加了等于白写 - 示例正确写法：
<link rel="preload" href="/fonts/inter-var-latin.woff2" as="font" type="font/woff2" crossorigin>
自定义字体 fallback 时 line-height 崩溃怎么办
字体切换时，如果原字体用了 line-height: 1.2 这类无单位值，而 fallback 字体的 em 高度不同，行高会按新字体的 1em 重新计算，造成段落挤压或留白爆炸。
- 改用固定值，如
line-height: 1.4rem或line-height: 20px（需结合字号测试） - 或者用
line-height: clamp(1.3, 4vw, 1.5)这类弹性值兜底，比纯相对值更可控 - 关键文案区域（如标题）可单独加
contain: layout paint减少重排影响范围
font-display 只是开关，真正决定体验的是它和后备字体、preload、CSS 排版规则之间的咬合精度。最容易被忽略的，是 metrics 对齐和 CORS 预加载这两个点，修完它们，闪动问题基本就稳住了。
