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字体资源链接