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

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


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

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

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

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

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

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

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

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

故而仓促成文,为了提醒自己,也为了分享给你。谢谢阅读!

原文地址:http://bbs.iosre.com/t/ttf/1037

  • 6
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值