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

时间:2015-12-05 17:06:56

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

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

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

2 个答案:

答案 0 :(得分:5)

缩小的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可能是延迟的原因。

答案 1 :(得分:-1)

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

LESS:

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

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