让 Canvas 用上任意中文字体：我给 LeaferJS 写了个按需加载插件

llej

6 个字 6KB ，而不是 16MB 。画布里的 Text 用什么字，就只加载那几个字。



做海报编辑器、设计工具、数据大屏的同学一定撞过这堵墙：产品想要"国潮古籍体"，设计稿里的标题美得冒泡，一到实际前端环境就各种问题

整包中文字体 10MB+，FontFace 加载又慢流量消耗又大

裁好子集再上传？改一个字就要重新裁一次然后发版部署

开源项目 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 })
)

插件会：

扫描画布里所有 Text，收集「字体 × 用到的字符」

只把这几个字符发给服务端，毫秒级裁出 KB 级子集字体

注册为 FontFace，触发画布重绘——你的代码无需任何感知

增量请求：文字改变只对新增的字符发请求

服务端生图也能用

插件现在是浏览器 / 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*

ion1ze

不错下次试试

llej

@ion1ze 今天刚刚被 leafer 官方收录至社区插件列表了🎉