Question

我已将Bootstrap CDN中Font Awesome的缩小CSS链接到网页中。问题是，在可见延迟后，图标的显示时间晚于页面内容的其余部分。

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

Answer 1

缩小的css不会对加载时间产生太大影响。那个字体很棒的css文件引用了在页面加载后加载的外部字体文件的路径。您可以在字体真棒网站上看到延迟：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加载时间，但它会摆脱闪存。虽然它可能不适用于所有浏览器，但我不推荐它。

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

Answer 2

尝试将url（）更改为data-uri（）

LESS：

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

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

如何最大限度地减少加载Font Awesome图标的延迟？

2 个答案: