Web前端(W3Cways.com) - Web前端学习之路
似乎大多数网站使用非默认字体的这些天,但是谁能怪他们呢？系统字体都是很枯燥的，使用自定义字体能为一个网站增色不少。使用自定义字体所带来的问题就是，会延缓你站点的加载。字体文件比较大，可能需要单独的字体文件，粗体和斜体，并阻止渲染，如果开发商不解决它们。让我告诉你一个更快速加载的方法。
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的混合设置字体设置，自定义选择器自动设置。
