IE 8将font-face渲染为斜体

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;，而正常字体是这样声明的：font-style: normal;。

现在，来谈一下渲染问题。 这是IE 9的渲染效果。 这是IE 8有时候的渲染效果。

- haabe

---

看起来就像这里所描述的：IE8只会使用给定字体族的第一个@font-face声明。 - robertklep

啊，谢谢你的链接，robertklep！我会先尝试放置正常声明，看看它是否看起来还算不错 :) - haabe

不过，@robertklep，这似乎并不一致。IE 8以正常体和斜体的方式呈现正常题材在这个屏幕截图中，斜体呈现的字体粗细与正常呈现的字体粗细不同。 - haabe

Answer 1

这篇文章是在stackoverflow上回答一个问题时发表的：自定义字体有时在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;
}

- Bart