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

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 })

)

插件会：

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


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


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


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

服务端生图也能用

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