Question

我有以下HTML：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=8" />
        <link href='https://fonts.googleapis.com/css?family=Bitter:400' rel='stylesheet' type='text/css'/>

        <style type="text/css">

        h1 {
            font-family: Bitter;
            font-weight: normal;            
        }
        </style>
    </head>
    <body>
        <h1>Why is this different?</h1>
    </body>
</html>

在 Windows 7上的IE9中查看时，Bitter font-face已加载并正确应用： HTML on IE9 Windows 7

但是，当在Windows 8上的 IE10 中查看时，它不是，回到默认的font-face（Times New Roman）： HTML on IE10 Windows 8

由于两个浏览器都使用相同的Document Mode（因为X-UA-Compatible元标记），我原以为它们都会有Bitter字体或失败并且会退回Times New Roman字体。但是，一个正在工作（Windows 7上的IE9），一个失败（Windows 8上的IE10）

这是一个已知问题或记录的功能吗？

Answer 1

更新

由于IE的性质，这似乎是一个复杂的问题。根据您的具体情况，为了涵盖可能出现的不同问题，这里的参与者的研究似乎已经出现了这些选项。

注意：请务必清除页面中可能包含的任何缓存，以确保它们已正确加载/提供。

选项1：

将兼容性元标记更改为 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />。

通过从IE=8更改为EmulateIE8，您可以使兼容模式尊重DOCTYPE，从而使IE正确加载CSS文件中的字体首选项。

选项2：

检查您使用的文件格式是否以IE可以使用和理解的格式提供。

@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400;
  src: url(https://themes.googleusercontent.com/static/fonts/bitter/v4/XexqN1a_o27MhVVdJFKAcA.eot);
  src: local('Bitter-Regular'), url(https://themes.googleusercontent.com/static/fonts/bitter/v4/XexqN1a_o27MhVVdJFKAcA.eot) format('embedded-opentype'), url(https://themes.googleusercontent.com/static/fonts/bitter/v4/SHIcXhdd5RknatSgOzyEkA.woff) format('woff');
}

查看此内容时需要注意的重要事项是字体的文件格式。现在，就IE字体支持而言，它有点像这样：

IE8仅支持 .eot格式。
IE9 / 10支持.woff和.eot格式。

选项3：

如果你在这里达到这个选项那么你可能正在处理IE有时很差的采用和Web标准的实现可能正在发生的事情是IE9在IE8模式下显示页面，但也增加了它对.woff的支持格式。另一方面，IE10正在使用实际支持的文件格式在IE8模式下正确显示页面。因此，我的结论是IE10实际上正确显示页面，而IE9试图掩盖糟糕的标准支持。

另外一个想法，因为你在下面的评论中也提到它似乎现在正在工作，可能谷歌错误地提供了错误的格式，因为浏览器是IE10但是在IE8模式下显示内容。如果是这种情况，那么IE8的“正确”显示将意味着IE10可接受的.woff文件不适用于IE8。

旁注：

这种事情是所有Web开发人员遇到麻烦的最大原因之一。 IE竞争指出非常糟糕的支持和不正确的实施，但仍然处于劣势，因为IE预装在市场上很大比例的PC上，因为大多数运行特定的操作系统。这是接受，实施和使用标准和最佳实践的一个非常有力的论据。

Answer 2

如果字体在IE8本身实际上不起作用，那么听起来IE10有一个比IE9更好的兼容性引擎 - 因为它实际上正确描绘了IE8呈现的内容。

为什么IE9 Compat 8实际上显示了字体，为什么字体在IE8中不起作用？我想把它归结为字体文件问题。 @font-face似乎很容易受到问题的困扰 - 字体属性设置似乎偶尔会出现问题之一。请参阅：Why does one of these font-face render in IE8, but the others don't?。

下载字体后，将其放入Font Squirrels generator，并使用我自己的@font-face代码在本地托管该组字体文件，您已报告该字体在IE10 Compat 8中有效。我可以确认它也适用于所有Compat模式的IE9，以及IE7 / 8。

Bitter font works in IE10 compat mode with Font Squirrel generated font files/code.

看到你已经说过其他谷歌字体在IE9 / 10 Compat模式8下工作，我认为它确实能够解决问题在于字体文件本身 - 以及IE似乎随机出现的问题与其属性。在@font-face问题上，Font Squirrel生成器似乎解决了大多数人的问题 - 但正如您在Why does one of these font-face render in IE8, but the others don't?中看到的那样，情况并非总是如此。

由于这不是兼容性问题 - 它根本不适用于IE8 - 看起来你唯一的选择是在本地托管字体。

如果您想要更好地控制字体以及在字体加载或失败时操纵元素CSS的能力，请参阅：How to know if a font (@font-face) has already been loaded?

Answer 3

我已经在IE8上验证了（与在IE8文档模式下运行的另一个IE版本相反）上面的HTML不起作用（即在Windows 8示例中的IE10中显示）因此看起来IE10有一个更改版本的IE8文档模式更准确。

Answer 4

如果你的服务器是apache，你可以在你网站根目录的.htaccess文件的2行中替换这个指令：

BrowserMatch MSIE best-standards-support
Header set X-UA-Compatible IE=8 env=best-standards-support

有了这个，IE10或IE11下的Google字体就没有问题，甚至模仿IE8。

为什么IE10的“IE8标准”模式与IE9不同？

4 个答案: