js动态加载字体

之前做类似易企秀的项目需要动态引入字体,上代码

### 按需加载方式
    initFont() {
        let fontList = [
            {
                fontUrl: "**.ttf",
                fontFamily: "myFirstFont",
                label: "草体"
            }
        ];
        let code = fontList.reduce((accumulator, currentValue) => {
            return accumulator + `@font-face { font-family: ${currentValue.fontFamily};src: url('${currentValue.fontUrl}'); }`;
        }, "");
        var style = document.createElement("style");
        style.type = "text/css";
        style.rel = "stylesheet";
        style.appendChild(document.createTextNode(code));
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(style);
        console.warn("字体库加载完成!", code);
    }

全部加载方式

initFont() {
              let fontList = [
                {
                    fontUrl: "**.ttf",
                    fontFamily: "myFirstFont",
                    label: "草体"
                }
            ];
                  for (let i in fontList ) {
                    loadFonts(records[i].fontFamily, records[i].fontUrl);
                }
                async function loadFonts(fontFamily, fontUrl) {
                    const font = new FontFace(fontFamily, `url(${fontUrl})`);
                    await font.load();
                    document.fonts.add(font);
                }
}

参数说明

  • fontList为字体资源列表,然后在需要使用的地方动态设置fontFamily就行了
  • fontUrl 为ttf字体资源链接
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容