是否能实现方法监听固定文字的字体加载完成事件

[zhengyangkang]

首先非常感谢作者，这个库非常好用。 目前我们有个需求在页面打开的时候需要把确定的几个文字按字体显示在画布上，目前是先把文字插入到dom，并且定时器1.5秒后渲染画布，但是生产环境有的客户手机还是会加载不出来部分字体，想问下是否有办法监听固定的文字字体加载完成回调事件。

[voderl]

如果是需要确定的字体展示在画布上的话，建议将确定的字体打包成子集，通过监听该文件的加载事件来实现在加载完成后绘制。

const myFont = new FontFace('myFont', 'url(./custom.ttf)')

myFont.load().then(font => {
  document.fonts.add(font);
  // drawToCanvas
})

当然直接使用该项目生成的子集文件也是可以的，只不过需要在客户端解析下需要加载哪些子集文件

// 以下方法暂未实现
loadFont("指定文案").then(() => {
  // drawToCanvas
})

// loadFont 可能需要做的内容是遍历指定字体的 unicodeRange，匹配文案对应的字体子集文件并加载，在需要的文件加载完成后再去绘制
// 参考下面的实现
[...document.fonts.keys()].find((fontSet) => {
   // 匹配对应的字体名字，并解析 unicodeRange
});

loadFont 方法还没实现，如果觉得上面的方法可以满足需求没有问题的话，我今天下午可以实现一版。

[zhengyangkang]

我们固定的字体是后端返回的，第一种方法不合适，第二种方法可以，非常感谢。

[voderl]

hi，又搜索了一下相关实现，发现 document.fonts 已经提供了加载对应文案字体的功能，直接用下面的方法就可以啦

// 需要字体 css 文件先加载完成
document.fonts
  .load(`14px ${fontFamily}`, '指定文案' )
  .then(() => {
    ctx.fillText('指定文案');
  });