如何在Angular项目中为Quill富文本编辑器添加字体

步骤1：引入Roboto字体 #

首先确保Roboto字体可被应用加载，最简单的方式是在项目index.html的<head>标签中添加字体引用：

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

若需本地部署字体，可在全局样式文件（如styles.css）中通过@font-face引入本地字体文件。

步骤2：修改Quill配置 #

更新你的quillConfiguration，在字体下拉菜单中添加Roboto选项，并确保格式映射正确：

export const quillConfiguration = {
  toolbar: [
    ['bold', 'italic', 'underline', 'strike'],        // 切换按钮
    [{'header': 1}, {'header': 2}],                   // 自定义标题值
    [{'list': 'ordered'}, {'list': 'bullet'}],
    [{'indent': '-1'}, {'indent': '+1'}],             // 缩进/取消缩进
    [{'direction': 'rtl'}],                            // 文本方向
    [{'size': ['small', false, 'large', 'huge']}],     // 字号下拉
    [{'header': [1, 2, 3, 4, 5, 6, false]}],          // 标题级别
    [{'color': []}, {'background': []}],               // 颜色/背景色
    // 新增Roboto到字体下拉列表，空字符串对应默认字体
    [{'font': ['', 'Roboto', 'serif', 'sans-serif']}],
    [{'align': []}],                                   // 对齐方式
    ['clean']                                          // 清除格式按钮
  ],
  // 明确声明启用的格式，确保font格式被包含
  formats: [
    'bold', 'italic', 'underline', 'strike',
    'header', 'list', 'indent', 'direction',
    'size', 'color', 'background', 'font', 'align'
  ]
}

步骤3：添加自定义字体样式 #

在全局样式文件（如styles.css）中添加以下CSS，让Quill识别并应用Roboto字体：

/* 设置下拉菜单中Roboto选项的显示字体 */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Roboto"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Roboto"]::before {
  font-family: 'Roboto', sans-serif;
  content: 'Roboto';
}

/* 给选中Roboto字体的文本应用样式 */
.ql-font-Roboto {
  font-family: 'Roboto', sans-serif;
}

步骤4：验证效果 #

启动Angular应用后，打开Quill编辑器，点击字体下拉菜单即可看到Roboto选项，选中后编辑器内的文本会切换为Roboto字体。

内容的提问来源于stack exchange，提问作者Tristate