快如闪电的字体加载技术

2015-04-07阅读(7030)评论(0)牵着狗狗看MM

苏州实时公交查询

似乎大多数网站使用非默认字体的这些天,但是谁能怪他们呢?系统字体都是很枯燥的,使用自定义字体能为一个网站增色不少。使用自定义字体所带来的问题就是,会延缓你站点的加载。字体文件比较大,可能需要单独的字体文件,粗体和斜体,并阻止渲染,如果开发商不解决它们。让我告诉你一个更快速加载的方法。

1. 把字体放在CDN上

为提高网站的速度,一个简单的解决方案是使用CDN,这对字体来说没有什么差别。重要的是要确保CDN有适当的CORS设置

[js]# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>

# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
add_header Access-Control-Allow-Origin *;
}
[/js]
如果CDN的CORS设置不正确的话,你会看到AJAX/跨域错误控制台。

2.使用非阻塞加载CSS

[html]<link rel="stylesheet" type="text/css" href="fonts.css" media="none" onload="this.media=’all’;">
<link rel="stylesheet" type="text/css" href="style.css" media="none" onload="this.media=’all’;">
[/html]
实质上是使用media=none让我们在浏览器下载样式表而不会阻塞渲染,所以当样式表加载,media设置其所需的设置就会呈现在屏幕

3.单独的字体选择器

如果字体使用时没有被加载完,用户将看到空白,直到字体加载。这,当然不是一件好事,如果字体加载失败。最起码,用户将会在空白的地方盯着几秒钟。最好是配合被添加到body的字体加载后声明自定义字体:

[css]h1 { font-family: Arial, serif; } /* 系统字体 */
.fontsloaded h1 { font-family: ‘MySpecialFont’, serif; } /* 自定义字体 */
[/css]

[css]<link href="fonts.css" onload="document.body.className+=’ fontsloaded’;" rel="stylesheet" type="text/css" >
[/css]
通过使用字体声明以上策略,系统加载字体最初只有在自定义加载字体将被启用,因此屏幕不会显示任何一段时间空内容。我建议创建一个Stylus/Sass/Less的混合设置字体设置,自定义选择器自动设置。

原文出处:Lightning Fast Font Loading Techniques

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 快如闪电的字体加载技术
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏