Fontmin 快速指南

Fontmin 是一个纯 JavaScript 实现的字体子集化方案。

提供了 ttf 子集化,eot/woff/svg 格式转换,css 生成 等功能,助推 webfont 发展,提升网页文字体验。

See the Pen Fontmin Example by Firede (@firede) on CodePen.

Why Fontmin

浏览器的季风已撩拨起 webfont 的热浪,中文字体却依旧寂寞如雪。

与西文字体不同,由于字符集过大,中文字体无法享受 webfont 带来的便利。

为了让中文字体也乘上这道风,我们需要对其进行 min:

已有工具 sfnttool.jar (Java),Fontforge (Python),Font Optimizer (Perl),为什么还要造轮子呢?

Any application that can be written in JavaScript, will eventually be written in JavaScript. – Jeff Atwood

噗,开个玩笑。靠谱的说,是这样的:

以上,Fontmin 提供了多种方式,带你玩转字体。

node 模块

npm 模块 fontmin,基于 stream 处理字体文件,简单高效,方便扩展。可以与 gulp 插件 自由搭配。

1
2
3
4
5
6
var Fontmin = require('fontmin');
var rename = require('gulp-rename');
var fontmin = new Fontmin()
.src('fonts/big.ttf')
.use(rename('small.ttf'));

提供细粒度 plugins,你可以自由定制专属的 webfont 压缩方案,比如:把字体转为 base64 嵌入到 css 中:

1
2
3
4
5
6
var Fontmin = require('fontmin');
var fontmin = new Fontmin()
.use(Fontmin.css({
base64: true // 开启 base64 嵌入,默认关闭
}));

输出 css:

1
2
3
4
5
6
7
8
9
@font-face {
font-family: "eduSong";
src: url("eduSong.eot"); /* IE9 */
src: url("eduSong.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwA....) format("truetype"), /* chrome、firefox、opera、Safari, Android,iOS 4.2+ */
url("eduSong.svg#eduSong") format("svg"); /* iOS 4.1- */
font-style: normal;
font-weight: normal;
}

为方便大家使用,提供一个最基本的 webfont 工作流 snippet:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var Fontmin = require('fontmin');
var srcPath = 'src/font/*.ttf'; // 字体源文件
var destPath = 'asset/font'; // 输出路径
var text = '我说你是人间的四月天;笑响点亮了四面风;轻灵在春的光艳中交舞着变。';
// 初始化
var fontmin = new Fontmin()
.src(srcPath) // 输入配置
.use(Fontmin.glyph({ // 字型提取插件
text: text // 所需文字
}))
.use(Fontmin.ttf2eot()) // eot 转换插件
.use(Fontmin.ttf2woff()) // woff 转换插件
.use(Fontmin.ttf2svg()) // svg 转换插件
.use(Fontmin.css()) // css 生成插件
.dest(destPath); // 输出配置
// 执行
fontmin.run(function (err, files, stream) {
if (err) { // 异常捕捉
console.error(err);
}
console.log('done'); // 成功
});

大家可以这个基础上,自由扩展,玩法多多。

命令行

极客范儿? 就是喜欢弹奏键盘这种飘逸的感觉~

全局安装 fontmin

1
npm install -g fontmin

客户端

懒得写代码? 直接把 TTF 拖进来,左侧输入需要文字,右侧实时看效果。点击生成,duang 一下,就搞定了~

可以在 这里 找到最新版本。

EOF

如果您觉得 Fontmin 还不错,请给个 star 呗 ヾ(◍°∇°◍)ノ゙

知识共享许可协议