自定义字体在 ReactJS 上的 TinyMCE 中不起作用

Question

我正在尝试为 TinyMCE 中的印地语输入添加 Devlys 和 Kruti Dev 字体，但是当我在编辑器中输入时，出现的是英文字母而不是印地语。我正在尝试复制类似于 Microsoft Word 的场景，在该场景中我可以使用英文键盘和文本编辑器中安装的字体输入印地语字母。

我按照博客文章here进行了一些修改。该字体似乎已加载到我的应用程序上，并显示在字体选择的下拉列表中，但是，当我在编辑器中输入所选字体时，会显示英文字母而不是印地语。

我的编辑器代码如下：

<Editor
        onInit={(evt, editor) => editorRef.current = editor}
        initialValue={props.data}
        init={{
          selector: 'textarea',
          language: 'hi',
          height: 500,
          menubar: false,
          plugins: [
            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
            'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
          ],
          toolbar: 'undo redo | fontfamily | ' +
            'bold italic forecolor | alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
            'removeformat | help',
          font_family_formats: "KrutiDev= KrutiDev; Courier New=courier new,courier; DevLys=DevLys; Helvetica=helvetica; Symbol=symbol;",
          content_css: "./App.css",
          content_style: "body { font-family:DevLys; font-size:14px }"
        }}
      />

我的App.css与字体代码如下：

@font-face {
  font-family: 'DevLys';
  src: url('./fonts/DevLys_010.ttf') format('truetype');
}

@font-face {
  font-family: 'KrutiDev';
  src: url('./fonts/KRDEV010.ttf') format('truetype');
}

Answer 1

为了使其正常工作，我必须将

@font-face

CSS 添加到 init 中的

content_style

属性。将其添加到

content_css

或

font_css

没有执行任何操作。