ckeditor:使用Google字体作为内联编辑器样式?

时间:2013-09-26 12:05:23

标签: css fonts ckeditor

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

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

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

感谢。

2 个答案:

答案 0 :(得分:2)

您确定要正确设置吗?我刚测试了这个,它对我有用(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;
}

答案 1 :(得分:2)

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

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