canvas动态加载第三方字体

最近在改canvas模拟播放视频，其中有在视频中插入文字的需求，通过canvas绘制文字发现，字体的加载方式和正常加载字体有些不同。

 

一般字体加载，用 css 的 @font-face 即可，比如

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}

在字体加载完毕后会自动替换元素中的内容，但使用 canvas 绘制文字的时候，如果绘制当前时刻并没有加载完成对应字体，绘制结果就会失败。

因此，使用 canvas 绘制文字的话，需要提前加载字体。在查询相关资料后，发现 document.fonts API可以实现需求，不足的是，IE并不支持。在此记录下使用方法。

// 浏览器是否支持
if (!document.fonts) {
　　alert('抱歉，当前浏览器兼容性较差，会影响操作体验，请更换最新版谷歌浏览器进行操作');
}

// 检验字体是否已经安装
if (document.fonts.check(`16px ${name}`, '上')) {
    return Promise.resolve(true);
}

// 加载字体
const fontface = new FontFace(name, `url(xxx)`);
document.fonts.add(fontface);
fontface.load();

fontface.loaded.then(() => {
    // 字体加载完毕，可使用
}).catch(err => {
    // 字体加载失败
});

参考：

• Mozilla介绍: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/fonts
• css-font-loading; https://lists.w3.org/Archives/Public/www-style/2015May/0002.html
• demo: https://codepen.io/matuzo/pen/jrzyYA?editors=1111
• https://stackoverflow.com/questions/1330825/preloading-font-face-fonts