1. 闪动问题的成因与表现
1.1 闪动现象的表现
在加载网页时，当图标库字体还未加载完成，文本会暂时使用回退字体呈现，导致图标位移和字号变化，形成闪动现象。这种闪动会让用户看到不一致的图标呈现，降低界面的一致性。
对于包含大量图标的页面，闪动现象更容易被放大，尤其在首屏渲染阶段，用户体验会被直接影响，因此需要采取稳定显示的策略来缓解。
1.2 浏览器加载流程与 FOUT/FOIT
浏览器在渲染阶段会先加载文本所依赖的回退字体，直到字体加载完成，期间可能出现 FOIT（First Text Invisible）或 FOUT（Flash of Unstyled Text）。这两类现象都与字体加载状态直接相关。
理解这一流程有助于选择合适的 font-display 策略，以减少视觉干扰并提升首屏稳定性。
2. font-display 的原理与类型
2.1 font-display 的核心机制
font-display 定义了网页字体加载过程中的呈现策略，直接影响图标字体的渲染时机和文本的可见性。通过合理设置，可以让浏览器在字体加载期间继续使用回退字体，避免突然的字体切换导致的视觉跳动。
正确应用 font-display 可以实现稳定显示，让文本在加载阶段保持可读性，且在字体就绪后平滑切换到自定义字体。
2.2 常用的 font-display 值及对比
swap 值在字体加载时立即显示文本，加载完成后再切换为自定义字体，通常能实现快速稳定的显示。这也是大多数图标库优化的首选策略。
block 与 swap 的权衡在于：block 会在加载阶段隐藏文本，可能短时影响布局，但能减少 FOUT；optional 在离线模式下也可显示，但在网络良好时会进一步优化加载过程。
3. 实操要点：让图标库稳定显示的步骤
3.1 在 @font-face 中应用 font-display
第一步是在全局样式的 @font-face 声明中添加 font-display: swap，确保字体加载期间使用回退字体呈现，从而避免直接的闪动。
这一步是基础，也是防止图标库加载后闪动的关键设置，建议统一放在全局样式文件中。
@font-face {font-family: 'IconFont';src: url('/fonts/iconfont.woff2') format('woff2');font-weight: normal;font-style: normal;font-display: swap;
}3.2 预加载字体资源提升稳定性
使用 preload 提前加载字体资源，可以降低首次渲染时的等待时间，进一步减少 FOUT/FOIT 的概率。
在页面的 head 区域加入字体的预加载指令，有助于提升整体稳定性与用户感知速度。
<link rel="preload" href="/fonts/iconfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">3.3 为图标类名绑定明确的 font-family
通过将图标的 CSS 使用统一的 font-family 指定为 IconFont，确保图标字体在渲染时不混用其他字体。
在 :before 或 ::before 伪元素中设置 content 的 Unicode 编码，用来显示各个图标，从而实现稳定且一致的图标呈现。
/* 示例：为图标绑定字体并显示图标 */
.icon { font-family: 'IconFont'; font-style: normal; font-weight: normal; }
.icon-home:before { content: "\\e900"; font-family: 'IconFont'; }4. 实例演示与验证
4.1 HTML 结构示例
简单的图标列表示例，使用统一的 IconFont 与伪元素来呈现图标。
通过将 font-face 与 font-display 应用于全局，确保页面首次渲染时图标区域已经稳态。
<span class="icon home" aria-label="首页"></span>4.2 样式与结果
应用 font-display 的页面在首次渲染时，不再因字体下载导致文本突然变化，图标保持稳定。
对于意义重大的图标，务必确保图标字体加载完成前，文本区域仍具备可读性和占位宽度。
