Question

我有一些加载到我的网络应用程序的Google字体，它们在Chrome，Safari和Firefox中运行良好。在Internet Explorer中有一些奇怪的不一致（见下图）。

基本上你可以看到。在某些地方，字体不起作用，但在某些地方它正在工作。这是与＃34;加载＆＃34;。

相同的页面

，可以自己转到图片页面

我使用以下标记加载字体：

<link href="http://fonts.googleapis.com/css?family=Pinyon+Script" rel="stylesheet" type="text/css">

不同的元素按以下方式设置字体：

第一个不起作用的文字的字体设置为

<span style="font-family: Pinyon Script">Pinyon Script</span>

第二个元素（在列表中工作）的字体设置为内联，代码如下

<a href="Pinyon Script" style="font-family: Pinyon Script">Pinyon Script</a>

第三个不起作用的元素的字体设置如下代码

<div class="textarea ui-draggable selected" style="position: absolute; z-index: 70; font-family: 'Pinyon Script'; color: rgb(180, 88, 88); font-size: 28px; left: 86.5px; top: 309px;" id="text-1">
    <div class="drag_handle" style="display: block;"><i class="fa fa-arrows"></i></div>
    <div contenteditable="true">Together with their family</div>
</div>

总结一下。所有元素的字体都设置为内联。所有元素的字体拼写方式相同。所有元素都在同一页面上，没有iframe或类似的东西。请注意，如果字体是否使用引号括起来并不重要。

enter image description here

编辑：经过额外测试后，我在Internet Explorer Developmer Tool中找到了以下规则。此规则不在我的任何.css文件中，但似乎是Internet Explorer自动添加的规则，它似乎覆盖了我的内联CSS。我不确定这是怎么可能的，因为内联应该覆盖任何浏览器默认规则。有什么想法吗？

我发现的规则是：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li...{
    font-family: inherit;
    [... plus a long list of other default rules ...]
}

如果我删除了font-family：inherit;以上规则。它会听我的内联字体系列：Pinyon Script;规则。我只能从开发人员工具中删除它，因为它不在我的CSS中，我不知道如何阻止Internet Explorer用它覆盖我的内联css。

Answer 1

我不知道IE的答案没有使用你想要的字体。出于某种原因，即使设置为模拟IE10或9，我在Win7上的IE11也不会出现问题。（正如您在IRC上讨论此问题时所知道的那样。）

但是，在损坏的按钮上，该页面上涉及名称中带有空格的字体的任何可编辑文本部分都会生成断开的跨度，这在任何浏览器中都不起作用。 Firebug显示Firefox解释如下：

<span style="font-family: " headland="" one""="">"Headland One"</span>

从下拉列表中选择的字体本身可以正常工作，空格与否，因此这两个区域的代码必须不同。跟踪这些框的事件处理使我进入editor.js中的第104行，如下所示：

$('.font-family button').html('<span style="font-family: '+font+'">'+font+'</span> <span class="caret"></span>');

如果变量font包含引号字符，那么将生成损坏的HTML，这是我猜测这里发生了什么。就个人而言，我会将引号放在字符串的HTML字符串中，并从字体名称中删除它们，从第102行开始给出以下内容：

    font = font[0].trim().replace(/['"]/g, '');
    //Set button value to the font
    $('.font-family button').html('<span style="font-family: \''+font+'\'">'+font+'</span> <span class="caret"></span>');

理论上，这应该用最少的更改来修复损坏的按钮。如果做到以下几点会更聪明：

    font = font[0].trim().replace(/['"]/g, '');
    //Set button value to the font
    $('.font-family button')
        .html('<span></span> <span class="caret"></span>')
        .children(':first-child')
           .css('font-family', font)
           .text(font);

这避免了使用字符串连接并将变量内容作为文本插入，因此浏览器将处理转义等。

希望这有帮助！

Google字体（Pinyon Script）在Internet Explorer中工作不一致

1 个答案: