浅谈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设置
 

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表