javascript - 如何在 designMode 中使用网页字体？

Question

我有一个使用 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 中运行。

Answer 1

您加载字体的方式只会加载斜体版本。因此，仅当您在 span 的样式中明确指定斜体时，字体才会显示。

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

顺便问一下，你能改变 HTML 吗？如果是这样，请不要使用内联样式，然后尝试使用样式表覆盖它，使用选择器的样式属性。它不仅看起来丑陋和参差不齐，而且它不会工作，它不会做任何事情。内联样式属性比样式表具有更高的特异性。
要么将上面的内容作为跨度的内联样式，要么为跨度提供一个类并在样式表中使用它来解决它。