如何实现CSS图标字体在页面加载时显示空白方块？

阿华AIGC实验室

2026-5-25

解决自定义字体图标加载前显示占位字符的问题

嘿，这个场景我太熟悉了！你遇到的问题本质是字体加载的“FOUT”（Flash Of Unstyled Text）——浏览器在自定义字体还没加载完成时，会先用系统字体渲染你指定的字符（也就是这里的'A'），所以才会出现这个临时的字符显示。要实现加载前显示空白占位、加载后正常显示图标的效果，这里有几个实用的方案：

方案1：用CSS `font-display` 直接控制字体加载行为

这是最简单的现代方案，主流浏览器都支持。在你的@font-face规则里加上font-display: block;，它会让浏览器在字体加载期间隐藏对应的文本内容，直到字体完全加载完成后再显示出来，完美解决字符提前显示的问题：

@font-face {
  font-family: 'my-custom-icon';
  src: url('your-icon-font.woff') format('woff');
  font-display: block; /* 关键属性 */
}

.my-icon {
  font-family: 'my-custom-icon';
  content: 'A';
  /* 建议给图标设置固定宽高，让空白占位更规整 */
  width: 20px;
  height: 20px;
  display: inline-block;
}

如果担心字体加载失败导致图标一直不显示，也可以用font-display: swap;——它会先显示系统字体的字符，等自定义字体加载完再替换，但这样可能还是会闪一下字符，所以block更符合你要的“空白占位”需求。

方案2：用JS监听字体加载状态，控制元素显隐

如果需要兼容更老的浏览器（比如IE），可以用JavaScript监听字体加载完成的事件，一开始把图标设为隐藏，加载完成后再显示：

.my-icon {
  font-family: 'my-custom-icon';
  content: 'A';
  width: 20px;
  height: 20px;
  display: inline-block;
  opacity: 0; /* 初始隐藏 */
  transition: opacity 0.2s; /* 可选：添加平滑淡入效果 */
}

.my-icon.loaded {
  opacity: 1; /* 加载完成后显示 */
}

// 监听页面所有字体加载完成
document.fonts.ready.then(function() {
  document.querySelectorAll('.my-icon').forEach(el => {
    el.classList.add('loaded');
  });
});

// 或者用FontFace API手动加载目标字体（更精准）
const iconFont = new FontFace('my-custom-icon', 'url(your-icon-font.woff)');
iconFont.load().then(function() {
  document.fonts.add(iconFont);
  document.querySelectorAll('.my-icon').forEach(el => {
    el.classList.add('loaded');
  });
});