TTF字体压缩 part.2/2 ：执行压缩

书接上回前文再续，下一步根据这个字典里的汉字做索引打包新的字库文件。

方案选择

1. 阿里旗下的webfont平台

https://www.iconfont.cn/webfont

十分良心的服务，带了自家的普惠和思源等十数款可免费商用的字体

优点：在线生成，不需要安装或配置任何东西。生成的压缩字库可下载, 也可以直接用他们的CDN连省自己带宽，网速有保证
缺点：当字典较大或有一些较特殊的字时，出现了兼容性问题，接口返回400 bad request 错误。

建议少量此字体使用场景时使用，例如只有一些按钮文字或者某些大标题，而刚好这里的样式又合适的话，是不错的选择。（但我目前的项目并不合适，所以没采用）

2. 字蜘蛛 font-spider

http://font-spider.org/
https://github.com/aui/font-spider

非常著名的工具，如果搜索“ttf压缩”十有八九第一页就能搜到这个。
优点：知名度高多人使用遇到问题容易找到别人的经验分享
缺点：安装与使用方法单一，只能在node.js 环境 npm 方式安装，能扫描html文件。是我放弃的主要原因。

3. Fontmin-app

https://github.com/ecomfe/fontmin-app/releases/
这是我最终选用的方案，其实它和 font-spider 从原理到实现手法都很相似。
优点：贴心地提供了命令行模式和客户端模式 ，不用 npm安装。手动部署更便利
缺点：暂无，非要说的话，发现导出的压缩字库在 遨游浏览器(Maxthon3)上会有字体尺寸异常宽的问题（对比用未压缩字库不会），原因不详。但在手机端和其他浏览器没有发现问题

Fontmin 使用(操作、配置到css)

从github下载 x64 客户端，也不需要安装，绿色版直接运行。

把字典内容拷贝到输入框，把未压缩的字库拖动进左下角，右边会有实时预览（偶尔预览无效，不影响生成），点右则按钮生成
之后会弹出生成的一个目录，里面包含各家浏览器适配的webfont字体文件格式(其实保留ttf基本就够) 以及一个 css文件

把全部文件复制到自己的项目内，把css内容复制到自己的css文件头或直接引入到html中。就可以直接使用压缩后的字体了。（注意字库文件的路径变化）

字库从3.9M 缩小到357k，满意。

总结

不过这种索引字库也有局限性，只适合文案已知且有限的地方使用。如果是开放性的文字元素，例如用户留言这种不可预知内容则不适合。 如果一段文字里穿插出现几个没有字库样式渲染的字，观感相当糟糕。

此外对于长篇巨著，比如说红楼梦，用到的字可能上万，索引出来的字库依然不小，压缩效果则没那么好。

补充

建议在字典文件中手动补上以下常用的非汉字符号数字，已经整理好了

0123456789:.,~?!@#$%&^()[]_+-*/=<>

参考链接