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

Question

在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,而不仅仅是兼容模式.

Answer 1

对于您的每个@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;
}