加载网络字体 - @font-face

前段时间用到了自定义字体，没怎么在意，直接在assets 静态资源文件夹中放ttf 字体文件，使用的时候@font-face 加载即可：

 

@font-face {  
    font-family: '思源黑体';
    src: url('思源黑体.ttf'); // 字体文件与该css文件放在同级文件夹内
}

昨天又用到了自定义字体，但需要是加载用户自己上传的字体，那么放在项目资源文件夹中就不能满足需求了。

解决方法也是使用@font-face url 加载，稍微改动一下，在加载首页面的时候就把用户用到的字体全部加载出来，后续用户就可以自由使用自己的字体了。

 

    // 加载字体 初始化的时候调用此方法
     async addFontface () {
      let rule = '';
    // 调用接口
      const res = await getFontList({ userId: this.userId });
      if (res.success) {
        res.data.forEach(item => {
          rule += '@font-face {font-family:"' + item.fontName + '";src:url("' + item.fontUrl + '");}'
        });
        // 创建style 标签 写入字体信息
        const sty = document.createElement('style');
        sty.type = 'text/css';
        sty.innerHTML = rule;
        document.getElementsByTagName('head')[0].appendChild(sty);
      }
    }

// 使用字体
.class {
font-family:'思源黑体';
}