w3ctech

Fontmin 快速指南

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

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

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

Why Fontmin

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

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

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

  • 子集化:提取字体中的部分字型,最小化打包字体
  • webfont 格式化:利用 @font-face,把自定义字体嵌入到网页中,支持 ttfwoffeotsvg 等格式

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

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

-- Jeff Atwood

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

  • 专注,面向前端工程师,专注字体的 web 应用
  • 工程化,自动化开发流程,告别刀耕火种的人肉操作
  • 社区,依靠社区的力量,可以有更多的玩法,如:edp-build-fontmin, gulp-fontmin, font-spider

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

node 模块

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

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 中:

var Fontmin = require('fontmin');

var fontmin = new Fontmin()
    .use(Fontmin.css({
        base64: true        // 开启 base64 嵌入,默认关闭
    }));

输出 css:

@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:

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

npm install -g fontmin

客户端

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

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

EOF

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

前端圈微信

扫码关注前端圈微信公众号

共收到5条回复

  • 哈哈,试用一下!

    回复此楼
  • 感谢支持 哈哈

    大神,文章如果添加 CodePen 呢?

    回复此楼
  • 子集化是可控制的么?

    回复此楼
  • @junmer 哈哈,暂时没有办法codepen,你可以 http://code.w3ctech.com 发布后,把链接发过来

    回复此楼
  • @xcchcaptain 是指哪方面可控制呢?

    回复此楼