图标字体加载慢致显示方块，应采用font-display: optional、本地字体兜底、preload预加载及SVG终极降级方案。
图标字体加载慢导致页面先显示方块（□），本质是字体文件未就绪时浏览器用系统默认字体渲染了 Unicode 字符。解决核心思路是：**让图标在字体加载完成前不渲染，或提供本地已安装的备用字体兜底，同时配合 font-display 与 preload 提升加载体验**。
用 font-display: swap 避免阻塞，但需防“闪动”
font-display 控制字体加载期间的渲染行为。swap 是最常用策略：文字先用系统字体显示，等图标字体加载完成再替换。但图标场景下容易出现“文字→方块→图标”的二次闪烁（因图标字符本身无语义，系统字体无法正确显示，直接渲染成方块）。
- 推荐改用
font-display: optional：浏览器只在字体能快速加载（通常 100ms 内）时使用它，否则直接跳过，靠后续兜底方案 - 或用
font-display: block+ JS 监听fontload事件，在字体就绪后再给图标容器添加类名（如.icon-loaded），CSS 中仅对该类生效图标样式，避免未加载时渲染
通过 @font-face 声明本地已存在字体作为第一兜底
部分图标字体（如 FontAwesome、Iconfont）的 Unicode 区间，可能被某些系统预装字体（如 Segoe UI Symbol、Noto Color Emoji、Apple Color Emoji）覆盖。可在 @font-face 中按优先级声明本地字体，让浏览器优先尝试系统已有资源：
@font-face {
font-family: 'icon-font';
src: local('Segoe UI Symbol'), /* Windows */
local('Noto Color Emoji'), /* Android/Linux */
local('Apple Color Emoji'),/* macOS/iOS */
url('./fonts/icon.woff2') format('woff2');
font-display: optional;
unicode-range: U+F000-F8FF; /* 覆盖常见图标私有区 */
}注意：local() 只匹配完全同名字体，且系统需实际安装对应字体；unicode-range 精确限定作用范围，避免干扰正文文本字体匹配。
立即学习“前端免费学习笔记（深入）”；
结合 preload 提前获取关键图标字体
对首屏必需的图标字体，用 提升加载优先级，缩短等待时间：
⚠️ 必须加 crossorigin 属性，否则字体加载会被 CORS 策略阻止（即使同源）；as="font" 让浏览器识别为字体资源，进入高优先级队列。
终极兜底：用 SVG 或 inline symbol 替代字体图标
当兼容性、性能或稳定性要求极高时，字体图标本身已非最优选。推荐渐进式降级：
- 将图标转为内联
，零请求、无渲染延迟、支持 CSS 控制颜色大小 - 或使用
+ 外部 sprite SVG，兼顾复用与可控性 - 构建时通过插件（如 svg-sprite-webpack-plugin）自动聚合，运行时按需注入
字体图标适合多色、动态生成场景；但对基础单色图标，SVG 更稳定、更轻量、更可访问。
