vite-plugin-fontiny

Fontiny = Font + Tiny

A tool for removing unused Chinese characters from font files.

Currently only available for ttf format fonts, more will be supported in the future.

Roadmap

• [x] Generate an html page showing which Chinese characters have been retained and which have been eliminated.
• [ ] User-defined match characters rules.
• [ ] Supports more types of font files, like otf, woff, woff2, eot.

Installation

npm i -D vite-plugin-fontiny

Usage

// vite.config.ts
import Fontiny from 'vite-plugin-fontiny'

export default {
  plugins: [
    Fontiny({
      // options
      fontFileNames: ['Example-Font-Regular.ttf']
    }),
  ],
}

It will search for Chinese characters in your code, and remove the unused characters from the font file to reduce the size of the font file.

ZCOOLKuaiLe-Regular.ttf [3,188 KB]

↓ ↓ ↓ ↓ ↓ ↓

Search for Chinese characters in code:

[ "只", "有", "在", "代", "码", "中", "出", "现", "过", "的", "中", "文", "字", "符", "会", "在", "字", "体", "文", "件", "中", "保", "留", "在", "输", "入", "框", "中", "输", "入", "新", "文", "字", "查", "看", "效", "果" ]

↓ ↓ ↓ ↓ ↓ ↓

Remove unused characters from the font file.

↓ ↓ ↓ ↓ ↓ ↓

ZCOOLKuaiLe-Regular-Cx0eLuEs.ttf [24 KB]

The actual compression effect is affected by the number of Chinese characters used in the code.

Options

fontFileNames

Which fonts you want to be compressed.

type FontFileNames = string[]

required: true

include

Included range of scanned codes.

type Include = ReadonlyArray<string | RegExp> | string | RegExp | null | undefined

required: false default: undefined

exclude

Excluded range of scanned codes.

type Exclude = ReadonlyArray<string | RegExp> | string | RegExp | null | undefined

required: false default: undefined

visualizer

If true, a visual HTML will be generated in the project root directory.

type Visualizer = boolean

required: false default: false

Credits

Thanks to fonteditor-core, fontmin and @antfu