html 中加载字体太慢,浅谈CSS字体的加载加速问题

除了各种特定字体系列外(如 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

Header set Access-Control-Allow-Origin "*"

# 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复制内容到剪贴板

h1 {font-family:Arial,serif; }/* 系统字体 */

.fontsloaded h1 {font-family:'MySpecialFont',serif; }/* 自定义字体 */

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