WEB网页之@font-face与性能(2)

发布时间：2018-09-01 08:28 所属栏目：30 来源：站长网

导读：如果你仍然要使用@font-face，我建议在页面全部加载完毕后再下载字体文件，如后加载测试中一样。这将解决IE中的问题整张页面渲染之后，字体才会再后台下载，并在下载完成后增强我们的样式效果。这个技巧在其他浏

如果你仍然要使用@font-face，我建议在页面全部加载完毕后再下载字体文件，如后加载测试中一样。这将解决IE中的问题——整张页面渲染之后，字体才会再后台下载，并在下载完成后增强我们的样式效果。这个技巧在其他浏览器中也同样有好处。使用后加载，大部分的浏览器将都不会出现浏览器忙的标识。后加载的代码大致如下：

Copy to Clipboard Liehuo.Net Codes

引用的内容：[www.veryhuo.com] function lazyload() {

var sRule1 =
"@font-face {" +
" font-family: 'Yanone';" +
" src: url('/bin/resource.cgi?type=font&sleep=6');" +
" src: local('Yanone'), " +
"url('/bin/resource.cgi?type=font&sleep=6') " +
"format('truetype');" +
"}";

var style1 = document.styleSheets[0];
if ( "function" === typeof(style1.insertRule) ) {
// Firefox, Safari, Chrome
style1.insertRule(sRule1, 0);
}
else if ( "string" === typeof(style1.cssText) ) {
// IE
style1.cssText = sRule1;
}
}

注意这只是个原型，并不是一个完美的解决办法。

在Paul的文章中提到了预读取字体文件，不过需要注意的是这个技术并不适合IE。我认为IE将是最难解决的问题，我同时希望能够将样式表、脚本文件和图片的优先级提高。这取决于页面以及字体文件的使用。

我不建议在样式表中使用 data:URIs 来定义字体文件。由于样式表可能包含了EOT和TTF两种格式的数据，这可能会让下载的数据加倍。这同样也会另样式表的加载时间增长，而在大部分浏览器中样式表会阻断页面加载。

总结

只在你确定你非常需要 @font-face的时候才使用他
将你的@font-face定义在所有的SCRIPT标签前
如果你有许多字体文件，考虑将它们分散到几个域名下。
不要包含没有使用的 @font-face声明——IE将不分它使用与否，通通加载
Gzip字体文件，同时给它们一个未来的过期头部声明
考虑字体文件的后加载，起码对于IE。

（编辑：ASP站长网）