浏览器的季风已撩拨起 webfont 的热浪，中文字体却依旧寂寞如雪。与英文26个字母不同的是，中文字符集过多，导致字体文件过大，少则2M、3M多则7M、8M，还要加载不同格式的字体，基本上不用想，只能使用图片代替。
有些地方使用图片并不方便，如下图所示：
上面图里，中文字体之间夹着特殊字体，并且数字会改变，只能通过切除图片0-9每个数字一张图片。然后再通过js拼接到一起。
下面两个按钮也是特殊的字体，如果这样的按钮有很多，岂不是每个都得切一张图。
现在通过Fontmin(是一个纯 JavaScript 实现的字体子集化方案)，就可以做到把你想要的特殊字体提取出来，从而不用去加载庞大的字体了。
首先我们要有node环境，然后安装fontmin。
- npm install –save fontmin
如果你需要重新命名字体名字，还需要安装gulp-rename。
- npm install gulp-rename
node模块
- var Fontmin = require(‘fontmin’);
- var fontmin = new Fontmin()
- .src(‘new.TTF’) // 转换文字路径
- .use(Fontmin.glyph({ // 字型提取插件
- text: ‘中国123’ // 所需文字
- }))
- .use(Fontmin.ttf2eot()) // eot 转换插件
- .use(Fontmin.ttf2woff()) // woff 转换插件
- .use(Fontmin.ttf2svg()) // svg 转换插件
- .dest(‘fonts’); // 输出配置
- // 执行
- fontmin.run(function (err, files, stream) {
- if (err) { // 异常捕捉
- console.error(err);
- }
- console.log(‘done’); // 成功
- });
如果需要输出css文件。可以使用.css的API。
- .use(Fontmin.css({
- fontPath: ‘./’,
- base64: true,
- glyph: true,
- iconPrefix: ‘my-icon’,
- fontFamily: ‘myfont’,
- asFileName: false
- }))
官方提供了很多Api，可以根据自己的需求来配置，具体点击这里
中国123
我们要实现上面的特殊字体，正常情况下，引入字体文件，可以看到仅仅字体文件就已经达到了13M。
然后我们来使用fontmin提取字体。结果只有11K。
并且自动创建每种字体格式。
另外官方还提供了客户端，不会写代码也没关系。