最近在改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 => {
// 字体加载失败
});
参考：