vue动态加载在线字体，及渲染

字体为后台接口返回，主要参数为字体code，及包地址，添加到头部

    /**
    * @description: 获取字体列表
    * @param {*}
    * @return: {*}
    * @author: 
    */
      const getSubFontList = ()=>{
        getSubtitlesFont().then(res=>{
        let fonts = res.result
              for (var i = 0; i < fonts.length; i++) {
                let style = document.createElement('style');
                style.type = "text/css";  
                  let text = ` @font-face {
                  font-family:'${fonts[i].fontCode}';
                  src:url('${ fonts[i].packageUrl}')
                  }`
                  console.log(text)
                style.innerText = text;
                document.getElementsByTagName('head')[0].appendChild(style)
              }         
        })
      }

字体渲染

          <div class="tempImg" @click="clickModel(item)"><span :style="
                   `color:${item.fontColor};
                    font-family:${item.fontCode};
                    background-color:${item.bgColor};
                    background-color:${item.bgColor};
                    -webkit-text-stroke: ${item.strockOpacity}px ${item.strockColor};`">文字</span></div>

效果