font-subset

WEB字体子集化工具，提速字体加载/按需加载，内置谷歌、哔哩哔哩、小米的子集化方案

安装

npm install @zeir/font-subset --save
//or
pnpm add @zeir/font-subset

使用

首先将字体重命名为 ${fontFamily}-${fontSubFamily}.ttf 例如 MiSans-Regular.ttf，放在 ./source-fonts 目录（仅支持.ttf）

// index.js
import { fontSubset } from "@zeir/font-subset";
import glob from "glob";
import path from "path";

const __dirname = path.resolve();

const fontFiles = glob.sync('./source-fonts/*.ttf').map((file) => path.resolve(__dirname, './', file));

// 使用内置子集化方案
fontSubset({
  fontFiles,
  type: 'google',  // 'google' || 'bili' || 'xiaomi'
});

// 使用自定义子集化方案
fontSubset({
  fontFiles,
  customSubset: [[23,665,7989],[9856,67453]],  // [[unicode的十进制数字(子集组)],[unicode的十进制数字(子集组)],...]
});

// 添加CDN基础链接
fontSubset({
  fontFiles,
  type: 'google',  // 'google' || 'bili' || 'xiaomi'
  baseUrl: 'cdn.xxxxx.com/font/',
});

字体生成

node ./index.js


------ 当前使用 谷歌 子集化方案 ------
[ start ] ● 开始切片...
[ ok ] > MiSans-Regular.0.woff2
[ ok ] > MiSans-Regular.1.woff2
...
[ ok ] > MiSans-Regular.94.woff2
[ ok ] > MiSans-Regular.95.woff2
[ ok ] > MiSans-Regular.css
[ finish ] ✓ 已全部完成切片！

以上就子集化完成啦！字体文件在./fonts/${fontFamily} 目录里。

Reference

misans
中文 web font 切割工具