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

插件会：

扫描画布里所有 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 的字体文件，现在每个请求只拉自己那几个字的子集。