自定义字体有时在IE8 / IE7中以斜体显示 [英] Custom font sometimes renders in italics in IE8 / IE7
问题描述
在IE7和IE8中,使用自定义网络字体时,即使我明确设置了 font-style:normal
,文本也有时以斜体显示。这个问题是零星的 - 它会渲染几次,然后我刷新,一切都是斜体,然后我刷新,它恢复正常。
In IE7 and IE8, when using a custom web font, text is sometimes rendered in italics, even when I explicitly set font-style: normal
. The issue is sporadic - it will render fine a few times, then I refresh and everything is in italics, then I refresh and it's back to 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;
}
Theres 这篇文章上的评论它可以是关于 @ font-face
声明的顺序:但是阻止该问题的唯一方法是删除斜体声明。
Theres a comment on this article that indicates it could be about the order of the @font-face
declarations: however the only thing that stopped the problem was removing the italic declarations altogether.
另一个Stack Overflow回答建议使用Font Squirrel @ font-face生成器;我不能这样做,因为我使用的网络字体文件有DRM。
Another Stack Overflow answer suggests using the Font Squirrel @font-face generator; I'm not able to do this however as the web font files I'm using have DRM.
有没有办法解决这个问题,而不完全删除斜体声明?
Is there a way to solve this without completely removing the italic declarations?
更新:进一步调查后,似乎此问题也会影响IE8,而不仅仅是兼容模式。
UPDATE: Upon further investigation, it seems this issue affects IE8 as well, not just in compatibility mode.
推荐答案
对于每个 @ font-face
font- code>名称。
For each of your @font-face
font-family
names, create a custom name instead.
示例:
@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规则: / p>
After those CSS rules are defined, then you can include specific CSS rule:
li {
font: 18px/27px 'DINnormal', Arial, sans-serif;
}
这篇关于自定义字体有时在IE8 / IE7中以斜体显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!