浅谈CSS字体的加载加速问题

前端  /  管理员 发布于 7年前   230

除了各种特定字体系列外（如 Times、Verdana、Helvetica 或 Arial），CSS定义了 5 种通用字体系列：

Serif 字体
    这些字体成比例，而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度，则成该字符是成比例的。例如，小写 i 和小写 m 的宽度就不同。上下短线是每个字符笔划末端的装饰，比如小写 l 顶部和底部的短线，或大写 A 两条腿底部的短线。Serif 字体的例子包括 Times、Georgia 和 New Century Schoolbook。
Sans-serif 字体
    这些字体是成比例的，而且没有上下短线。Sans-serif 字体的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。
Monospace 字体
    Monospace 字体并不是成比例的。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出，甚至更老式的视频显示终端。采用这些字体，每个字符的宽度都必须完全相同，所以小写的 i 和小写的 m 有相同的宽度。这些字体可能有上下短线，也可能没有。如果一个字体的字符宽度完全相同，则归类为 Monospace 字体，而不论是否有上下短线。Monospace 字体的例子包括 Courier、Courier New 和 Andale Mono。
Cursive 字体
    这些字体试图模仿人的手写体。通常，它们主要由曲线和 Serif 字体中没有的笔划装饰组成。例如，大写 A 再其左腿底部可能有一个小弯，或者完全由花体部分和小的弯曲部分组成。Cursive 字体的例子包括 Zapf Chancery、Author 和 Comic Sans。
Fantasy 字体
    这些字体无法用任何特征来定义，只有一点是确定的，那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。这样的字体包括 Western、Woodblock 和 Klingon。

理论上讲，用户安装的任何字体系列都会落入到上述某种通用系列中，但实际上可能并非如此，不过例外情况（如果有的话）往往很少。

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

为提高网站的速度，一个简单的解决方案是使用CDN，这对字体来说没有什么差别。重要的是要确保CDN有适当的CORS设置
 
复制代码代码如下:
# 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 *;
}

如果CDN的CORS设置不正确的话，你会看到AJAX/跨域错误控制台。
2.使用非阻塞加载CSS
 
实质上是使用media=none让我们在浏览器下载样式表而不会阻塞渲染，所以当样式表加载，media设置其所需的设置就会呈现在屏幕
3.单独的字体选择器

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

CSS Code复制内容到剪贴板

1. h1 { font-family: Arial, serif; } /* 系统字体 */  
2. .fontsloaded h1 { font-family:  'MySpecialFont', serif; } /* 自定义字体 */  
3.     
4. <link href="fonts.css" onload="document.body.className+=' fontsloaded';" rel="stylesheet" type="text/css" >  

通过使用字体声明以上策略，系统加载字体最初只有在自定义加载字体将被启用，因此屏幕不会显示任何一段时间空内容。我建议创建一个Stylus/Sass/Less的混合设置字体设置，自定义选择器自动设置。