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} 目录里。