前言

在使用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('抱歉,不支持的浏览器');
}

参考

最后修改:2021 年 03 月 13 日
如果觉得我的文章对你有用,请随意赞赏