ckeditor - ckeditor中的自定义字体

Question

我正在尝试添加自定义字体，但不能。我在下面的代码中遇到错误，字体名称正在添加到下拉列表中，但它没有改变......

我的代码是

配置文件:

CKEDITOR.editorConfig = function( config )
{
config.contentsCss = 'fonts.css';
config.font_names = 'Dekers/dekers_true' + config.font_names;
}

字体.css:

@font-face {  
font-family: "dekers_true", serif;
src: url(fonts/Dekers_light.eot ); /* IE */  
src: local("Dekers"), url("fonts/Dekers_light.ttf") format("truetype"); /*non-IE*/  
}

Answer 1

您的自定义 CSS 文件必须包含 CKEditor 正文的基本样式。 CKEditor 仅使用此 CSS 文件加载到 iframe 中。

@font-face {  
    font-family: "dekers_true"; /* font name for the feature use*/
    src: url(fonts/Dekers_light.eot ); /* IE */  
    src: local("Dekers"), url("fonts/Dekers_light.ttf") format("truetype"); /*non-IE*/  
}
body {
    font: normal 13px/1.2em dekers_true, serif;
    color: #333;
}
p {
    font: normal 13px/1.2em dekers_true, serif;
    margin-top: 0;
    margin-bottom: 0.5em
}
...

并且也将字体声明添加到主站点的 CSS 文件中。

更新:替代变体。
您可以声明您的自定义样式，例如

config.stylesSet = [
    { name : 'Pretty font face', element : 'span', attributes : { 'class' : 'pretty_face' } },
    ... 
];

所以会被应用类 .pretty_face并且您可以根据需要对其进行样式设置。如果你想在 rte 中立即预览，你也需要在 contentsCSS 文件中设置这个类的样式。