@sctg/fontminify

@sctg/fontminify (just a minimal change to original)

Minify font seamlessly

Original homepage

• English
• 简体中文
• 繁體中文
• 日本語
• 한국어

Install

$ npm install --save @sctg/fontminify

Usage

This is now a strict ES6 module

import Fontminify from '@sctg/fontminify';

const fontminify = new Fontminify()
    .src('fonts/*.ttf')
    .dest('build/fonts');

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

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

You can use gulp-rename to rename your files:

import Fontminify from '@sctg/fontminify';
import rename from 'gulp-rename';

const fontminify = new Fontimify()
    .src('fonts/big.ttf')
    .use(rename('small.ttf'));

Sample asynchronous Typescript

import Fontminify from '@sctg/fontminify'
import stream from 'stream'
import gulp from 'gulp'
function convertTTF2WEB(srcPath: string, dstPath: string): Promise<FontminifyFile[]> {
    return new Promise<FontminifyFile[]>((resolve, reject) => {
        const fontmin = new Fontminify()
            .src(srcPath + '/*.ttf')
            .dest(dstPath + '/')
            .use(Fontminify.ttf2woff())
            .use(Fontminify.ttf2woff2())
            .use(Fontminify.css({
                fontPath: srcPath + '/',
            }));

        fontmin.run((err: Error, files: FontminifyFile[], stream) => {
            if (err) {
                reject(err);
            } else {
                resolve(files)
            }
        })
    })
}

API

new Fontimify()

Creates a new Fontimify instance.

.src(file)

Type: Array|Buffer|String

Set the files to be optimized. Takes a buffer, glob string or an array of glob strings as argument.

.dest(folder)

Type: String

Set the destination folder to where your files will be written. If you don't set any destination no files will be written.

.use(plugin)

Type: Function

Add a plugin to the middleware stack.

.run(cb)

Type: Function

Optimize your files with the given settings.

cb(err, files, stream)

The callback will return an array of vinyl files in files and a Readable/Writable stream in stream

Plugins

The following plugins are bundled with fontminify:

• glyph — Compress ttf by glyph.
• ttf2eot — Convert ttf to eot.
• ttf2woff — Convert ttf to woff.
• ttf2woff2 — Convert ttf to woff2.
• ttf2svg — Convert ttf to svg.
• css — Generate css from ttf, often used to make iconfont.
• svg2ttf — Convert font format svg to ttf.
• svgs2ttf — Concat svg files to a ttf, just like css sprite.
• otf2ttf — Convert otf to ttf.

.glyph()

Compress ttf by glyph.

import Fontminify from '@sctg/fontminify'

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

.ttf2eot()

Convert ttf to eot.

import Fontminify from '@sctg/fontminify'

const fontminify = new Fontimify()
    .use(Fontimify.ttf2eot());

.ttf2woff()

Convert ttf to woff.

import Fontminify from '@sctg/fontminify'

const fontminify = new Fontimify()
    .use(Fontimify.ttf2woff({
        deflate: true           // deflate woff. default = false
    }));

.ttf2woff2()

Convert ttf to woff2.

import Fontminify from '@sctg/fontminify'

const fontminify = new Fontimify()
    .use(Fontimify.ttf2woff2());

.ttf2svg()

Convert ttf to svg.

you can use imagemin-svgo to compress svg:

import svgo from 'imagemin-svgo'
import Fontminify from '@sctg/fontminify'

const fontminify = new Fontimify()
    .use(Fontimify.ttf2svg())
    .use(svgo());

.css()

Generate css from ttf, often used to make iconfont.

import Fontminify from '@sctg/fontminify'

const fontminify = new Fontimify()
    .use(Fontimify.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
        tpl: '[fontminify-dir]/lib/font-face.tpl'   // an alternative css template (default internal one)
    }));

Alternatively, a transform function can be passed as fontFamily option.

import Fontminify from '@sctg/fontminify'

const fontminify = new Fontimify()
    .use(Fontimify.css({
        // ...
        fontFamily: function(fontInfo, ttf) {
          return "Transformed Font Family Name"
        },
        // ...
    }));

.svg2ttf()

Convert font format svg to ttf.

import Fontminify from '@sctg/fontminify'

const fontminify = new Fontimify()
    .src('font.svg')
    .use(Fontimify.svg2ttf());

.svgs2ttf()

Concat svg files to a ttf, just like css sprite.

awesome work with css plugin:

import Fontminify from '@sctg/fontminify'

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

.otf2ttf()

Convert otf to ttf.

import Fontminify from '@sctg/fontminify'

const fontminify = new Fontimify()
    .src('fonts/*.otf')
    .use(Fontimify.otf2ttf());

CLI

The cli is a work in progress and may produce unexpected results.

$ npm install -g fontminify

$ fontminify --help

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

  Example
    $ fontminify fonts/* build
    $ fontminify fonts build
    $ fontminify foo.ttf > foo-optimized.ttf
    $ cat foo.ttf | fontminify > 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 fontminify cost

you can use curl to generate font for websites running on PHP, ASP, Rails and more:

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

or you can use html-to-text to make it smaller:

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

what is more, you can use phantom-fetch-cli to generate font for SPA running JS template:

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

Related

• fontminify-app
• gulp-fontminify
• fonteditor

Thanks

• imagemin
• free chinese font
• [浙江民间书刻体][font-url]

License

MIT © Ronan Le Meillat / ecomfe