划时代的字体切割工具,CJK与任何字符!支持 otf、ttf、woff2 字体多线程切割,完美地细颗粒度地进行包大小控制。A revolutionary font subetter that supports CJK and any characters! It enables multi-threaded subset of otf, ttf, and woff2 fonts, allowing for precise control over package size.
APACHE-2.0 License
中文网字计划 | Github | 在线使用 |
---|
cn-font-split
是 中文网字计划 所使用的字体分包工具,通过高性能的各种技术将庞大的字体包拆分为适合网络分发的版本。经过四个版本的字体研究与代码迭代,这项技术在我们的网站中得到了充分的应用,实现了中文字体在 Web 领域的加载速度与效率的双飞跃。
cn-font-split
不仅支持中文,针对于 CJK 皆有优化,可以根据实际字体包内字符进行分包。
自研多线程
+ (WebAssembly
|Native
) 分包速度极快;Opentype Feature 支持情况 支持 95 | 部分支持 9| 等待测试 20
Nodejs | Deno | Chrome | FireFox | Safari | Bun |
---|---|---|---|---|---|
✅^18.0.0 ⏺️ ^14.0.0 | ✅^1.30.0 | ✅^102 | ✅^114 | ✅^15 | ⏺️ ^1.0.4 |
Nodejs 版本推荐使用 大于 18 的版本。如低级版本或者其他的设备环境,参考兼容性章节。
npm install cn-font-split
npm install cn-font-split -g # 如果使用命令行,推荐全局安装
# -i 输入 -o 输出
cn-font-split -i=../demo/public/SmileySans-Oblique.ttf -o=./temp
# 参数与正常 js 操作是一样的,深层json则需要使用 . 来赋值
cn-font-split -i=../demo/public/SmileySans-Oblique.ttf -o=./temp --renameOutputFont='[hash:10][ext]' --css.fontWeight=700
# 显示输入参数说明,虽然会显示 typescript 类型。。。
cn-font-split -h
import { fontSplit } from 'cn-font-split';
fontSplit({
FontPath: './fonts/SourceHanSerifCN-Bold.ttf', // 推荐使用 otf、ttf 字体
destFold: './build',
chunkSize: 60 * 1024, // 如果需要的话,自己定制吧
testHTML: true, // 输出一份 html 报告文件
reporter: true, // 输出 json 格式报告
previewImage: {}, // 只要填入 这个参数,就会进行图片预览文件生成,文件为 SVG 格式
css: {
// 覆盖默认的 css 设置,一般不需要进行更改
// fontFamily: "站酷庆科黄油体",
// fontWeight: 400,
},
// 自定义分包输出的文件名为 10 位短哈希,或者使用自增索引: '[index][ext]'
renameOutputFont: '[hash:10][ext]',
// 或者也可以像这样传入一个函数返回自定义的文件名
// renameOutputFont: ({ transferred, ext, index }) => {
// return index.toString(36) + ext
// }
});
- build
... // 很多字体分包,hash 命名
- index.html // 用于展示打包分析报告, 需要开一个服务端口进行查看
- reporter.json // 打包信息
- result.css // css 入口,引入这个 css 文件即可使用字体包
cn-font-split 在 v6 版本进行了插件化重构,提供了一些高度自定义的方法, 你可以在下面的代码中获取灵感。
pnpm -C ./packages/font-sharp build
version: ✅^18.0.0 ⏺️ ^14.0.0 可以使用一些 polyfill Nodejs 使用
version: ✅ Chrome 102; FireFox 114; Safari 15 浏览器使用
version: ✅^1.30.0 Deno 使用
deno run -A --no-npm index.mjs
避免。version: ⏺️^1.0.4 Bun 使用
Apache-2.0