6 个字 6KB ，而不是 16MB 。画布里的 Text 用什么字，就只加载那几个字。
做海报编辑器、设计工具、数据大屏的同学一定撞过这堵墙：产品想要"国潮古籍体"，设计稿里的标题美得冒泡，一到实际前端环境就各种问题
开源项目 web-font 在服务端解决了裁剪问题（任意字体、任意字符、毫秒级出子集）。现在接到了 LeaferJS 上，做成了插件 **leafer-x-webfont**。
简单接入
import { Leafer, Text } from 'leafer-ui'
import { WebFontPlugin } from 'leafer-x-webfont'
const leafer = new Leafer({ view: window })
// 就这一行
const webfont = new WebFontPlugin(leafer)
leafer.add(
new Text({ text: '静心茶舍', fontFamily: '令东齐伋复刻体.ttf', fontSize: 96 })
)
插件会：
[ol]
[/ol]
服务端生图也能用
插件现在是浏览器 / Node 双端同构的。
import { Leafer, Text, useCanvas } from '@leafer-ui/node'
import { Canvas, loadImage } from '@napi-rs/canvas'
useCanvas('napi', { Canvas, loadImage })
const webfont = new WebFontPlugin(leafer)
海报机、批量证书生成、动态分享图……以前要往服务器塞几个 GB 的字体文件，现在每个请求只拉自己那几个字的子集。
免费用，也可自部署
公共服务：https://webfont.shenzilong.cn，免费、无需注册，插件默认就指向它
自部署：web-font 一条 Docker 命令拉起，数据不出内网
插件源码：leafer-x-webfont （ MIT ）
在线体验（改字/切字体/导出 PNG ，开 DevTools 看子集体积）：webfont.shenzilong.cn/leafer-demo
写在最后
中文字体在 Web 世界的处境一直很尴尬：设计很好看但用户设备上没有对应字体，引入全量字体包流量又消耗不起。
按需子集化是这个问题的正解，我来把他做到极致简单——写一行 new WebFontPlugin(leafer) 就完事了。
如果你在做海报编辑器、H5 生成器、富文本画布，欢迎试用和提 issue 。觉得有用的话，给个 Star 是对我们最大的鼓励 🌟
web-font 是一个完整的开源字体子集化服务（在线裁剪 / 增量加载 SDK / Leafer 插件 / 自部署 Docker ），欢迎 Star：*github.com/2234839/web-font*
