我正在尝试为 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');
}
为了使其正常工作,我必须将
@font-face
CSS 添加到 init 中的 content_style
属性。将其添加到 content_css
或 font_css
没有执行任何操作。