font-display: swap 必须写在 @font-face 规则内才能生效，配合 preload 和 crossorigin 才能消除图标闪变；伪元素插入图标易引发回流，推荐内联 SVG；需通过 DevTools 验证字体加载状态与布局偏移。
font-display: swap 必须配 @font-face 声明，不能只靠 preload
字体图标闪变本质是浏览器在图标字体加载完成前用默认字体渲染，等woff2就绪后重排重绘——font-display: swap 是唯一能直接切断这个过程的方案。但它必须写在 CSS 的 @font-face 规则里，且只对声明了该规则的字体生效。
常见错误是只加了 <link rel="preload" href="icon.woff2" as="font"> 却没在 CSS 中定义 @font-face，或者把 font-display 写在了全局 body 或 font-family 上——这些都无效。
-
font-display: swap要放在每个@font-face块内部，例如：@font-face { font-family: 'IconFont'; src: url('icon.woff2') format('woff2'); font-display: swap; } - 确保图标类名（如
.icon-home）的font-family指向该@font-face定义的名称，不能拼错 - 不要用
font-display: block，它会让图标空白等待约 3 秒，比闪变更糟
图标字体必须预加载，且 crossorigin 属性不能漏
即使写了 font-display: swap，如果字体文件首次加载慢，swap 也会延迟生效——用户仍会看到几帧系统字体撑开的错位布局。预加载能提升优先级，但必须带 crossorigin，否则字体资源会被浏览器当作跨域请求拒绝使用。
- 在
<head>里加：<link rel="preload" href="/fonts/icon.woff2" as="font" type="font/woff2" crossorigin>
-
crossorigin是硬性要求：woff2 文件通常由 CDN 或独立域名提供，不加它会导致 preload 失效，Network 面板里能看到 status 为cancelled - 只预加载真正被首屏使用的图标字体；多个图标字体文件别全 preload，会挤占关键资源带宽
避免用 content 伪元素动态插入图标
很多 UI 库用 ::before { content: '\e901' } 插入图标，这依赖字体加载完成才能正确显示 Unicode 字符。一旦字体延迟，伪元素内容要么空白、要么显示方块、要么触发回流——这是闪变的隐藏推手。
立即学习“前端免费学习笔记（深入）”；
- 改用内联 SVG：小图标（≤1KB）直接写
<svg>...</svg>，零加载延迟，无字体依赖 - 若必须用字体图标，确保对应 HTML 元素已存在且有固定宽高，避免字体加载前后尺寸变化引发 layout shift
- 禁用
font-feature-settings或font-variant等可能触发二次重排的属性
验证是否真解决：看 DevTools 的 Fonts 和 Layout Shifts 面板
改完后不能只凭肉眼判断“好像不闪了”。字体加载问题容易误判，尤其在缓存命中时。
- 打开 DevTools → **Application** → **Fonts**，确认图标字体状态是
loaded，不是pending或failed - 切换到 **Performance** 面板，录制一次刷新，展开
Layout Shifts条目，检查是否有发生在字体加载完成前的 layout change - 清空缓存后硬刷（Ctrl+F5），观察 Network 中
icon.woff2是否在 HTML 解析早期就发起请求，且 Priority 显示为High
最容易被忽略的是：字体图标闪变往往和 CSSOM 构建顺序耦合——如果图标样式所在的 CSS 文件本身被阻塞加载，@font-face 声明根本不会执行。所以必须确保含 @font-face 的 CSS 是内联的，或至少是首个 <link rel="stylesheet">。
