在IE8 / IE7中，自定义字体有时会以斜体呈现

Question

在IE7和IE8中，使用自定义网络字体时，即使我明确设置font-style: normal，有时文本也会以斜体呈现。这个问题是零星发生的 - 它会正常渲染几次，然后我刷新一下，一切都是斜体，然后我再刷新一下，它就恢复正常了。

我正在使用以下@font-face声明：

@font-face {
    font-family: 'DIN';
    src: url('fonts/DINWeb.eot');
    src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DIN';
    src: url('fonts/DINWeb-Bold.eot');
    src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'DIN';
    src: url('fonts/DINWeb-Ita.eot');
    src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb-Ita.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'DIN';
    src: url('fonts/DINWeb-BoldIta.eot');
    src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb-BoldIta.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

有一篇文章上的评论表明这可能与@font-face声明的顺序有关: 但是唯一阻止问题的事情是完全删除斜体声明。

另一个 Stack Overflow答案建议使用Font Squirrel @font-face生成器; 但是我无法使用它，因为我正在使用带有DRM的Web字体文件。

是否有一种方法可以在完全删除斜体声明的情况下解决此问题？

更新:经过进一步调查，似乎这个问题也影响IE8，而不仅仅是兼容模式。

- Adam Sharp

---

你没有提供正在使用的HTML。尝试使用唯一的@font-face字体族名称。例如：DINnormal，DINbold，DINitalic，DINboldItalic。在此SO Answer中查看CSS和HTML示例。如果创建独特的名称解决了您的问题，我将回答。干杯！ - arttronics

@arttronics 谢谢，结果发现独特的字体族名称确实解决了问题。如果你写出一个答案，我会接受它。 - Adam Sharp

Adam Sharp，很高兴这对你有用...我已经发布了答案。干杯！ - arttronics

Answer 1

对于每个@font-face font-family名称，创建一个自定义名称。

例如：

@font-face {
    font-family: 'DINnormal';
    src: url('fonts/DINWeb.eot');
    src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DINbold';
    src: url('fonts/DINWeb-Bold.eot');
    src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'DINitalic';
    src: url('fonts/DINWeb-Ita.eot');
    src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb-Ita.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'DINboldItalic';
    src: url('fonts/DINWeb-BoldIta.eot');
    src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb-BoldIta.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

在定义了这些CSS规则之后，您可以包含特定的CSS规则：

li {
  font: 18px/27px 'DINnormal', Arial, sans-serif;
}

- arttronics

Answer 2

如果你和我一样，在使用TypeKit字体时遇到了类似的问题，TypeKit博客上的这篇文章解释了如何强制为每种重量和风格的TypeKit字体设置唯一的font-family名称以解决此问题。

- poisontofu

---

我完全同意。我看到了这条评论，它帮助我解决了在使用Typekit时遇到的问题。谢谢你。 - Gerico

Answer 3

我遇到了类似的问题，使用IE8仿真器时网页字体呈现为斜体。深入研究后，我找到了一篇文章，建议不要过于依赖仿真器，特别是在涉及WebFonts时。文章提出了尝试在实际的IE8中打开网站，由于我使用的是Windows 7机器，无法下载真正的IE8，所以我使用了一个叫做http://www.browserstack.com/的网站（无需测试人员或虚假浏览器，可以在包括Internet Explorer 6、7、8、9、10和11在内的真实浏览器中进行测试）。之后，我发现我的字体不再是斜体 :D 这是我阅读的那篇文章的链接。

http://blog.typekit.com/2013/03/14/the-dangers-of-cross-browser-testing-with-ie9s-browser-modes/

希望这能对你们有所帮助，如果我在研究时遇到这样的问题，它真的会为我节省几个小时。

- Dally S