我已将Bootstrap CDN中Font Awesome的缩小CSS链接到网页中。问题是,在可见延迟后,图标的显示时间晚于页面内容的其余部分。
摆脱这种延迟的最佳方法是什么? (仅供参考,我已经将这个CSS文件包含在头部的每个其他CSS和JS链接之上。)
答案 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'),