Question

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

a comment this article上的Another Stack Overflow answer表示它可能与@font-face声明的顺序有关：但是唯一能解决问题的是完全删除斜体声明。

{{3}}建议使用Font Squirrel @ font-face生成器;我无法做到这一点，因为我使用的网络字体文件有DRM。

有没有办法在不完全删除斜体声明的情况下解决这个问题？

更新：经过进一步调查，这个问题似乎也会影响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字体遇到类似问题时遇到了这个问题，this entry from the TypeKit blog说明了如何为每个权重和广告强制使用唯一的font-family名称。 TypeKit字体的样式来解决它。

Answer 3

我遇到了类似的问题，在使用IE8（模拟器）时，网络字体显示在Italic中，在挖掘和挖掘之后我遇到了一篇文章，建议模拟器有时会误导，尤其是涉及webFonts时，以及它的建议在实际的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/

希望这可以帮助你们，如果我在研究它的时候遇到这样的东西真的会让我节省几个小时

自定义字体有时会在IE8 / IE7中以斜体显示

3 个答案: