ckEditor 4 未加载带有自定义字体的 CSS 文件

问题描述

我已经为 CKEditor 实现了自定义字体，尽管它显示在下拉列表中，但它并不适用于元素。我找不到我的 CSS 文件未加载的原因，这是未应用新字体的原因。

因此，在我的配置 default.js 文件中，我添加了以下代码行：

config.font_names = 'Belluga Solid/Belluga_Solid;' + config.font_names;

config.contentsCss = "../fonts.css";

然后创建一个新的fonts.css文件：

@font-face {
    font-family: "Belluga Solid";
    src: local("Belluga Solid"),url("/MyFonts/Beluga/Belluga_Solid.eot") format("embedded-opentype"); /*non-IE*/
    src: url("/MyFonts//Beluga/Belluga_Solid.ttf") format("truetype"); /*non-IE*/
    src: url("/MyFonts//Beluga/Belluga_Solid.svg") format("svg"); /*non-IE*/
}

查看源代码，它正确适用：

<p><span style="font-family:belluga_solid;">Lorem Ipsum</span></p>

看起来很简单。看了这个教程作者没问题：https://www.youtube.com/watch?v=knkFOuKPsKQ

我实施了相同的解决方案，但很难弄清楚如何解决这个问题。

解决方法

这可能是因为元素样式中 font-family 属性的值与@font-face 规则中定义的值不匹配。 @font-face 规则将其定义为 Belluga Solid，但您的内联样式将该值设置为 belluga_solid。

您可以尝试修改@font-face 规则，使其改为：

@font-face {
    font-family: "belluga_solid";
}

这样，它们就会匹配，并且您的字体应该可以正确显示。