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 中运行。

4

1 回答 1

1

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

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

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

于 2013-10-15T07:22:14.147 回答