关于在vue项目使用wangEditor4.0富文本插件字体配置后失效问题

不知道大家有没有遇到过，在使用wangEditor富文本插件的时候，明明已经配置字体，却没法生效的情况，例如：

<div class="wangeditor">
  <div ref="toolbar" class="toolbar" style="border-color: #d0d3d6"></div>
  <div ref="editor" class="text"></div>
</div>

this.editor = new wangEditor(this.$refs.editor)
this.editor.config.menus = [
        'fontName',  // 字体
      ]
    
// 创建富文本编辑器
this.editor.create()

以上的设置后，在我的项目里其实是没有生效的。之前百度过很多方法都没办法解决，最后想出了个方法，就是利用css选择器的方法把问题解决；

.wangeditor{
  .w-e-text {
    // 解决字体不生效问题
    [face="黑体"] {font-family: "黑体", serif;}
    [face="仿宋"] {font-family: "仿宋", serif;}
    [face="楷体"] {font-family: "楷体", serif;}
    [face="标楷体"] {font-family: "标楷体", serif;}
    [face="华文仿宋"] {font-family: "华文仿宋", serif;}
    [face="华文楷体"] {font-family: "华文楷体", serif;}
    [face="宋体"] {font-family: "宋体", serif;}
    [face="微软雅黑"] {font-family: "微软雅黑", serif;}
    [face="Arial"] {font-family: "Arial", serif;}
    [face="Tahoma"] {font-family: "Tahoma", serif;}
    [face="Verdana"] {font-family: "Verdana", serif;}
    [face="Times New Roman"] {font-family: "Times New Roman", serif;}
    [face="Courier New"] {font-family: "Courier New", serif;}
  }
}

 因为在wangEditor富文本里选择字体后，都会插入一个face的属性，并带上你所选的字体名称（细心的伙伴在F12选中对应的元素也会发现这点），所以利用这个css选择器的方法就可以把没生效的字体给呈现出来

当然，也有其他的一些伙伴会出现字体加粗、斜体等等没生效的问题，这种一般都是权重有关，单独在css里设置就好；

.wangeditor {
    .w-e-text {
        p{
          b{
            font-weight: bold !important;
          }
          i{
            font-style:italic !important;
          }
        }
        ul{
          li{
            list-style-type: disc;
            b{
              font-weight: bold !important;
            }
            i{
              font-style:italic !important;
            }
          }
        }
        ol{
          li{
            list-style-type: decimal;
            b{
              font-weight: bold !important;
            }
            i{
              font-style:italic !important;
            }
          }
        }
        tbody{
          b{
            font-weight: bold !important;
          }
          i{
            font-style:italic !important;
          }
        }
    }
}