css - IE 8 将字体正常呈现为斜体

Question

我一直在思考是什么导致某些 IE 版本将 @font-face 字体呈现为斜体，即使这些样式被声明为正常。

我的主要想法是 IE 不会在呈现页面之前下载每个字体文件。

在我的 CSS 中，我已经为相同字体的不同字体声明了字体文件 - 从细斜体到超斜体。它们都使用相同的设置声明:

@font-face { /* THIN ITALIC */
    font-family: Unit;
    src: url("../gfx/fonts/UnitWeb-ThinIta.eot")
    src: url("../gfx/fonts/UnitWeb-ThinIta.eot?#iefix") format("embedded-opentype"),
         url("../gfx/fonts/UnitWeb-ThinIta.woff") format("woff");
    font-weight: 100;
    font-style: italic, oblique;
    font-variant: normal;
}

通过

@font-face { /* ULTRA */
    font-family: Unit;
    src: url("../gfx/fonts/UnitWeb-Ultra.eot");
    src: url("../gfx/fonts/UnitWeb-Ultra.eot?#iefix") format("embedded-opentype"),
         url("../gfx/fonts/UnitWeb-Ultra.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
}

正如您所见，斜体被声明为 font-style: italic, oblique;，而 normal 被声明为 font-style: normal;。

现在，渲染。

This is how IE 9 renders it

This is how IE 8 renders it every now and then

Answer 1

作为答案发布的是这个 SO 问题:Custom font sometimes renders in italics in IE8 / IE7

---

您需要为每个@font-face 字体系列创建一个自定义名称。例如

@font-face { /* THIN ITALIC */
   font-family: UnitItalic;
   src: url("../gfx/fonts/UnitWeb-ThinIta.eot")
   src: url("../gfx/fonts/UnitWeb-ThinIta.eot?#iefix") format("embedded-opentype"),
        url("../gfx/fonts/UnitWeb-ThinIta.woff") format("woff");
   font-weight: 100;
   font-style: italic, oblique;
   font-variant: normal;
}


@font-face { /* THIN ITALIC */
   font-family: UnitNormal;
   src: url("../gfx/fonts/UnitWeb-ThinIta.eot")
   src: url("../gfx/fonts/UnitWeb-ThinIta.eot?#iefix") format("embedded-opentype"),
        url("../gfx/fonts/UnitWeb-ThinIta.woff") format("woff");
   font-weight: 100;
   font-style: italic, oblique;
   font-variant: normal;
}