ckeditor：使用 Google 字体作为内联编辑器样式？答案

【问题标题】：ckeditor: using Google font as inline editor style?ckeditor：使用 Google 字体作为内联编辑器样式？
【发布时间】：2013-09-26 12:05:22
【问题描述】：

我正在使用 CKeditor，并希望编辑器窗格的内容与我网站已发布页面上显示的内容尽可能匹配。这包括使用专门的 Google 字体（'Lato:300'，http://tinyurl.com/o6njmzw）

我找不到任何方法让编辑器使用这种字体？ Contents.css 似乎忽略了它（我真的不明白为什么？）有人可以帮忙吗？

(nb。我正在尝试将字体用作编辑器窗格中所有文本的默认字体，不仅仅是样式下拉菜单中的额外选项)

谢谢。

【问题讨论】：

为什么不在您的 ckEditor 中包含指向您网站样式表的链接？
嗨，Coop，我不确定您所说的“在我的 ckeditor 中”是什么意思？我在 contents.css 文件中包含了 font-family 属性，这是 cke 从中获取样式的地方，正如我所说的，它被忽略了。导入代码我已包含在页面上任何其他样式表的上方和 ckeditor 代码之前。
contents.css 是否仍然有效？你可以在那里设置一些简单的东西，比如颜色：#c0ff33;？
嗨，Neno，是的，我可以设置颜色、背景颜色和其他一些属性……但不能设置字体。
@Inigo 当 ckeditor 加载时，它在 iframe 中，因此将字体代码放在同一页面上是没有用的。 CKeditor 具有通过 config.js 文件链接整个样式表的功能。这样，您可以确保每种样式都相同，而不仅仅是字体！

标签： css fonts ckeditor

【解决方案1】：

您确定设置正确吗？我刚刚对此进行了测试，它对我有用（contents.css）：

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff');
}

body
{
    font-family: 'Lato', sans-serif, Arial, Verdana, "Trebuchet MS";
    font-size: 12px;
    color: red;
    background-color: #fff;
    margin: 20px;
}

【讨论】：

另外，请确保您没有从缓存中加载 contents.css！
天啊！有效！出于某种原因，我什至没有尝试在 content.css 中使用@font-face，我一直在编辑 HTML 页面的头部使用样式表链接。我认为问题与将此字体应用于保存 ckeditor 内容的 iframe 相关...相反，contents.css 与 iFrame 一起加载，所以这就是它起作用的原因，我猜？无论如何，谢谢，非常感谢。
很遗憾，此解决方案仅适用于支持 WOFF 字体的浏览器。

【解决方案2】：

Nenotlelp 的解决方案不适用于不支持 WOFF 字体的浏览器。更好的方法是使用config.contentsCss 为 webfonts 添加 CSS 文件。示例：

config.contentsCss = [
    CKEDITOR.getUrl('contents.css'),
    'http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700'
];

【讨论】：

为了兼容性，这样做实际上可能会更好。