font-display: swap 必须绑定在 @font-face 规则内才生效，且需配合 preload、正确 fallback 字体链及度量对齐，否则仍会导致 fout 或 cls。
只加 font-display: swap 一定会闪，这不是配置漏了，而是它根本没解决布局偏移的根源。
font-display: swap 必须和 @font-face 绑定才生效
写在 class、style 属性或 JS 里全无效。浏览器只认 @font-face 规则内部的 font-display 声明。
- 多个字重（Regular / Bold / Italic）要各自声明
@font-face，不能只给 Regular 加font-display: swap，否则 Bold 还是 FOIT - 漏写
format("woff2")—— 旧版 Safari、某些 WebView 会直接忽略整条规则，退回到font-display: auto - 路径用相对地址（如
url(./fonts/Inter.woff2)）在file://协议下必 404，整个字体加载失败
preload 字体必须带 crossorigin 属性
<link rel="preload"> 不是加了就起作用。WOFF2 加载强制走匿名跨域模式，缺 crossorigin 就等于白写。
- 正确写法：
<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin> -
as="font"和type="font/woff2"缺一不可；写成as="fetch"或漏掉type，Chrome 可能复用缓存但不触发字体解析 - href 必须和
@font-face中src的路径完全一致（含查询参数，如?v=2.1），否则不复用缓存
fallback 字体链必须同类型且度量接近
写了 font-display: swap 还“跳一下”，问题不在加载时机，而在 fallback 字体撑开的空间和 Web Font 实际占位不一致——这是 CLS（累积布局偏移）的典型表现。
- 避免混用
"Georgia"（衬线）和"Inter"（无衬线），字宽差常超 20% - 中英分开兜底：
"Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif - 关键度量值（x-height、cap-height、ascender）差异超过 5% 就容易触发重排；可用 Font Style Matcher 工具比对
图标字体和中文字体要额外加度量对齐
图标字体（如 iconfont.woff2）和中文字体因字形结构特殊，fallback 系统字体几乎不可能匹配其基线、ascent/descender，必须手动对齐。
- 加
size-adjust: 102%或ascent-override: 95%（数值需实测，推荐用 opentype.js 解析 OS/2 表获取） - 中文字体必须子集化：全量 3MB 的字体即使开了
swap，fallback（如system-ui）和实际汉字宽度差太大，FOUT 必然伴随严重跳动 - 禁用
font-size: 0.9em类似缩放操作——它会放大原始度量偏差，让跳变更剧烈
真正难的不是把 font-display: swap 写进去，而是让 fallback 字体在视觉上“撑住场子”：它得足够像，又不能太像；度量值匹配比格式压缩更重要，而这点恰恰最容易被跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
