如何最小化加载Font Awesome图标的延迟?
我已经将Bootstrap CDN中Font Awesome的缩小CSS链接到了一个网页中。 问题是,在可见的延迟后,图标比页面内容的其余部分晚出现。
什么是摆脱这种延迟的最佳方式? (仅供参考,我已经将这个CSS文件包含在头部的每个其他CSS和JS链接之上。)
缩小的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可能是延迟的原因。
尝试将url()更改为data-uri()
减:
data-uri('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'),
http://lesscss.org/functions/#misc-functions-data-uri
链接地址: http://www.djcxy.com/p/30769.html上一篇: How to minimize the delay in loading the Font Awesome icons?