Question

我想在我的CKEditor中使用'Open Sans'作为默认字体，但无法找到方法。
我正在使用CKEditor 4.4.5 full。

我在html头中包含了字体：

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

然后我尝试通过更改其contents.css中的CSS来更改CKEditor的默认字体：

body
{
    /* Font */
    font-family: "Open Sans";
    font-size: 18px;
}

但这似乎不起作用。

我也尝试在我的Javascript中设置它：

CKEDITOR.config.font_names = "Open Sans;";
CKEDITOR.config.font_defaultLabel = 'Open Sans';

但这似乎只会影响'字体'工具栏的显示，而不会影响样式本身。

注意：当我使用“ckeditor-gwf-plugin”时，我可以使用“Open Sans”，但这也无法帮助我将其设置为默认字体。

感谢您的帮助！

Answer 1

我假设您需要设置CKEditor的内容区域的样式？您需要创建一个css文件并将其添加到您的CKEditor配置中，如下所示：

contentsCss : '/path/to/style.css',

在style.css中：

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body, p { font-family: 'Open Sans', sans-serif; }

确保/path/to/style.css加载。使用浏览器开发者工具。同时为文本设置适当的选择器：body，p，也可以h1, h2, h3。

大多数情况下，此文件中的样式与Web应用程序中使用的排版样式相同。

Answer 2

注意： 这就是一般更改默认font-family和font-size的方式你的CKEditor。要使用自定义CSS文件进行更改，请查看已接受的答案！

刚刚发现如何在CKEditor中使用谷歌字体作为默认字体：

/* contents.css of your CKEditor */
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body
{
    /* Font */

    font-family: 'Open Sans';
    font-size: 36px;
}

注意：您需要使用@import url添加google-font。并且，小心：font-size在这里被忽略！

然后，借助这个答案https://stackoverflow.com/a/12545905/3391783，我还设法设置了默认font-size：

/* contents.css of your CKEditor */
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body, p
{
    /* Font */

    font-family: 'Open Sans';
    font-size: 36px;
}

注意：除了p - 标记之外，您还需要添加body - 标记。就像上面提到的答案所解释的那样，段落的样式会覆盖你身体的font-size。

如何在CKEditor中将google-font设置为default-font？

2 个答案: