fontmin

无缝压缩字体

主页

安装

$ npm install --save fontmin

用法

var Fontmin = require('fontmin');

var fontmin = new Fontmin()
    .src('fonts/*.ttf')
    .dest('build/fonts');

fontmin.run(function (err, files) {
    if (err) {
        throw err;
    }

    console.log(files[0]);
    // => { contents: <Buffer 00 01 00 ...> }
});

您可以使用 gulp-rename 来重命名您的文件

var Fontmin = require('fontmin');
var rename = require('gulp-rename');

var fontmin = new Fontmin()
    .src('fonts/big.ttf')
    .use(rename('small.ttf'));

API

new Fontmin()

创建一个新的 Fontmin 实例。

.src(file)

类型： Array|Buffer|String

设置要优化的文件。接受缓冲区、glob 字符串或 glob 字符串数组作为参数。

.dest(folder)

类型： String

设置目标文件夹，文件将被写入该文件夹。如果不设置任何目标，则不会写入任何文件。

.use(plugin)

类型： Function

将 plugin 添加到中间件堆栈。

.run(cb)

类型： Function

使用给定的设置优化文件。

cb(err, files, stream)

回调将在 files 中返回一个 vinyl 文件数组，并在 stream 中返回一个可读/可写流。

插件

以下插件包含在 fontmin 中

glyph — 通过符号压缩 ttf。
ttf2eot — 将 ttf 转换为 eot。
ttf2woff — 将 ttf 转换为 woff。
ttf2svg — 将 ttf 转换为 svg。
css — 从 ttf 生成 css，常用于制作图标字体。
svg2ttf — 将字体格式 svg 转换为 ttf。
svgs2ttf — 将 svg 文件连接到 ttf，类似于 css sprite。
otf2ttf — 将 otf 转换为 ttf。

.glyph()

通过符号压缩 ttf。

var Fontmin = require('fontmin');

var fontmin = new Fontmin()
    .use(Fontmin.glyph({ 
        text: '天地玄黄 宇宙洪荒',
        hinting: false         // keep ttf hint info (fpgm, prep, cvt). default = true
    }));

.ttf2eot()

将 ttf 转换为 eot。

var Fontmin = require('fontmin');

var fontmin = new Fontmin()
    .use(Fontmin.ttf2eot());

.ttf2woff()

将 ttf 转换为 woff。

var Fontmin = require('fontmin');

var fontmin = new Fontmin()
    .use(Fontmin.ttf2woff({
        deflate: true           // deflate woff. default = false
    }));

.ttf2svg()

将 ttf 转换为 svg。

您可以使用 imagemin-svgo 来压缩 svg

var Fontmin = require('fontmin');
var svgo = require('imagemin-svgo');

var fontmin = new Fontmin()
    .use(Fontmin.ttf2svg())
    .use(svgo());

.css()

从 ttf 生成 css，常用于制作图标字体。

var Fontmin = require('fontmin');

var fontmin = new Fontmin()
    .use(Fontmin.css({
        fontPath: './',         // location of font file 
        base64: true,           // inject base64 data:application/x-font-ttf; (gzip font with css). 
                                // default = false
        glyph: true,            // generate class for each glyph. default = false
        iconPrefix: 'my-icon',  // class prefix, only work when glyph is `true`. default to "icon"
        fontFamily: 'myfont',   // custom fontFamily, default to filename or get from analysed ttf file
        asFileName: false,      // rewrite fontFamily as filename force. default = false
        local: true             // boolean to add local font. default = false
    }));

或者，可以传递一个转换函数作为 fontFamily 选项。

var Fontmin = require('fontmin');

var fontmin = new Fontmin()
    .use(Fontmin.css({
        // ...
        fontFamily: function(fontInfo, ttf) {
          return "Transformed Font Family Name"
        },
        // ...
    }));

.svg2ttf()

将字体格式 svg 转换为 ttf。

var Fontmin = require('fontmin');

var fontmin = new Fontmin()
    .src('font.svg')
    .use(Fontmin.svg2ttf());

.svgs2ttf()

将 svg 文件连接到 ttf，类似于 css sprite。

与 css 插件一起使用效果更佳

var Fontmin = require('fontmin');

var fontmin = new Fontmin()
    .src('svgs/*.svg')
    .use(Fontmin.svgs2ttf('font.ttf', {fontName: 'iconfont'}))
    .use(Fontmin.css({
        glyph: true
    }));

.otf2ttf()

将 otf 转换为 ttf。

var Fontmin = require('fontmin');

var fontmin = new Fontmin()
    .src('fonts/*.otf')
    .use(Fontmin.otf2ttf());

CLI

$ npm install -g fontmin

$ fontmin --help

  Usage
    $ fontmin <file> [<output>]
    $ fontmin <directory> [<output>]
    $ fontmin <file> > <output>
    $ cat <file> | fontmin > <output>

  Example
    $ fontmin fonts/* build
    $ fontmin fonts build
    $ fontmin foo.ttf > foo-optimized.ttf
    $ cat foo.ttf | fontmin > foo-optimized.ttf

  Options
    -t, --text                          require glyphs by text
    -b, --basic-text                    require glyphs with base chars
    -d, --deflate-woff                  deflate woff
    --font-family                       font-family for @font-face CSS
    --css-glyph                         generate class for each glyf. default = false
    -T, --show-time                     show time fontmin cost

您可以使用 curl 为运行 PHP、ASP、Rails 等的网站生成字体

$ text=`curl www.baidu.com` && fontmin -t "$text" font.ttf

或者您可以使用 html-to-text 来减小它的大小

$ npm install -g html-to-text
$ text=`curl www.baidu.com | html-to-text` && fontmin -t "$text" font.ttf

更重要的是，您可以使用 phantom-fetch-cli 为运行 JS 模板的 SPA 生成字体

$ npm install -g phantom-fetch-cli
$ text=`phantom-fetch http://www.chinaw3c.org` && fontmin -t "$text" font.ttf