3个改善 @font-face 性能的技巧

/

前面介绍过 @font-face,由于 @font-face 字体是在服务器端,多少会有一些性能问题,特别是当 @font-face 字体较大的时候。下面是几个比较简单的改善 @font-face 性能的小技巧。

生成 @font-face 字体前删除不必要的字符

为了减小 @font-face 字体的体积,生成 @font-face 字体前给原始字体减肥是一个最有效的方法,可以利用 FontCreator 这类字体工具打开原始字体文件,将用不到的字符统统删除,如下图所示,这些字符我是肯定用不到的,所以毫不犹豫的删除了。

生成 @font-face 字体前删除不必要的字符

将减肥后的字体保存,再上传到 fontsquirrel 生成 @font-face 字体,@font-face 字体的体积当然相应的减小了。

@font-face 字体的体积减小

对 @font-face 字体进行 GZIP 压缩

通常大家都会对 html、css、js 进行 GZIP 压缩以减少页面传输量,对 @font-face 字体也可以进行 GZIP 压缩。以下以 Nginx web 服务器设置为例。

1、编辑 /etc/nginx/mime.types,添加如下内容

application/vnd.ms-fontobject      eot;
application/x-font-ttf             ttf;
font/opentype                      otf;
application/x-font-woff            woff;

如果 eot 已定义为 application/octet-stream,作一下修改。

2、在 /etc/nginx/nginx.conf 中添加 gzip-types

gzip_types image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype

woff 没有包括在内,因为它已经是经过压缩的了。

为 @font-face 字体设置 expires headers

location ~* \.(eot.*?|woff|ttf|svg.*?)$ {
	expires 30d;
	log_not_found off;
}

上面的代码设置 @font-face 字体 30 天过期,期间从浏览器缓存中加载。

Comments