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

a comment上有this article，表明它可能与@font-face声明的顺序有关:但是，阻止该问题的唯一方法是完全删除了斜体声明。

Another Stack Overflow answer建议使用Font Squirrel @ font-face生成器；我无法执行此操作，因为我使用的网络字体文件具有DRM。

有没有办法在不完全删除斜体声明的情况下解决此问题？

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

最佳答案

为每个@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;
}

关于css - 自定义字体有时在IE8/IE7中以斜体显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11390511/