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

Question

我已经在网页中从 Bootstrap CDN 链接了 Font Awesome 的缩小版 CSS。 问题是图标在可见延迟后出现的时间晚于页面内容的 rest。

摆脱这种延迟的最佳方法是什么？ （仅供参考，我已经将这个 CSS 文件包含在所有其他 CSS 和头部的 JS 链接之上。）

Answer 1

缩小的 css 不会对加载时间产生太大影响。 该字体真棒 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。 虽然它可能不适用于所有浏览器，但我不推荐它。

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

Answer 2

我通过自行托管图标解决了这个问题，这在https://fontawesome.com/docs/web/setup/host-yourself/webfonts中有描述

Answer 3

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

较少的：

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

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