CSS 将@font-face 添加到 CKEditor

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1398342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:03:21  来源:igfitidea点击:

adding @font-face to CKEditor

cssckeditorfont-face

提问by nivcaner

I would like to add a font to the CKEditor font combo box. This in itself is easy enough. However the font I would like to add is a custom font that I use with the @font-face CSS3 attribute. I managed to do that but the editor itself does not show the custom font. If I just take the html created by CKEditor and show it in a div on the page, the custom font show nicely. I would also like to somehow add the @font-face attribute to the text area of CKEditor, so my users can see the custom font as they type.

我想在 CKEditor 字体组合框中添加一种字体。这本身就很容易。但是,我想添加的字体是我与 @font-face CSS3 属性一起使用的自定义字体。我设法做到了,但编辑器本身没有显示自定义字体。如果我只是将 CKEditor 创建的 html 显示在页面上的 div 中,则自定义字体显示得很好。我还想以某种方式将 @font-face 属性添加到 CKEditor 的文本区域,以便我的用户可以在键入时看到自定义字体。

Is this possible?

这可能吗?

回答by nivcaner

add the following line to ckeditor/config.js

将以下行添加到 ckeditor/config.js

config.contentsCss = 'fonts.css';
//the next line add the new font to the combobox in CKEditor
config.font_names = 'fontnametodisplay/yourfontname;' + config.font_names;

where fonts.css has the @font-face attribute:

其中 fonts.css 具有 @font-face 属性:

@font-face {  
    font-family: "yourfontname";  
    src: url( ../fonts/font.eot ); /* IE */  
    src: local("realfontname"), url("../fonts/font.TTF") format("truetype"); /*non-IE*/  
}