Quill 后台富文本设置自定义字体(包含引入第三方字体)

一、建一个统一引入字体的文件(模块规范化,便于后期维护)

在根目录 /src 下，找到放置静态资源的文件夹 /assets。
既然是引入字体相关的，那就建立 /font/font.css 文件

▲如图：

【/src/assets/font/font.css】

@font-face {
    font-family: '您自定义的字体名'; // 这里注意，之后如果要用这个字体，就以这个字体名字为准
    src: url('您的字体地址.ttf'); // 这里字体文件的地址可以是本地的(取决于当前的这个字体文件是否放在项目的目录下)，也可以是外部的(放在了你们自己的静态资源服务器上)，各有利弊；
}

二、主入口文件main.js引入字体文件font.css

这里的目的懂的都懂，main.js引入font.css文件之后，在当前的项目下font.css中自定义引入第三方的字体全局可用

【main.js】

 import '@/assets/font/font.css' // 引入字体文件

三、重头戏: Quill组件相关

建议看这里的话，暂时先了解一下Quill富文本的介绍及基本配置
在自定义工具栏toolbar中可知，字体对应的是[{ ‘font’: [] }]，
( font是有默认值的,只是我们可能会不需要，想要了解的建议看一下/node_modules/quill文件夹下的/formats/fonts.js 及 /dist文件夹下的三个css文件)

3-1 在需要引入富文本的【xxx.vue】文件中

import Quill from "quill";  //引入编辑器
//quill编辑器的字体
let fontArr = ['SimSun', 'Microsoft-YaHei','KaiTi','自定义的字体名字'];  // 这里的顺序注意一下
let Font = Quill.import('formats/font');  
Font.whitelist = fontArr ; // 将字体加入到白名单 ,这里可在 /formats/fonts.js 中了解
Quill.register(Font, true);

data(){
	return {
		toolbarOptions: [[{ 'font': fontArr }]] // 在工具栏配置中传入想要的字体集
	}
}

3-2 在Editor组件(可以理解是Quill富文本的主组件)中，写.vue文件中我们传入的字体集对应的css样式

【这是刚才在 xxx.vue文件中我们加入白名单的字体集 】
let fonts = ['SimSun', 'Microsoft-YaHei','KaiTi','自定义的字体名字'];  // 这里的顺序注意一下

【Editor组件】

<style>
  .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' !important;
  }
  .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: '微软雅黑';
  }
  .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' !important;
  }
  .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: "您自定义的字体名";
    font-family: '您自定义的字体名';
  }
  /*  设置每个字体的css字体样式 */
  .ql-font-SimSun {
    font-family: 'SimSun';
  }
  .ql-font-Microsoft-YaHei {
    font-family: '微软雅黑';
  }
  .ql-font-KaiTi {
    font-family: 'KaiTi';
  }
  .ql-font-您自定义的字体名 {
    font-family: '您自定义的字体名';
  }
</style>

▲看下效果：