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

在IE7和IE8中，使用自定义Web字体时，即使在明确设置font-style: normal时，文本有时也会以斜体显示。这个问题是零星的 - 它会渲染几次，然后我刷新，一切都以斜体显示，然后我刷新并恢复正常。自定义字体有时在IE8/IE7中以斜体显示

我使用这个@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表示它可能是对@font-face声明的顺序：但已停止这一问题的唯一的事情是完全移除斜体声明。

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

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

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

来源

2012-07-09 Adam Sharp

您没有提供您的HTML这是在使用中。尝试使用独特的'@ font-face'系列名称。例如：'DINnormal，DINbold，DINitalic，DINboldItalic'。在这个[** SO Answer **]（http://stackoverflow.com/a/10273361/1195891）查看CSS和HTML示例。如果创建独特的名字可以解决您的问题，我会做出答复。干杯! – arttronics 2012-07-10 04:32:12

@arttronics谢谢，结果发现独特的字体家族名称最终解决了这个问题。如果你写了一个答案，我会继续接受它。 – 2012-09-03 05:24:25

亚当夏普，很高兴为你解决问题......我发布了一个答案。干杯! – arttronics 2012-09-03 21:10:46

对于您的每个@font-facefont-family名称，请改为创建一个自定义名称。

例子：这些CSS规则定义

@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规则：

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

来源

2012-09-03 21:08:45 arttronics

如果像我一样，你碰到这个问题就来了，同时出现了类似的问题使用TypeKit字体，this entry from the TypeKit blog解释了如何强制使用TypeKit字体的每个权重&样式的唯一font-family名称来解决该问题。

来源

2013-03-06 00:52:54 poisontofu

我可以继续这个。我遇到了这个评论，它帮助我解决了使用Typekit时遇到的问题。谢啦。 – Doidgey 2013-11-10 20:58:05

我有一个类似的问题，在使用IE8（模拟器）时，Web字体显示为斜体，挖掘和挖掘后我遇到了一篇文章，建议模拟器有时会误导，尤其是当涉及到webFonts时，因为我使用的是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-04 08:51:25

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

回答

相关问题