添加@ font-face到CKEditor [英] adding @font-face to CKEditor

问题描述

我想为CKEditor字体组合框添加字体。这本身是很容易。然而，我想添加的字体是一个自定义字体，我使用@ font-face CSS3属性。
我设法这样做，但编辑器本身不显示自定义字体。如果我只是采取由CKEditor创建的HTML并显示在页面上的div，自定义字体很好地显示。
我也想以某种方式添加@ font-face属性到CKEditor的文本区域，所以我的用户可以看到自定义字体，因为他们键入。

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 / config.js

add the following line to 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;

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

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

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

这篇关于添加@ font-face到CKEditor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！