fabricjs 引入三方字体包，判断字体包是否加载完成

终于解决了fabricjs引入三方字体包画布渲染的问题，有需要的可以看看！vue项目。

1、index.html:
(1) 中引入fontfaceobserver：

 <script src="https://cdn.bootcdn.net/ajax/libs/fontfaceobserver/2.1.0/fontfaceobserver.js"></script>

(2)app.vue:

<style lang="scss" scoped>
@import url('./assets/font/font.css');
</style>

2、字体改变事件：

<!-- 图文编辑区 -->
<div class="canvasLayout">
	<canvas id="imageEffectCanvas"></canvas>
</div>
<div style="position: inherit;" class="item">
 <span class="itemTitle">字体</span>
 <template>
     <el-select class="font-wrap" @change="fontFamilyChangeHandle" style="width:150px;" size='mini' v-model="activeObjectData.fontFamily" placeholder="请选择">
         <el-option-group
         v-for="(item,index) in fontArrJsonList"
         :key="index"
         :label="item.type">
         <el-option 
             v-for="(tem,idx) in item.list"
             :key="idx"
             :label="tem.name"
             :value="tem.font">
             <img class="font-img-icon" :src="tem.img_black" alt="">
             <!-- <span :style="{'font-family' : tem.font,'font-size': '20px'}">{{tem.name}}</span> -->
         </el-option>
         </el-option-group>
     </el-select>
 </template>
</div>

3、js中的事件

<script>
let fontArrJson = require('@/utils/canvasNavs.json');
let imageEffectCanvas = '';
// 字体改变事件
created() {
	this.fontArrJsonList = fontArrJson;
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
    this.initImageEffectCanvas();
},
methods: {
        // 初始化画布
   initImageEffectCanvas() {
       imageEffectCanvas = new fabric.Canvas('imageEffectCanvas',
       {
           width: '1080',
           height: '1920',
           backgroundColor: '#ffffff',
       });
       imageEffectCanvas.preserveObjectStacking=true;
   },
  fontFamilyChangeHandle(value) {
      var myfont = new FontFaceObserver(value);
      myfont.load().then(()=>{
          var level = imageEffectCanvas.getActiveObject();
          this.activeObjectData = level;

          this.$set(this.activeObjectData,'fontFamily',value)
          this.$set(this.activeObjectData,'text',this.activeObjectData.text)
     	  imageEffectCanvas.renderAll()
      })
  },
}
</script>

4、其他附件：(有需要的可以留言私聊我，分享字体包)
（1）canvasNavs.json

(2)font.css