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

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

font-awesome fonts http

SuperUberDuper · 技术社区 · 6 年前

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

<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 回复 | 直到 6 年前

RoelN 6 年前

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

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

推荐文章

Simon · 使用React更改字体可怕图标的颜色

2 年前

Muhammad Asif Mohtesham · 在Font Awesome中,是否可以使用CSS内容属性在“far”和“fas”数据前缀之间切换?[副本]

6 年前

en Peris · 使用JQuery动态更改AwesomeIcon的颜色

6 年前

Pranta Saha · 为什么Font Awesome图标类不同

6 年前

Mav · 如何将图标与固定高度标记的中心对齐[重复]

6 年前

LP13 · 在中心对齐定位标记内的内容

6 年前

Fjott · CSS-居中字体超级图标

6 年前

Sinan Samet · 字体很棒的图标不会显示在Angular 5中

6 年前

Tithos · 品牌FA5图标不工作

6 年前

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

6 年前