Question

我使用过皮肤编辑器：

http://skin.tinymce.com

设置文本编辑器的样式。

但是，我看不出如何更改字体类型和大小。

在皮肤文件中有一个字体文件夹，它包含：

icomoon.ttf
icomoon-small.ttf
icomoon.eot
icomoon-small.eot

等

在我的网站上，我将文字设置如下：

font-family: Verdana,Geneva,sans-serif;
font-size: 11px;

我应该如何为我创造的皮肤做这件事？

Answer 1

首先生成webfont：

http://www.fontsquirrel.com/tools/webfont-generator

您将下载文件包。你需要复制：

*.eot
*.woff
*.ttf
*.svg

到Skin for TinyMCE css文件夹

在Skin for TinyMCE中，有一个名为的文件： skin.min.css

在此css文件之上，您需要包含字体声明

@font-face {
    font-family: 'arialregular';
    src: url('arial-webfont.eot');
    src: url('arial-webfont.eot?#iefix') format('embedded-opentype'),
         url('arial-webfont.woff') format('woff'),
         url('arial-webfont.ttf') format('truetype'),
         url('arial-webfont.svg#arialregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

你会在stylesheet.css中找到它，它是用font squirrel生成的

然后找到 skin.min.css 字体系列声明并将其替换为font squirrel生成的字体名称，在我的示例中它将通过：

    font-family: 'arialregular';

理论上它应该有效，希望它有所帮助！

Answer 2

Verdana，Geneva字体系列是网络安全的，因此您无需将文件添加到字体文件夹中。

处理编辑器css的类如下：

.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top;
background: transparent;
text-decoration: none;
color: #333333;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
text-shadow: none;
float: none;
position: static;
width: auto;
height: auto;
white-space: nowrap;
cursor: inherit;
-webkit-tap-highlight-color: transparent;
line-height: normal;
font-weight: normal;
text-align: left;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
direction: ltr;
}

因此，要更改字体系列和大小，您需要将其添加到css文件中。

.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {
font-family: Verdana,Geneva,sans-serif;
font-size: 11px;
}

需要在头文件中的Bootstrap.min.css文件之后调用具有上述代码的文件，否则将覆盖该文件。

希望有所帮助。

Answer 3

尝试使用：

font-family：＆＃39; icomoon-small.ttf＆＃39;;

这将有效

TinyMCE的皮肤字体

3 个答案: