最近在改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 => {
// 字體加載失敗
});
參考：