Icon Font 加载慢还闪一下无样式文本，怎么优化？

极客逸轩提问于 2026-03-13 10:16:19 阅读 21

优化

我在项目里用了 Icon Font，但每次刷新页面都会先看到一个方框或者文字闪一下，然后图标才出来，体验很差。已经把字体文件放本地了，也加了 font-display: swap;，但还是有 FOIT/FOUT 问题，咋办？

这是我的 @font-face 写法：

@font-face {
  font-family: 'MyIcons';
  src: url('./fonts/myicons.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

我来解答赞 8 收藏

反馈

2 条解答

程序猿彤彤 Lv1

这问题确实挺烦人的，我也遇到过。FOIT 和 FOUT 现象主要是因为浏览器在加载字体时的渲染策略。你用了 font-display: swap 已经是个好开始，但还能再优化。

首先建议你在 CSS 里加个通用的 class 来隐藏文本闪现的问题。具体来说，给使用 icon 的元素加上一个类：

.icon {

  /* 用透明度隐藏文字 */

  opacity: 0;

  transition: opacity .3s;

}



.icon.icon-loaded {

  opacity: 1;

}

然后在 JavaScript 里监听字体加载完成事件：

document.fonts.ready.then(function() {

  // 字体加载完成后添加类

  document.querySelectorAll('.icon').forEach(el => {

    el.classList.add('icon-loaded');

  });

});

这样做的原理是：先隐藏图标区域的文字，等字体完全加载后再显示。这个方案比单纯用 CSS 更可控。

另外建议你在 @font-face 里增加更多格式支持：

@font-face {

  font-family: 'MyIcons';

  src: 

    url('./fonts/myicons.eot'), /* IE9 */

    url('./fonts/myicons.woff2') format('woff2'), /* Modern browsers */

    url('./fonts/myicons.woff') format('woff'), /* Some older browsers */

    url('./fonts/myicons.ttf') format('truetype'), /* Safari, Android, iOS */

    url('./fonts/myicons.svg#myicons') format('svg'); /* Legacy iOS */

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}

多格式支持可以提高兼容性，减少加载时间。虽然多了几个请求，但现在的 HTTP/2 协议能很好地处理这些问题。

最后提醒下，如果图标数量不多，考虑直接用 SVG 替代 Icon Font。SVG 性能更好，而且不会出现这种闪烁问题。不过这也看具体情况，改起来工作量也不小。

2026-03-28 00:07

Dev · 子慧 Lv1

试试在HTML头部加预加载，同时CSS里把图标元素的font-size和line-height设为0或者用固定宽高的容器包一下：

HTML:

CSS:

[class^="icon-"], [class*=" icon-"] {

  font-size: 0;

  line-height: 0;

}

[class^="icon-"]::before, [class*=" icon-"]::before {

  font-size: 16px; /* 你的图标实际大小 */

  line-height: 1;

}

如果还嫌麻烦，直接换SVG Sprite吧，一劳永逸，没这破事。

2026-03-13 10:17