如何最小化加载Font Awesome图标的延迟？

Question

我在网页中使用Bootstrap CDN链接了Font Awesome的压缩CSS。问题是图标会在页面内容后面出现可见延迟。

有什么最好的方法可以消除这个延迟呢？（FYI，我已经将这个CSS文件包含在head区域的其他CSS和JS链接之前。）

- Price

---

我目睹了这种行为，但只在Chrome浏览器上出现。因此可能涉及到某些特定于浏览器的问题。 - Mikko Ohtamaa

是的，只需要Chrome、Firefox和Safari就可以了。 - Suge

问题在2020年仍然存在，甚至在本地环境中也是如此。 - Raptor

我在Firefox中看到它。 - Paul Taylor

Answer 1

压缩后的CSS文件并不会显著提高加载时间。Font Awesome CSS文件引用了外部字体文件的路径，这些文件将在页面加载之后加载。您可以在Font Awesome网站上看到延迟：https://fortawesome.github.io/Font-Awesome/icons/

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

您可以将字体进行base64编码并直接包含在站点的css中。这将大大增加您的站点css加载时间，但它将摆脱flash。虽然它可能不适用于所有浏览器，我不建议使用。

您可以尝试直接在服务器上托管font awesome css和字体。CDN可能是延迟的原因。

- Fraser Crosbie

Answer 2

我通过自行托管图标来解决了这个问题，具体方法请参考https://fontawesome.com/docs/web/setup/host-yourself/webfonts

- Paul Taylor

Answer 3

尝试将url()更改为data-uri()

LESS:

data-uri('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), 

http://lesscss.org/functions/#misc-functions-data-uri

- user3197492