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

【问题标题】：How to minimize the delay in loading the Font Awesome icons?如何最小化加载 Font Awesome 图标的延迟？
【发布时间】：2016-03-10 13:31:01
【问题描述】：

我已经在网页中链接了来自 Bootstrap CDN 的 Font Awesome 的缩小 CSS。问题是图标在可见延迟后出现的时间比页面内容的其余部分晚。

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

【问题讨论】：

我正在目睹这种行为，但仅限于 Chrome。所以也许这里涉及到一些特定于浏览器的东西。
是的，只有 Chrome、Firefox 和 Safari 都可以。
2020年问题依然存在，甚至在本地环境中。

标签： css performance twitter-bootstrap font-awesome user-experience

【解决方案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 可能是导致延迟的原因。

【讨论】：

【解决方案2】：

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

少：

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

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

【讨论】：