Скин шрифта для TinyMCE

Я использовал редактор скинов:

http://skin.tinymce.com

для стиля моего текстового редактора.

Однако я не вижу, как я могу изменить тип и размер шрифта.

В файле скина есть папка со шрифтами и в ней находятся:

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

и т.п.

На своем веб-сайте я оформляю свой текст следующим образом:

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

Как мне это сделать для скина, который я создал?


css tinymce tinymce-4
person Baz    schedule 25.03.2014    source источник
comment
icomoon его иконочные шрифты, а не буквы. Вам нужно изменить шрифт во всех элементах страницы?   -  person Evgeniy    schedule 28.03.2014
comment
@Evgeniy Я хочу изменить семейство и размер шрифта в меню текстового редактора и кнопках меню.   -  person Baz    schedule 28.03.2014
comment
тогда вы можете следить за ответом @Paweł S. Чтобы применить этот шрифт к элементам управления, вам нужно добавить в свой css следующий код: button{ font-family: 'arialregular' }.   -  person Evgeniy    schedule 28.03.2014

Ответы (3)


arrow_upward
4
arrow_downward

прежде всего сгенерируйте веб-шрифт:

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

вы скачаете пакет файлов. Вам нужно скопировать:

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

в папку Skin for TinyMCE css

в Skin для 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';

теоретически это должно работать, надеюсь, это поможет!

person Paweł    schedule 28.03.2014

arrow_upward
2
arrow_downward

Семейство шрифтов 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 в заголовке, иначе он будет перезаписан.

Надеюсь, это поможет.

person Pazbi Zavatzki    schedule 03.04.2014

arrow_upward
1
arrow_downward

Попробуй использовать:

семейство шрифтов: 'icomoon-small.ttf';

Это будет работать

person Prajan Karmacharya    schedule 04.04.2014