3分钟掌握Quill字体格式化：让编辑器秒变专业排版工具
项目地址: https://gitcode.com/gh_mirrors/qui/quill 你是否还在为富文本编辑器的字体样式单一而烦恼？想让文章标题更醒目、正文更易读，却受制于编辑器功能简陋？本文将带你全面掌握Quill编辑器的字体格式化技巧，无需复杂代码，3分钟即可打造媲美专业排版软件的文本样式。读完本文你将学会：自定义字体家族、调整字号大小、设置文字颜色，以及如何保存和复用精美排版样式。
字体格式化核心原理
Quill通过Format（格式）系统实现文本样式定制，其中字体相关功能由font.ts模块提供核心支持。该模块定义了字体格式化的作用范围（仅内联文本）和允许使用的字体家族白名单。
核心代码实现如下，通过ClassAttributor和StyleAttributor实现字体样式的应用与管理：
// 字体格式化核心实现 [packages/quill/src/formats/font.ts](https://link.gitcode.com/i/9bcdab97bdf51c2884f8bdb132491860)
const config = {
scope: Scope.INLINE, // 仅作用于内联文本
whitelist: ['serif', 'monospace'] // 默认允许的字体家族
};
const FontClass = new ClassAttributor('font', 'ql-font', config);
const FontStyle = new FontStyleAttributor('font', 'font-family', config);
基础字体设置：3步打造专业文本
1. 引入Quill与字体格式化模块
使用国内CDN加速引入Quill核心库和默认主题，确保在国内网络环境下快速加载：
<!-- 引入Quill编辑器 -->
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.min.js"></script>
2. 配置字体工具栏
通过简单的配置即可在工具栏添加字体选择器。以下代码将创建包含字体家族、字号和颜色选择器的完整工具栏：
// 工具栏配置示例
const toolbarOptions = [
[{ 'font': ['serif', 'monospace', 'sans-serif'] }], // 字体家族选择
[{ 'size': ['small', false, 'large', 'huge'] }], // 字号选择
[{ 'color': [] }, { 'background': [] }] // 文字颜色和背景色
];
// 初始化编辑器
const quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: toolbarOptions
}
});
工具栏渲染效果由toolbar.ts模块控制，通过添加ql-font类实现字体选择功能，具体实现可参考工具栏源码。
3. 应用字体格式
使用格式化API可通过代码方式精确控制文本样式。以下示例展示如何将选中文字设置为衬线字体、红色且增大字号：
// 获取当前选区
const selection = quill.getSelection();
if (selection) {
// 应用多种字体格式
quill.formatText(selection.index, selection.length, {
'font': 'serif', // 设置字体家族为衬线字体
'color': '#ff0000', // 设置文字颜色为红色
'size': 'large' // 设置字号为大号
});
}
高级定制：突破默认限制
扩展字体家族白名单
Quill默认只允许使用'serif'和'monospace'两种字体，通过修改font.ts中的whitelist配置可以添加更多字体选项：
// 修改字体白名单 [packages/quill/src/formats/font.ts](https://link.gitcode.com/i/9bcdab97bdf51c2884f8bdb132491860)
const config = {
scope: Scope.INLINE,
whitelist: ['serif', 'monospace', 'simhei', 'microsoftyahei'] // 添加中文字体
};
自定义字体大小
通过配置字号选择器，可以定义适合自己需求的字体大小选项：
// 自定义字号配置
[{ 'size': ['12px', '14px', '16px', '18px', '24px', '36px'] }]
实现字体样式的批量应用
结合Quill的Delta格式，可以保存和复用复杂的字体样式组合：
// 保存当前格式
const currentFormat = quill.getFormat();
// 后续应用保存的格式
quill.format(currentFormat);
常见问题与解决方案
字体设置不生效？
如果字体样式未按预期应用，请检查：
- 字体名称是否已添加到白名单（见font.ts配置）
- 是否正确引入了Quill的CSS文件
- 目标元素是否处于编辑器的有效选区范围内
如何移除字体格式？
使用false值可以清除已应用的字体格式：
// 清除选区内的字体格式
quill.format('font', false);
总结与进阶
通过本文介绍的方法，你已经掌握了Quill字体格式化的全部基础操作和高级技巧。从简单的工具栏配置到复杂的样式定制，Quill提供了灵活而强大的API支持。想要进一步提升排版效果，可以探索：
现在就打开你的Quill编辑器，尝试用新学到的字体格式化技巧美化你的文档吧！如有任何问题，欢迎查阅Quill官方文档或提交issue参与讨论。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
