如何更改默认的 Kendo UI 字体？答案

【问题标题】：How to change the default Kendo UI font?如何更改默认的 Kendo UI 字体？
【发布时间】：2017-05-17 07:33:56
【问题描述】：

我正在使用其中一个包含的 KendoUI 主题，但我想替换字体系列。覆盖整个 Kendo UI 中使用的整个字体系列的最简单方法是什么？

【问题讨论】：

您是否尝试过创建样式表来覆盖剑道的字体？
我试过了，但我想我问的是哪个选择器或如何设置默认值，所以我不必为每个元素设置样式。
Chrome 开发者工具在这方面是无价的。只需检查页面并查看字体的来源是什么。您可以从覆盖标记开始。

【解决方案1】：

在 Angular 中，您可以执行以下操作

$scope.$on("kendoWidgetCreated", function (event, widget) {
      var styleTag = widget.body.parentNode.getElementsByTagName("style")[0];
      styleTag.parentNode.removeChild(styleTag);
      widget.body.style.fontFamily = '<your font name here>';
      widget.body.style.fontSize = '12px';
      widget.body.style.color = '#35384D';
});

确保您使用的新字体存在于 Kendo 提供的字体中，如果不存在，Kendo 将使用默认的 Arial 字体。

要使用任何其他第三方字体，它需要包含在 Kendo 标题部分中。 ~~我目前正在努力在 Kendo 中使用 google 字体，但当我得到工作示例时会更新线程。~~

最后我不得不去寻找丑陋的解决方案来使用谷歌字体，虽然剑道演示显示了更简单的方法，但这些对我不起作用

angular.element(angular.element('.k-editable-area .k-content')[0].contentDocument.getElementsByTagName("head"))
                .append("<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>");

【讨论】：