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

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