前言
在使用canvas写在线模板生成，需要用到自定义字体，毕竟默认的字体不是很好看，首先想到的是动态添加css 的方式加载字体文件，但是很快就发现了很多问题，经过一番查询发现document.fonts API可以实现需求，不足的是，IE并不支持。在此记录下使用方法。
//判断浏览器是否支持
if (document.fonts) {
// 定义加载的字体
const notoSansRegular = new FontFace('Noto Sans Regular', 'url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/144736/NotoSans-Regular.woff2), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/144736/NotoSans-Regular.woff)');
document.fonts.add(notoSansRegular);
console.info('Current status', notoSansRegular.status);
notoSansRegular.load();
console.info('Current status', notoSansRegular.status);
notoSansRegular.loaded.then((fontFace) => {
//加载成功
console.info('Current status', fontFace.status);
console.log(fontFace.family, 'loaded successfully.');
document.body.classList.add('noto-regular-loaded');
}, (fontFace) => {
//加载失败
console.error('Current status', notoSansRegular.status);
});
//全部字体加载完毕
document.fonts.ready.then((fontFaceSet) => {
console.log(fontFaceSet.size, 'FontFaces loaded.');
});
} else {
console.error('抱歉，不支持的浏览器');
}