7

我有以下 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字体已正确加载并应用：IE9 Windows 7 上的 HTML

但在 Windows 8 上的 IE10 中查看时并非如此，而是使用默认字体 ( Times New Roman)： IE10 Windows 8 上的 HTML

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

这是一个已知问题还是记录在案的功能？

4

4 回答 4

13

更新。

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

注意：请务必清除您可能拥有的页面缓存，以确保它们被正确加载/提供。

选项1：

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

通过将 from 更改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 上，因为大多数 PC 都运行特定的操作系统。这是接受、实施和使用标准和最佳实践的一个非常有力的论据。

于 2012-09-30T20:46:34.260 回答
5

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

为什么 IE9 Compat 8 实际上会显示字体，为什么字体在 IE8 中不起作用？我会将其归结为字体文件问题。@font-face似乎很受问题困扰-字体属性设置有时似乎是其中之一。请参阅：为什么这些字体之一在 IE8 中呈现，而其他字体却没有？.

下载字体后，通过Font Squirrels 生成器，并使用我自己的代码在本地托管字体文件集@font-face，您报告该字体适用于 IE10 Compat 8。我可以确认它在所有 Compat 模式下也适用于 IE9，以及 IE7/8。

Bitter 字体在 IE10 兼容模式下使用 Font Squirrel 生成的字体文件/代码。

正如你所说的其他谷歌字体在 IE9/10 兼容模式 8 中都可以工作，我认为它确实解决了问题在于字体文件本身的问题 - 以及 IE 似乎在随机情况下与它的属性有关的问题. Font Squirrel 生成器似乎可以解决大多数人遇到的@font-face问题 - 但正如您在为什么这些字体之一在 IE8 中呈现，而其他字体不呈现？，情况并非总是如此。

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

如果您想更好地控制字体以及在字体加载或失败时操纵元素 CSS 的能力，请参阅：如何知道字体 (@font-face) 是否已加载？

于 2012-09-27T10:30:24.480 回答
0

我已经验证在 IE8 上（而不是在 IE8 文档模式下运行的另一个 IE 版本），上面的 HTML 不起作用（即显示为在 Windows 8 上的 IE10 示例中），所以看起来 IE10 有一个更改的版本更准确的IE8文档模式。

于 2014-01-28T20:25:45.777 回答
0

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

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

有了这个，我在 IE10 或 IE11 甚至模拟 IE8 下的谷歌字体都没有问题了。

于 2014-02-05T18:54:37.960 回答