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

极客逸轩 阅读 4

我在项目里用了 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;
}
我来解答 赞 2 收藏
二维码
手机扫码查看
1 条解答
Dev · 子慧
试试在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