forked from https://github.com/ecomfe/fontmin

Overview

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

Minify font seamlessly

npm GitHub Workflow Status npm GitHub

Original homepage

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

Thanks

License

MIT © Ronan Le Meillat / ecomfe

You might also like...

Mirror from https://github.com/BochilGaming/games-wabot/tree/multi-device

Games-Wabot Join Group Diskusi NO BOT Deploy to Heroku Heroku Buildpack BuildPack LINK FFMPEG here IMAGEMAGICK here FOR TERMUX USER Type mentioned bel

Dec 20, 2022

Inspired by https://github.com/woochanleee/project-tree-generator

Project tree workflow Introduction Project tree workflow is automatically changes the project directory structure in your README.md or any text file.

Jan 2, 2023

Reference for How to Write an Open Source JavaScript Library - https://egghead.io/series/how-to-write-an-open-source-javascript-library

Reference for How to Write an Open Source JavaScript Library The purpose of this document is to serve as a reference for: How to Write an Open Source

Dec 24, 2022

Zero dependencies, lightweight, and asynchronous https requests package.

Zero dependencies, lightweight, and asynchronous https requests package.

This project is a Work in Progress and currently in development. The API is subject to change without warning. A small fetching package for super simp

Dec 8, 2022

A knowledge management garden for https://obsidian.md, in which to grow your ideas

A knowledge management garden for https://obsidian.md, in which to grow your ideas

🪨 🌱 The Obsidian Garden Welcome to your Knowledge Garden The Obsidian Garden is both guide in helping you create your own knowledge system, and a kn

Dec 27, 2022

Exemplo de como deve ser implementação de nirvana do teste de contrato com Pact seguindo todas as práticas descritas em https://docs.pact.io/pact_nirvana

Exemplo de como deve ser implementação de nirvana do teste de contrato com Pact seguindo todas as práticas descritas em https://docs.pact.io/pact_nirvana

Exemplo de 'Nirvana' do teste de contrato Esse repositório exemplifica as melhores implementações de teste de contrato, atingindo o nirvana e tendo co

Nov 28, 2022

Contains the codes for https://SolAiNetwork.com

Solana Artificial Intelligence Network SINE is the token to get your work done using Artificial Intelligence and crowd-sourcing. We are creating a pla

Aug 1, 2022

A set of APIs for handling HTTP and HTTPS requests with Deno 🐿️ 🦕

oak commons A set of APIs that are common to HTTP/HTTPS servers. HTTP Methods (/method.ts) A set of APIs for dealing with HTTP methods. Content Negoti

May 23, 2022

A fresh look for the Hackage. Follow us: https://twitter.com/HackageUI

A fresh look for the Hackage. Follow us: https://twitter.com/HackageUI

Hackage UI Fresh look for the https://hackage.haskell.org/. Work in progress. Search Search on Hoogle. Search on Hackage. Full-text search integration

Dec 28, 2022
Releases(v1.0.4)
  • v1.0.4(Oct 14, 2022)

  • v1.0.4-beta.1(Oct 13, 2022)

  • v1.0.3(Oct 12, 2022)

    Ported to typescript, it transpiles without error but some types are left as any or unknown exploring the original cli code shows that it is only a work in progress (all options are not passed to plugins)

    Full Changelog: https://github.com/highcanfly-club/fontminify/compare/v1.0.2...v1.0.3

    Source code(tar.gz)
    Source code(zip)
  • v1.0.3-beta.2(Oct 12, 2022)

    pre-release, ported to typescript, it transpiles without error but some types are left as any or unknown exploring the original cli code shows that it is only a work in progress (all options are not passed to plugins)

    Source code(tar.gz)
    Source code(zip)
  • v1.0.3-beta(Oct 12, 2022)

    pre-release, ported to typescript, it transpiles without error but some types are left as any or unknown exploring the original cli code shows that it is only a work in progress (all options are not passed to plugins)

    Source code(tar.gz)
    Source code(zip)
  • v1.0.2(Oct 11, 2022)

Owner
Association High Can Fly
Providing paragliding tools
Association High Can Fly
The Remix version of the fakebooks app demonstrated on https://remix.run. Check out the CRA version: https://github.com/kentcdodds/fakebooks-cra

Remix Fakebooks App This is a (very) simple implementation of the fakebooks mock app demonstrated on remix.run. There is no database, but there is an

Kent C. Dodds 61 Dec 22, 2022
This work is an overnight with 84436, an overlay code forked from Osu! community but for ``flag of Vietnam`` in r/place 2022

flag-of-vietnam-rplace2022 This work is a overnight with 84436, an overlay code forked from Osu! community but for flag of Vietnam Installation Xài Ta

Đoàn Đình Toàn 10 Nov 2, 2022
Framework for interacting with instagrams private api in a usable manner (forked from andre's work and improved and fixed)

node-ig-framework Framework for interacting with instagrams private api in a usable manner (forked from andre's work and improved and fixed) Installat

nine ecksen 3 Dec 31, 2022
Macarena finance is a simple UI for Yearn Finance, made to be forked!

Macarena Finance Macarena finance is a simple UI for Yearn Finance, made to be forked! Running your own instance of Yearn makes you eligible to earn f

yearn 17 Oct 1, 2022
Custom Vitest matchers to test the state of the DOM, forked from jest-dom.

vitest-dom Custom Vitest matchers to test the state of the DOM This library is a fork of @testing-library/jest-dom. It shares that library's implement

Chance Strickland 14 Dec 16, 2022
📦 🍣 Zero-config JS bundler for ESM, CommonJS, and .d.ts outputs. (Forked from pkgroll)

?? ?? puild (A fork of pkgroll) Write your code in ESM & TypeScript and bundle it to get ESM, CommonJS, and type declaration outputs with a single com

ʀᴀʏ 6 Sep 6, 2022
Forked from hayes0724/shopify-packer Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, compatible with Slate and existing websites.

Shopify Packer Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, comes with starter themes and com

Web & Mobile | eCommerce | Full-Stack Developer 4 Nov 24, 2022
GitHub starter project link: https://github.com/buildspace/waveportal-starter-project

Running React on Repl.it React is a popular JavaScript library for building user interfaces. Vite is a blazing fast frontend build tool that includes

MD Rafi Uddin 0 Jun 5, 2022
NFT Game Starter Project: https://github.com/buildspace/buildspace-nft-game-starter

Running React on Repl.it React is a popular JavaScript library for building user interfaces. Vite is a blazing fast frontend build tool that includes

Zahuis 2 Feb 11, 2022
AFrame port of Lamina (https://github.com/pmndrs/lamina)

AFrame-Lamina Automated port of Lamina to AFrame <a-lamina geometry="" material="shader:lamina;color:white;lighting:phong;" position="-1 0.5 -3" rotat

Ada Rose Cannon 4 Apr 6, 2022