如何向 React-Quill 添加自定义字体

Question

我正在使用 React Quill 和 Snow 主题。我正在尝试弄清楚如何添加自定义字体，以便用户可以选择我在应用程序其他部分使用的一些 Google Web 字体。

如果我转到我在here找到的少数现代（钩子）React示例之一，我可以看到一个带有空字体菜单的示例配置，如下所示：

{ font: [] }

如果我复制意大利面，我会得到一个字体选择菜单有三种选择：Serif、Sans Serif 和 Monotype。尝试向该数组添加任何字符串只会将每个选择选项呈现为“Sans Serif”。 在文档的这一页上我看到相同的空数组。这里有一条注释似乎表明这是与默认主题值一起使用的。我似乎在文档中找不到有关如何添加更多字体的任何提及。我尝试使用

@import

将 'react-quill/dist/quill.snow.css' 导入到我自己的 CSS 文件中，然后尝试添加

.ql-font-roboto {
    font-family: Roboto;
} 

我曾希望这会让 Roboto 神奇地出现在选择菜单中，因为它现在将成为我主题的一部分，但没有这样的运气。有人知道如何实现这一点吗？

Answer 1

这可能对你有帮助

const font = Quill.import('attributors/style/font');
font.whitelist = ['asap', 'podkova'];
Quill.register(font, true);

Answer 2

要添加自定义字体系列，我们必须将字体注入 Quill

1-导入并注册一个新的字体系列以显示在字体列表中 将此代码添加到使用 ReactQuill 的组件上方

// import ReactQuill and CSS file for snow theme
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
//init var to customize fonts
const Quill = ReactQuill.Quill;
const FontAttributor = Quill.import("attributors/class/font");
//add your font family names in this array
FontAttributor.whitelist = ["sofia"];
Quill.register(FontAttributor, true);

2-在组件内添加 ReactQuill 和包含 font 属性

的工具栏

<ReactQuill
        theme="snow"
        value={""}
        modules={{
          toolbar: [[{ font: FontAttributor.whitelist }],],
        }}
      />

它会像这样显示，所以我们必须添加 CSS 代码来在 ReactQuill 的文本中显示正确的字体系列名称和效果字体系列

3-通过 CSS 代码，我们完成了注意名为“sofia”的字体

/* Set dropdown font-families */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sofia"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sofia"]::before{
  font-family: "sofia", cursive;
  content: "Sofia";
}
/* Set effect font-families */
.ql-font-sofia {
  font-family: "sofia", cursive;
}

全部更改后的结果