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

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

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

缩小的css在加载时间上不会产生很大的差异.那个字体很棒的css文件引用了在页面加载后加载的外部字体文件的路径.您可以在字体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加载时间,但它会摆脱闪存.虽然它可能不适用于所有浏览器,但我不推荐它.

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