WebFont字体文件压缩

WebFont字体文件压缩

@font-face 对CSS3来说，现在已经不是很陌生了，页面上的很多图标都是通过字体展示出来的。但是呀，很多设计师为了页面整体好看，就喜欢用一些特殊字体，英文字体也就算了，也就26个字符加标点符号就是了，一个字体文件也不大。中华文化博大精深，岂是26个汉字能搞定的？所以中文字体库一般都是十几兆，如果将整个字体库引入到页面中，页面加载速度很受影响。为了按需加载，将页面上用的汉字提取出来，重现生成一个只有需要用的字符的字体库，这样文件会小很多。在很久之前，我们通过手动的方式来制作字体库的，具体可以查看网络字体@font-face，如何处理网页中的特殊字体？。这样的手工作业方式很麻烦，于是大神们出现了很多工具。

需求

最近有一个业务功能，要求客户端传来要用到的文字和字体，返回一个整理后的字体文件。

通过搜索呢，发现有sfnttool.jar (Java)，Fontforge (Python)，Font Optimizer (Perl)，但是老子不会这些语言，继续搜索，发现了font-spider —— 一款NodeJS编写的工具，这个俺会。

font-spider

github

font-spider是通过读取HTML文件，自动检测网页中引用的字体和文字，来生成字体文件。具体的使用基础教程可查看font-spider 前端开发字体的好工具。

如果写一个后端接口，总不能先生成一个html文件，再运行命令吧，这样不是很合理。那就看看它的package.json，看看他的依赖包是不是有核心功能的工具。

font-spider package.json

gulp、css、browser-x等不相关的排除掉，只剩下fontmin了。

搜索一下，发现fontmin(官网)正是我所需要的。

fontmin

github

fontmin提供了客户端、提供了命令行、也提供了NodeJS调用的方式。通过github中的package.json可以知道，核心的功能是通过fonteditor-core模块实现的。

fontmin客户端的使用基础教程——特殊字体神器-fontmin，秒杀一切工具。

Node的使用基础方式：

var Fontmin = require('fontmin');

var fontmin = new Fontmin()
    .src('fonts/Microsoft Yahei.ttf') // 设置服务端源字体文件
    .dest('build/fonts') // 设置生成字体的目录
    .use(Fontmin.glyph({ 
        text: '尹小芃槑', // 设置需要的自己
    }));

fontmin.run(function (err, files) { // 生成字体
    if (err) {
        throw err;
    }
    console.log(files[0]); // 返回生成字体结果的Buffer文件
});