WEB网页之@font-face与性能

发布时间：2018-09-01 22:17:22 所属栏目：产品来源：站长网

导读：上一周我在Ajaxian中看到了一篇关于 @font-face 的文章。对于字体文件如何影响web网页效率的问题我已经思考了几个月了，于是我继续读了几篇文章，终于形成了下面这些自己的看法。 FOUT：Flash of Unstyled Text Paul 将Flash of Unstyled Text指为FOUT。这

如果你仍然要使用@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。

（编辑：辽源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

3/3

首页