TinyMCE 的皮肤字体答案

【问题标题】：Skin font for TinyMCETinyMCE 的皮肤字体
【发布时间】：2014-03-25 19:09:18
【问题描述】：

我用过皮肤编辑器：

http://skin.tinymce.com

为我的文本编辑器设置样式。

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

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

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

等等

在我的网站上，我的文字样式如下：

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

我应该如何为我创建的皮肤执行此操作？

【问题讨论】：

icomoon 它的图标字体，而不是字母。是否需要更改所有页面元素的字体？
@Evgeniy 我想更改文本编辑器菜单和菜单按钮中的字体系列和大小。
那么您可以关注@Paweł S 的回答。要将此字体应用于控件，您需要在 CSS 中添加以下代码：button{ font-family: 'arialregular' }.

标签： css tinymce tinymce-4

【解决方案1】：

首先生成webfont：

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

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

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

到 Skin for TinyMCE css 文件夹

在 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 生成的

然后找到皮肤.min.css 字体系列声明并将其替换为字体松鼠生成的字体名称，在我的示例中它将由：

    font-family: 'arialregular';

理论上应该可以，希望对你有帮助！

【讨论】：

【解决方案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;
}

上面代码的文件需要在header中的Bootstrap.min.css文件之后调用，否则会被覆盖。

希望对您有所帮助。

【讨论】：

【解决方案3】：

尝试使用：

字体系列：'icomoon-small.ttf'；

这会起作用

【讨论】：