Как использовать веб-шрифты в designMode?

Question

Как использовать веб-шрифты в designMode?

0

У меня есть текстовый редактор, который использует designMode и <iframe>. Я пытаюсь изменить шрифт на шрифт Google Web. Вот код JavaScript:

function rich(a,b,c) {
    editor.execCommand("styleWithCSS",true,null);
    editor.execCommand(a,b,c);
    editor.focus();
}

HTML для шрифтов:

<select onchange="if (this.selectedIndex > 0) {rich('FontName',false,this.options[this.selectedIndex].text);}">
            <option selected>Font</option>
            <option>Arial</option>
            <option>Times New Roman</option>
            <option>Courier</option>
            <option>Consolas</option>
            <option>Calibri</option>
            <option>Molle</option>
        </select>

В файле <iframe> меня есть следующее:

<link href='https://fonts.googleapis.com/css?family=Molle:400italic' rel='stylesheet' type='text/css'>

Я попытался использовать CSS для изменения текста в правильный шрифт:

span[style="font-family: Molle"] {
    font-family: 'Molle', cursive;     
}

Это не работает. Решение должно работать только в Google Chrome.

Ptr13 14 окт. 2013, в 03:19

Источник

0

Как выглядит HTML для span? У вас есть только один стиль в стартовом теге? А пробел после двоеточия?
Mr Lister 14 окт. 2013, в 11:34
0

Да. <span style="font-family: Molle"></span>
Ptr13 14 окт. 2013, в 11:45
0

ХОРОШО. Но ты же понимаешь, что если font-family: Molle работал, font-family: 'Molle', cursive ничего бы не изменил, верно? Возможно, вам следовало написать font-style: italic в таблице стилей.
Mr Lister 14 окт. 2013, в 12:32
0

@ Мистер Листер Я не думаю, что это все, шрифты без засечек работают. Я попробую это, хотя.
Ptr13 14 окт. 2013, в 21:04
0

@MrLister Неважно об этом, font-style: italic сработал. Спасибо, не могли бы вы сформулировать это в ответе на тот случай, если у кого-то возникнет тот же вопрос?
Ptr13 14 окт. 2013, в 22:19
0

ОК, я сделал это Но курсив не имеет ничего общего с видом шрифта; Вы можете отобразить любой вид (с засечками, без засечек и т. д.) курсивом. Скоропись тоже; cursive это просто предпочитаемый браузером шрифт для рукописного ввода.
Mr Lister 15 окт. 2013, в 07:24

Показать ещё 4 комментария

Теги:

javascript

html

css

iframe

execcommand

1 ответ

Ещё вопросы

Как выглядит HTML для span? У вас есть только один стиль в стартовом теге? А пробел после двоеточия?
ХОРОШО. Но ты же понимаешь, что если font-family: Molle работал, font-family: 'Molle', cursive ничего бы не изменил, верно? Возможно, вам следовало написать font-style: italic в таблице стилей.
@ Мистер Листер Я не думаю, что это все, шрифты без засечек работают. Я попробую это, хотя.
@MrLister Неважно об этом, font-style: italic сработал. Спасибо, не могли бы вы сформулировать это в ответе на тот случай, если у кого-то возникнет тот же вопрос?
ОК, я сделал это Но курсив не имеет ничего общего с видом шрифта; Вы можете отобразить любой вид (с засечками, без засечек и т. д.) курсивом. Скоропись тоже; cursive это просто предпочитаемый браузером шрифт для рукописного ввода.

Mr Lister · Accepted Answer · 2013-10-15T05-25-00.000Z

Как вы загружаете шрифт, загружается только курсивная версия. Поэтому шрифт будет отображаться только в том случае, если вы явно укажете курсив в стиле span.

font-family:'Molle',sans-serif; font-style:italic;

Кстати, вы можете вообще изменить HTML? Если это так, не используйте встроенный стиль, а затем попробуйте переопределить его с помощью таблицы стилей, используя атрибут style для селектора. Он не только выглядит уродливым и неоднородным, но он не будет работать, он ничего не сделает. Атрибут inline style имеет более высокую специфичность, чем таблица стилей.
Либо добавьте выше, как встроенный стиль для span, либо укажите класс span и используйте его в таблице стилей для его адресации.

Нет, я не могу изменить HTML. Теги <span> создаются динамически, когда пользователь меняет шрифт.