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

当前位置 : 首页 > 网页制作 > CSS > 浅谈CSS字体的加载加速问题

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

来源: 作者: 时间:2015-10-30 09:29
这篇文章主要介绍了CSS字体的加载加速问题,主要针对使用CSS中5种通用字体以外的情况,需要的朋友可以参考下
这篇文章主要介绍了CSS字体的加载加速问题,主要针对使用CSS中5种通用字体以外的情况,需要的朋友可以参考下

除了各种特定字体系列外(如 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-familyArialserif; } /* 系统字体 */  
  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的混合设置字体设置,自定义选择器自动设置。

Tag:
网友评论

<