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

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


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

- 整包中文字体 10MB+，`FontFace` 加载又慢流量消耗又大
- 裁好子集再上传？改一个字就要重新裁一次然后发版部署

开源项目 web-font 在服务端解决了裁剪问题（任意字体、任意字符、毫秒级出子集）。现在接到了 LeaferJS 上，做成了插件 **[leafer-x-webfont](https://www.npmjs.com/package/leafer-x-webfont)**。

## 简单接入

```javascript
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 双端同构**的。

```javascript
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/](https://webfont.shenzilong.cn)，免费、无需注册，插件默认就指向它
- **自部署**：web-font 一条 Docker 命令拉起，数据不出内网
- 插件源码：[leafer-x-webfont （ MIT ）](https://github.com/2234839/web-font/tree/new/packages/leafer-x-webfont)
- 在线体验（改字/切字体/导出 PNG ，开 DevTools 看子集体积）：[webfont.shenzilong.cn/leafer-demo](https://www.v2ex.com/t/webfont.shenzilong.cn/leafer-demo)

## 写在最后

中文字体在 Web 世界的处境一直很尴尬：设计很好看但用户设备上没有对应字体，引入全量字体包流量又消耗不起。

按需子集化是这个问题的正解，我来把他做到极致简单——写一行 `new WebFontPlugin(leafer)` 就完事了。

如果你在做海报编辑器、H5 生成器、富文本画布，欢迎试用和提 issue。觉得有用的话，给个 Star 是对我们最大的鼓励 🌟

*web-font 是一个完整的开源字体子集化服务（在线裁剪 / 增量加载 SDK / Leafer 插件 / 自部署 Docker ），欢迎 Star：* *[github.com/2234839/web-font](https://www.v2ex.com/t/github.com/2234839/web-font)*

---

原文链接：[点击查看](https://www.v2ex.com/t/1234858)