自定义字体有时呈现在IE8 / IE7斜体(Custom font sometimes render

在IE7和IE8，使用自定义Web字体时，文本有时呈现斜体，甚至当我明确地设置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声明：不过是停止了问题的唯一的事情是消除斜体声明干脆。

另一个堆栈溢出的答案建议使用字体松鼠@字体面发生器; 我不能然而，要做到这一点，因为我使用有DRM的Web字体文件。

有没有办法解决这个问题，而不完全删除斜体声明的方式？

更新：经进一步调查，似乎这个问题会影响IE8为好，不只是在兼容模式。

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;
}

Answer 2:

如果像我一样，你碰到这个问题就来了，同时体验使用TypeKit字体类似的问题，从TypeKit博客此项解释了如何强制独特的font-family的TypeKit字体来解决它的每个重量和样式名称。

Answer 3:

我有一个类似的问题，网站的字体是斜体显示使用IE8（模拟器）时，挖掘和挖掘后，我碰到一个文章暗示模拟器可以当谈到网络字体有时会特别误导的，它所建议试图将来到现场实际IE8，因为我使用的是Windows 7的机器，我无法下载真实的东西，所以我用这个网站叫做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/

希望这可以帮助你们，要是遇到这样的事情来了，当研究它真的会救了我几个小时

文章来源: Custom font sometimes renders in italics in IE8 / IE7