ckeditor 中的自定义字体

Question

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

我的代码是

config.js:

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

fonts.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

如果您使用托管字体并且用例相对简单，则可以将样式表直接添加到 config.contentCss：

config.contentsCss = [ '/css/mysitestyles.css' , 'https://fonts.googleapis.com/css?family=Roboto' ]

第一个文件定义您的样式（例如 .title { font-family: 'Roboto', sans-serif;)，第二个是包含字体定义的远程样式表。

自定义字体现在应该出现在下拉菜单和编辑器中，前提是您已在 config.styleSet 中定义了可选样式：

config.styleSet = [ { 'name': 'Title' , 'element': 'h1', 'attributes': { 'class': 'title' } ]

我使用 CKEditor Django 插件对此进行了测试，其中语法与上面的略有不同，但是我看不出有什么理由不能翻译。

Answer 2

您的自定义 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 中立即预览，你还需要在 contentCSS 文件中设置此类的样式。

Answer 3

或者在 config.js 中

config.font_names = 'Arial/Arial, Helvetica, sans-serif;' +
    'Comic Sans MS/Comic Sans MS, cursive;' +
    'Courier New/Courier New, Courier, monospace;' +
    'Georgia/Georgia, serif;' +
    'Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;' +
    'Tahoma/Tahoma, Geneva, sans-serif;' +
    'Times New Roman/Times New Roman, Times, serif;' +
    'Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;' +
    'Verdana/Verdana, Geneva, sans-serif;' + 
    **'Dekers/dekers_true';**

，然后是你的 CSS。
上面将其放置在“样式”下拉列表中，而不是“字体”中。