1 .新建一個font.css檔案

把需要自定義放在字型列表的字型放在這個css中，選擇器如下。data-value後的值是要拼在.ql-font-後面的，需要保持一致。

[data-value=a] ql-font-a

content指的是字型列表中的選項

.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: "宋體";
    font-family: "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: "黑體";
    font-family: "SimHei";
}
.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: "微軟雅黑";
    font-family: "Microsoft YaHei";
}
.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: "楷體";
    font-family: "KaiTi";
}
.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: "仿宋";
    font-family: "FangSong";
}
.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";
    font-family: "Arial";
}
.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";
    font-family: "Times New Roman";
}
.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";
    font-family: "sans-serif";
}
 
.ql-font-SimSun {
      font-family: "SimSun";
}
.ql-font-SimHei {
      font-family: "SimHei";
}
.ql-font-Microsoft-YaHei {
      font-family: "Microsoft YaHei";
}
.ql-font-KaiTi {
      font-family: "KaiTi";
}
.ql-font-FangSong {
      font-family: "FangSong";
}
.ql-font-Arial {
      font-family: "Arial";
}
.ql-font-Times-New-Roman {
      font-family: "Times New Roman";
}
.ql-font-sans-serif {
      font-family: "sans-serif";
}
 

2 .在使用的檔案裡引入

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
    @import './style/font';
</style>

3.在toolsbar中配置字型

<script>
    import { quillEditor } from 'vue-quill-editor
 
'
    import * as Quill from 'quill'  //引入編輯器
    
    //quill編輯器的字型
    var fonts = ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','Times-New-Roman','sans-serif'];  
    var Font = Quill.import('formats/font');  
    Font.whitelist = fonts; //將字型加入到白名單 
    Quill.register(Font, true);
    
    export 
 
default {
        data:function(){
            return{
                content:'',
                editorOption:{
                    modules:{
                        toolbar:[
                              ['bold', 'italic', 'underline', 'strike'], //加粗，斜體，下劃線，刪除線

        　　　　　　　　　　　　['blockquote', 'code-block'], //引用，程式碼塊
        　　　　　　　　　　　　[{'header': 1}, {'header': 2}],// 標題，鍵值對的形式；1、2表示字型大小
        　　　　　　　　　　　　[{'list': 'ordered'}, {'list': 'bullet'}], //列表
        　　　　　　　　　　　　[{'script': 'sub'}, {'script': 'super'}],// 上下標
       　　　　　　　　　　　　 [{'indent': '-1'}, {'indent': '+1'}],// 縮排
       　　　　　　　　　　　　 [{'direction': 'rtl'}],// 文字方向
       　　　　　　　　　　　　 [{'size': ['small', false, 'large', 'huge']}],// 字型大小
      　　　　　　　　　　　　  [{'header': [1, 2, 3, 4, 5, 6, false]}],//幾級標題
      　　　　　　　　　　　　  [{'color': []}, {'background': []}],// 字型顏色，字型背景顏色
      　　　　　　　　　　　　  // [{'font': []}], //字型
       　　　　　　　　　　　　 [{ 'font': fonts }],       //字型，把上面定義的字型陣列放進來
       　　　　　　　　　　　　 [{'align': []}], //對齊方式
     　　　　　　　　　　　　   ['clean'],//清除字型樣式
        　　　　　　　　　　　　['link', 'image', 'video'], //上傳圖片、上傳視訊

 ] }, theme:'snow' } } } } </script>

效果如下：