原文地址

日常开发网页经常会使用一些特殊字体,比如思源黑体、苹方字体等,因为这些字体在一般的宿主环境中是不存在的,需要通过 css 的 @font-face 定义,并从服务器中加载对应的字体文件,而字体文件一般都是比较大的,甚至有时候一个字体比其他所有的资源(js、css、图片)加起来还要大,对网页的加载性能起到非常关键的影响,因此有必要对字体进行一些优化。 本文主要从字体格式、按需提取、统一渲染三个方面来谈谈优化字体的常用技巧。

转换字体格式

现在是 1202 年了,各主流设备基本都支持 woff2 字体格式,因此网站中没有必要再引入多种不同格式的字体了。一般地,建议只引入 woff2 就好了,既可以保持代码的简洁性,又可以减少上传到你服务器的文件,何乐而不为?

可是很多时候美术同学只提供其他格式的字体文件给我们,比如 TTF 或 OTF,那如何将其转换成 woff2 呢?

TTF 字体,是苹果和 windows 都支持的一种字体,因此是美术同学最喜欢用的。TTF 转换 WOFF2 是比较简单的,可以选择线上转换,推荐的网站有以下两个

但是个人觉得线上转换等待上传的时间比较久,而且有时候生成的文件是空白的,因此更加倾向于使用 node 库 ttf2woff2 转换。该库的周下载量达到 10w+ 的,可见好多人都会有将 tff 转换成 woff2 的需求。使用方法也很简单:

cat font.ttf | ttf2woff2 > font.woff2

因为使用 了 cat 命令来提取 ttf 的内容,如果你使用的是 windows ,需要使用 git bash 或 wsl 来运行。

除了 TTF ,美术同学还经常提供 OTF 给我们,这是微软和 Adobe 共同研发的字体,因此在 windows 平台还是比较流行的。那如何将其转换成 WOFF2 呢?目前我还没有发现哪个线上网站或 node 库能一步到位转换的,在 google 上搜索好几个线上转换的网站,要么转换完成后无法下载 ,要么转换下载后是个空文件,反正就是不靠谱的东西。

经过一番折腾后,找到了一个不错的 python 库 otf2ttf,能够稳定的将 otf 转 ttf。使用方法也比较简单,首先安装 python,然后通过 pip 安装 otf2ttf 就可以使用了(pip 类似于 npm,是 python 的包管理器),不过官方的文档中示例代码应该是有一点小笔误:

otf2ttf MyFont.ttf

里面的 MyFont.ttf 应该是 MyFont.otf 才对,因为这个 input 应该是 OTF 类型而不是 TTF 。

使用 python otf2ttf 生成 ttf 文件 后,就可以使用上面提到的将 ttf 转换成 woff2 的方法获取到 woff2 了。

关于字体转换的这里再啰嗦一下:有时候美术同学还会提供 ttc 文件给我们,这不是单个字体,而是将多种字体打包在一起了,需要从中提取出 ttf 后才能使用,可以尝试使用 TTC2TTF。

按需压缩字体