在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;
}
this article上的a comment表示它可能与@ font-face声明的顺序有关：但是唯一能解决问题的是完全删除斜体声明.
Another Stack Overflow answer建议使用Font Squirrel @ font-face生成器;我无法做到这一点,因为我使用的网络字体文件有DRM.
更新：经过进一步调查,似乎这个问题也影响IE8,而不仅仅是兼容模式.
解决方法
对于每个@ font-face字体系列名称,请改为创建自定义名称.
例：
@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;
}
