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
adding @font-face to CKEditor
提问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*/
}