如何在Kendo Editor中正确添加tamil-SARURG等自定义字体

仅在fontName的items数组添加配置仅能让字体出现在下拉列表，还需要完成字体加载、编辑器内容区域样式注入才能正常使用，按以下步骤操作即可：

• 1. 引入自定义字体资源 #

  先将tamil-SARURG字体文件（.ttf/.woff/.woff2格式）上传到项目静态资源目录，在全局CSS中添加字体声明：

  @font-face {
    font-family: 'tamil-SARURG';
    src: url('./fonts/tamil-SARURG.ttf') format('truetype'); /* 替换为实际字体文件路径 */
    font-weight: normal;
    font-style: normal;
  }
  

• 2. 修正编辑器初始化配置 #

  Kendo Editor默认使用iframe隔离内容渲染，需要将字体样式注入到iframe内部，同时放开你注释的tamil-SARURG配置项，完整初始化代码如下：

  $("#editor").kendoEditor({
    // 新增styles配置，将自定义字体注入编辑器内容区域
    styles: [
      `
        @font-face {
          font-family: 'tamil-SARURG';
          src: url('./fonts/tamil-SARURG.ttf') format('truetype');
          font-weight: normal;
          font-style: normal;
        }
      `
    ],
    tools: [
        "bold",
        "fontSize",
        "foreColor",
        "backColor",
        {
            name: "fontName",
            items: [
                { text: "Andale Mono", value: "Andale Mono" },
                { text: "Arial", value: "Arial" },
                { text: "Arial Black", value: "Arial Black" },
                { text: "Book Antiqua", value: "Book Antiqua" },
                { text: "Comic Sans MS", value: "Comic Sans MS" },
                { text: "Courier New", value: "Courier New" },
                { text: "Georgia", value: "Georgia" },
                { text: "Helvetica", value: "Helvetica" },
                { text: "Impact", value: "Impact" },
                { text: "Symbol", value: "Symbol" },
                { text: "Tahoma", value: "Tahoma" },
                { text: "Terminal", value: "Terminal" },
                { text: "Times New Roman", value: "Times New Roman" },
                { text: "Trebuchet MS", value: "Trebuchet MS" },
                { text: "Verdana", value: "Verdana" },
                { text: "Webdings", value: "Webdings" },
                { text: "Wingdings", value: "Wingdings" },
                { text: "Calibri", value: "Calibri" },
                // 放开注释启用自定义字体
                { text: "tamil-SARURG", value: "tamil-SARURG" }
            ]
        },
        {
            name: "custom",
            tooltip: "Add page break",
            exec: function (e) {
                var editor = $(this).data("kendoEditor");
                editor.exec("inserthtml", { value: "<p STYLE='page-break-before: always'>Page break here!</p>" });
            }
        }
    ],
  });
  

• 3. （可选）添加下拉选项预览样式 #

  如需在字体下拉列表中直接预览tamil-SARURG字体效果，添加以下全局CSS即可：

  .k-dropdown-list .k-item[value="tamil-SARURG"] {
    font-family: "tamil-SARURG", sans-serif !important;
  }
  

如果你的编辑器开启了contenteditable模式（无iframe隔离），额外添加以下CSS即可：

.k-editor-content {
  font-family: inherit;
}

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