🌍 V2EX
[分享创造] 让 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({ ...