大坑已填,留个纪念:裁剪ttf,让其大小更适用于移动设备与网页

最近因项目需求,做了个新网站,为了达到比较好的视觉效果,我们没有沿用宋体、微软雅黑等常见字体,而是采用了更加牛比的有设计感的字体,然后问题就来了:中文字体文件(ttf格式,即truetype fonts)的大小一般都超过了1MB,严重拖慢了网页加载速度,到了不能忍的地步,如图所示:
image
这是阿里云主机默认配置的加载速度,一个1.9MB的字体文件加载了快1分钟,真是给跪了 :sob:
既不想牺牲网页设计质量,又不想影响用户的心情,鱼与熊掌咱想兼得,那就只能费费程序员的脑子,找找这个问题的解决方案了。因为是第一次做这样的需求,所以也不知道该搜些什么,就随便搜搜看吧:


这是什么鬼……
继续搜:
image
有人问,没人答。好吧,继续搜:

找到了上面的这篇文章,谈到的正是我想解决的问题。作者给出的解决方案是用一个叫sfnttool的工具,把tff文件里我们必需的汉字给提取出来,重新生成一个tff文件。少了那些我们用不着的大部分汉字,这个tff的体积就会明显变小。

这个工具的用法相当简单,而且看起来作用挺明显,让人跃跃欲试。但是坑爹的是,原文没有提供这个工具的下载链接,而只是给出了其开源的google code地址,需要自己编译才能使用。这怎么符合我有懒就偷的个人风格,遂google “sfnttool”,果然让我找到了别人编译好的文件:
image
但是下载下来一运行,跟想象中的输出完全不一样,报了一堆错。google了一下,说是我的JRE环境版本太低,需要升级。于是去java网站上下载升级了最新的JRE,再次运行,果然可行!新生成的tff文件体积小了不少,但是坑爹的是,双击安装tff文件时,提示我文件格式有问题!

试了好几个tff文件均是如此,基本可以断定是对方的问题而不是我的问题后,我在原博里给作者留了个言,但貌似连留言审核都没通过。指望他估计是够呛了,我的心啊,哇凉哇凉的啊!
但是上面这个sfnttool给我带来了一个意想不到的收获——我知道我要做的事,在英语术语里叫“subset”,即求子集;于是我开始google “subset tff”,开始了一段长达4个多小时的熬夜之旅:

image
看起来每个链接都可以解决我的问题是吧?如果是的话,它们就不会全部都是紫色的了!它们是这样依次坑爹的:

上面这个被人upvote两次的回答,被我无情地指出了不能工作的事实 :hankey:

上面这个神奇的网站,对我上传的中文字体直接报错;后来知道,它不支持中文 :angry:
image
上面这个看似专业的工具,连文档和用法都讲不清楚,我试了好几种输入,均以失败告终 :pensive:
image
这个售价高达300刀的工具软件,看起来实在是太高大上了!而且,它的官网上竟然慷慨地提供了一个30天的免费试用版 :kissing_heart:
image
对于我这种信奉有便宜不占王八蛋の歪理的吊丝来说,简直是天降大礼!
但是试用了一会儿之后,发现竟然没法保存编辑之后的字体文件 :anguished:于是我给官方论坛发了个邮件问情况:
image
他给的链接并没能解决我的问题;在把导致问题的tff文件发给他之后,严谨的德国佬就和我失去鸟联系……
玛德,试了一轮,连一个可以用的都没有,搞毛啊!国外这帮货不中用,那就转战国内吧,反正问题的根源也在中文字体的运用上。此时已经夜里1点了,我百度了一下,又找到了这篇文章:

装了ActivePerl解释器,也装了Font:TTF库,但一运行,还是满屏的错。此时我已经没脾气了,继续搜索,终于找到了一个小工具:

耗费巨资2积分下载下来,在虚拟机里测了测,好使 :+1:

这个工具是广州市微嵌计算机科技有限公司开发的,在易用性和能用性这两点上,简直是把国外那帮玩源代码和命令行的装逼犯们爆成了烂稀!
唯一需要注意的就是,这个工具对系统字库以外的字体好像不起作用,必须先安装你想裁剪的字体,再从系统字体里选择这个字体进行裁剪。这不是什么大问题,基本可以忽略。除此以外,一切完美,:cn: ,牛比!
有了这个工具的加持,tff的裁剪就比较简单了,一个1.9M的文件被我精简到了100K;进一步,我们还可以利用Free TTF to WOFF Converter来把ttf文件转换成网页上常用的woff文件,使体积进一步缩小约40%。
image
到此为止,这个问题就算解决了。它跟iOS,跟逆向工程其实毫不相关,但却多少体现了一些解决工程问题的思维,就是不断试错,不断改错,直到达到最终目标,希望能给新手工程师们一点点灵感。此外,我敢说,如果看不到我这篇文章,大多数碰到相同问题的人要把我走的弯路再走一遍,而且不一定能最后解决问题,费力不讨好,完全没必要。
故而仓促成文,为了提醒自己,也为了分享给你。谢谢阅读!

1 个赞

你说的这个,可以用在android app上么, 我只要ttf的

win上有两个API能做到, CreateFontPackage, MergeFontPackage
py有个工具叫啥来着, 我去问问

里面的 pyftsubset 这个工具应该可以, 我倒是没实际用过

你巨婴怎么连这种屌API都有

看出了百度的重要性来了

可以的

树莓派Ubuntu+OS X

好了告诉我易用性和能用性在哪

1 个赞

:cold_sweat:

而且这玩意我要是想批量裁剪多个字体怎么办。想和我的其他脚本关联使用怎么办。

GUIs are for noobs

I’m a n00b :disappointed_relieved:

早年我也和你一样热衷于GUI程序,OS X下没有好用免费的音频编码解码GUI软件。每次要转啥都要切到Windows开foobar装各种编码器贼头疼。

后来受不了了就学了下ffmpeg然后自己编译了一份全编码的用,现在find |parallel 彻底爽到

为什么要GUI呢

因为弟是弱鸡……向张总学习!

阿里p10巨神说笑了

不断试错,不断探索,:grinning::+1: