1 新版（Quill@2 以上版本）
注意：新版设置
style="font-family: Wingdings 2"这种带空格的字体样式会被过滤掉，故需特殊处理去掉空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quill Wingdings 2 Font</title>
<!-- 引入 Quill 的 CSS 文件 -->
<link
href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css"
rel="stylesheet"
/>
<style>
/* 使用 @font-face 引入 Wingdings 2 字体文件 */
@font-face {
font-family: 'Wingdings2';
src: url('Wingdings2.ttf'); /* 替换为实际的字体文件路径 */
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='false']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='false']::before {
content: '字体';
}
.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: '仿宋';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Wingdings2']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Wingdings2']::before {
content: 'Wingdings 2';
}
</style>
</head>
<body>
<!-- Quill 编辑器的容器 -->
<div id="editor" style="height: 300px"></div>
<!-- 引入 Quill 的 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
<script>
const Font = Quill.import('attributors/style/font')
const fonts = ['false', 'FangSong', 'Wingdings2']
Font.whitelist = fonts
Quill.register(Font, true)
// 创建 Quill 实例
const quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: [
[{ font: fonts }],
['bold', 'italic', 'underline'],
['color', 'background'],
],
},
})
const html =
'<span style="color: red; font-family: FangSong;">这是一段红色的文字<span style="font-family: Wingdings2;">R</span></span>'
const delta = quill.clipboard.convert({ html })
quill.setContents(delta)
</script>
</body>
</html>
2 旧版（Quill@1版本）
注意：旧版同时设置
style="font-family: Wingdings2"和class="ql-font-Wingdings2"时字体样式会被过滤掉，故需特殊处理去掉style
旧版Quill也可以使用新版Quill修改方式，若能确保环境下一定有Wingdings 2字体，也可以采用下述方式，不再额外引入字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quill Set Font Size</title>
<!-- 引入 Quill 的 CSS 文件 -->
<link
href="https://cdn.quilljs.com/1.3.7/quill.snow.css"
rel="stylesheet"
/>
<style>
.ql-font-Wingdings2 {
font-family: 'Wingdings 2';
}
</style>
</head>
<body>
<!-- Quill 编辑器的容器 -->
<div id="editor" style="height: 300px"></div>
<!-- 引入 Quill 的 JavaScript 文件 -->
<script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
<script>
const Font = Quill.import('formats/font')
Font.whitelist = ['Wingdings2'] //将字体加入到白名单
Quill.register(Font, true)
// 创建 Quill 实例
const quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: false,
},
})
const html =
'<p><span style="color: red" class="ql-font-Wingdings2">这是一段红色加粗文R本。</span></p>'
// 将 HTML 转换为 Delta
const delta = quill.clipboard.convert(html)
quill.setContents(delta)
</script>
</body>
</html>