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

回答として投稿されたのは、この SO の質問です:カスタム フォントが 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;
}
于 2013-01-11T08:25:50.197 に答える