代码之家 › 专栏 › 技术社区 › SuperUberDuper

字体awesome在加载之前显示方块

font-awesome fonts http

SuperUberDuper · 技术社区 · 8 年前

我使用的字体很棒,就像这样:

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
  <script src="https://use.fontawesome.com/xxxxxxxx.js"></script>

和一个元素

然而,字体不会立即加载,在加载之前,我看到了丑陋的方块。有什么办法吗?

1 回复 | 直到 8 年前

RoelN 8 年前

您正在体验 FOUT (flash of unstyled text) as Font Awesome使用字体显示其图标。在加载字体之前,您将看到一个备用字体中的图标(例如Arial)。您看到该框是因为字体Awesome使用 Unicode PUA codepoints 要将其图标映射到,并且回退字体中没有字符,将显示通用的“缺少字符”框。

解决方案是使用 FontFaceObserver 隐藏图标,直到加载字体Awesome Font。更好的方法是使用SVG图像,因为图标字体是一种黑客行为。Font Awesome提供了这些功能,因此这可能是您的一个选择。