6

在 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

另一个 Stack Overflow 答案建议使用 Font Squirrel @font-face 生成器；但是，我无法执行此操作，因为我使用的网络字体文件具有 DRM。

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

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

4

3 回答 3

8

为您的每个@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;
}
于 2012-09-03T21:08:45.183 回答
4

如果像我一样，您在使用 TypeKit 字体时遇到类似问题时遇到了这个问题，TypeKit 博客中的这篇文章解释了如何font-family为 TypeKit 字体的每个粗细和样式强制使用唯一名称来解决这个问题。

于 2013-03-06T00:52:54.917 回答
1

我遇到了类似的问题，使用 IE8（Emulator）时，Web 字体以斜体显示，经过挖掘和挖掘，我发现一篇文章建议模拟器有时会产生误导，尤其是在涉及 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/

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

于 2014-06-04T08:51:25.710 回答