4

我一直在思考是什么原因导致某些 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 不时渲染它的方式

4

1 回答 1

2

作为答案发布的是这个问题：自定义字体有时在 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;
}
于 2013-01-11T08:25:50.197 回答