css – IE 8渲染font-face正常为斜体

2019年8月4日 179次阅读

我一直在思考是什么导致某些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

最佳答案 发表回答是这个问题：
Custom font sometimes renders in italics in IE8 / IE7

您需要为每个@ font-face font-family创建一个自定义名称.例如

@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;
}
点赞