有时候我们需要让网页加载自定义字体文件,但是通常的字体格式(TTF、OTF)体积太大了,这就需要我们将其转换为更小体积的字体文件格式(WOFF2)。
之前我尝试使用类似 CloudConvert 的在线工具去转换 OTF 字体文件,但是不知道为何转换出来的字体损坏了,无法使用。经过多方面研究,现在我找到了一种本地压缩字体可行的方法,因此分享给大家。
字体格式科普常见的字体格式有以下几种,这里只作简单介绍。
TTFTTF(TrueTypeFont)是Apple 公司和Microsoft公司共同推出的字体文件格式,随着 windows 的流行,已经变成最常用的一种字体文件表示方式。(来源:百度百科)
这种格式的字体文件体积比较大,以思源宋体为例,字体文件可以达到 24MB+,通常只用作安装到计算机中的字体,或者在网页中设备不支持 WOFF2 字体情况的兜底处理。
OTFOpenType,是一种可缩放字体(scalable font)电脑字体类型,采用PostScript格式,是美国微软公司与Adobe公司联合开发,用来替代TrueType字体的新字体。这类字体的文件扩展名有.otf、.ttf、.ttc,类型代码是OTTO,现行标准为OpenType 1.9。(来源:维基百科)
可以理解为和 TTF 字体差不多,这里我们主要讨论体积问题,OTF 字体文件体积也很大,基本和 TTF 差不多。
WOFF & WOFF2Web开放字体格式(Web Open Font Format,简称WOFF)是一种网页所采用的字体格式标准。此字体格式发展于2009年,[3]由万维网联盟的Web字体工作小组标准化,现在已经是推荐标准。[4]此字体格式不但能够有效利用压缩来减少文件大小,并且不包含加密也不受DRM(数字著作权管理)限制。(来源:维基百科)
这是专门给网页使用的字体格式,体积非常小,实测压缩思源宋体字体文件,可以把体积压缩到 OTF 字体 70% 的大小。
WOFF 和 WOFF2 的区别在于:
WOFF本质上是包含了基于SFNT的字体(如TrueType、OpenType或其他开放字体格式),且这些字体均经过WOFF的编码工具压缩,以便嵌入网页中。[3]WOFF 1.0使用zlib压缩,[3]文件大小一般比TTF小40%。[11]而WOFF 2.0使用Brotli压缩,文件大小比上一版小30%。(来源:维基百科)
因此,一般推荐直接使用 WOFF2。
SVG可缩放矢量图形(英语:Scalable Vector Graphics,缩写:SVG)是一种基于可扩展标记语言(XML),用于描述二维矢量图形的图形格式。SVG由W3C制定,是一个开放标准。(来源:维基百科)
这种字体是非常早期的标准,已经不推荐使用。我们可以从 Can i use 里面查到它的兼容性非常差:
全都可以变红
两步压缩这部分是正式的压缩方法了,主要分为两步,分别是:取子集、压缩。
这里我使用到的是 Python 的一个库:fonttools,使用最新版 Python 的 pip 命令安装即可在 Shell 中使用:
$ pip install fonttools取子集中文汉字数量很多,以思源宋体为例,思源宋体遵循 GB 18030 和通用规范汉字表,包含 8105 个规范字(来源:少数派),可能还有其他语言的字符,实际字符数量肯定是远超这个数字的。
实际上,常用汉字数量也就 3500 个左右,如果你的文本相对固定,可以考虑删减掉其他不常用的汉字。
极端做法是只保留文本中出现的字符,其他的全部删掉,但是我个人更倾向于折中保留 3500 汉字,在未来如果修改了文本,也不至于每次都要重新压缩一遍字体。
这种删减字符的做法叫“取子集”。取子集我们需要定义一个纯文