vue-quill-editor 的样式文之fontFamily

/* 对应添加字体样式 */
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: 'Arial';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="宋体"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="宋体"]::before {
  content: "宋体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="黑体"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="黑体"]::before {
  content: "黑体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="楷体"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="楷体"]::before {
  content: "楷体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="微软雅黑"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="微软雅黑"]::before {
  content: "微软雅黑";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="幼圆"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="幼圆"]::before {
  content: "幼圆";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Arial']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Arial']::before {
  content: 'Arial';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Microsoft-YaHei']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Microsoft-YaHei']::before {
  content: 'Microsoft-YaHei';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='FangSong']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='FangSong']::before {
  content: 'FangSong';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='KaiTi']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='KaiTi']::before {
  content: 'KaiTi';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimSun']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimSun']::before {
  content: 'SimSun';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimHei']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimHei']::before {
  content: 'SimHei';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='sans-serif']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='sans-serif']::before {
  content: 'sans-serif';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='OpenSans']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='OpenSans']::before {
  content: 'OpenSans';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Times-New-Roman']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Times-New-Roman']::before {
  content: 'Times-New-Roman';
}

/**设置默认字体显示
**/
.ql-container {
  font-family: 'Arial';
}

/* 自定义相关样式 */
.ql-editor .ql-font-宋体 {
  font-family: '宋体';
}

.ql-editor .ql-font-黑体 {
  font-family: '黑体';
}

.ql-editor .ql-font-楷体 {
  font-family: '楷体';
}

.ql-editor .ql-font-微软雅黑 {
  font-family: '微软雅黑';
}

.ql-editor .ql-font-幼圆 {
  font-family: '幼圆';
}

.ql-editor .ql-font-Arial {
  font-family: 'Arial';
}

.ql-editor .ql-font-Microsoft-YaHei {
  font-family: 'Microsoft YaHei';
}

.ql-editor .ql-font-FangSong {
  font-family: 'FangSong';
}

.ql-editor .ql-font-KaiTi {
  font-family: 'KaiTi';
}

.ql-editor .ql-font-SimSun {
  font-family: 'SimSun';
}

.ql-editor .ql-font-SimHei {
  font-family: 'SimHei';
}

.ql-editor .ql-font-sans-serif {
  font-family: 'sans-serif';
}

.ql-editor .ql-font-OpenSans {
  font-family: 'Open Sans';
}

.ql-editor .ql-font-Times-New-Roman {
  font-family: 'Times New Roman';
}