如何通过删除某些字符来减小字体文件的体积

如何通过删除某些字符来减小字体文件的体积

Chris Yue No Comment
Posts

可能有的小伙伴看到标题会觉得莫名其妙:为什么要减小字体的体积?一般来说,减小字体体积的需求基本都出现在提高网络传输效率上。比如说,我为什么会去研究这个问题,就是因为我最近用 Three.js 来做 3D 演示的时候,在 3D 界面里显示文字必须加载字体文件。但众所周知中文字体文件也太大了,导致页面加载大部分时间都花在了字体的下载上。另外 CSS3 早就支持加载远端字体来丰富页面的字体显示,但因为中文字符太多字体文件太大,导致这个功能在中文网页领域一直没有得到快速推广。

好在目前有 Fontmin 这样的工具出现,让中文字体文件压缩成为了一个简单的事情。由于 Fontmin 官方网页以及项目 README 写得太过简单,我这里会补充一些用法上的细节。

通过下面的命令,我们可以先安装 Fontmin 工具:

npm install -g fontmin

通过全局安装命令行工具,我们就可以在任何地方使用 fontmin 命令了。假如我们有一个需要压缩的字体文件 youyuan.ttf 在当前目录下,那么我们可以通过下面的命令来生成压缩之后的字体文件:

fontmin -t "这里是需要保留的字符" youyuan.ttf

正常情况命令很快就能执行完毕,并且在当前目录下生成 build 目录,里面有好几种生成的新字体文件,甚至连 CSS 文件都跟你生成好了。

上面这种用法,在要保留的字比较少的时候是很方便的。但是对于要保留的字很多的情况下,就不太适用了。比如要为某个网页上所有的字符生成字体文件,Fontmin 提供的例子是一种比较巧妙的方法:

text=`curl <网页地址>` && fontmin -t "$text" youyuan.ttf

融会贯通,如果只是给本地某个 html 文件生成字体也可以用 cat

text=`cat index.html` && fontmin -t "$text" youyuan.ttf

通过 html-to-text 工具可以只保留语义上的文字内容,从而能过滤掉更多字符:

# 安装 html-to-text
npm install -g html-to-text
# 执行字体压缩
text=`cat index.html | html-to-text` && fontmin -t "$text" youyuan.ttf

这种方法依然有一个问题,如果页面特别多,还是会很麻烦。不过 fontmin 也提供编程界面,如果你某个前端项目需要压缩字体,也可以先把 fontmin 安装在这个项目里,然后写一个压缩字体的脚本,脚本的内容,就是先通过某些方法,获取所有你想压缩的文字内容,然后再通过 fontmin 提供的接口来生成压缩后的字体文件:

const Fontmin = require('fontmin');

const text = ... // 获取项目所有需要字体的字符
const fontmin = new Fontmin()
    .use(Fontmin.glyph({ 
        text,
    }));

如果代码你不想自己写,也可以看看字蛛项目,它基于 Fontmin,可以通过自动扫描项目里的代码来生成压缩字体文件。

Typeface.js 压缩

由于 Three.js 只支持 typeface.js 作为字体文件,所以我最终是要压缩 typeface 文件。对于这种情况,是还有其他做法的。Facetype.js 是一个在线 typeface.js 生成器,这个生成器本身就有设置保留字符的功能(最下面的 Restrict character set.),对于要显示的文字本来就比较少的情况,有这个功能就够了,但如果要显示的字符比较多,或者获取这些字符的方式比较复杂,那就只能先用 Fontmin 生成压缩后的字体文件,再用 Facetype.js 来转换了。

如何通过删除某些字符来减小字体文件的体积 by Chris Yue is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

微信赞赏码

写作累,服务器还越来越贵
求分担,祝愿好人一生平安
天使打赏人

发表评论

+ 49 = 51