6

IE7 および IE8 で、カスタム Web フォントを使用すると、明示的に を設定した場合でも、テキストが斜体で表示されることがありますfont-style: normal。この問題は散発的です。数回は正常にレンダリングされ、更新するとすべてがイタリック体になり、更新すると正常に戻ります。

私はこの@font-face宣言を使用しています：

@font-face {
    font-family: 'DIN';
    src: url('fonts/DINWeb.eot');
    src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DIN';
    src: url('fonts/DINWeb-Bold.eot');
    src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'DIN';
    src: url('fonts/DINWeb-Ita.eot');
    src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb-Ita.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'DIN';
    src: url('fonts/DINWeb-BoldIta.eot');
    src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb-BoldIta.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

この記事には、宣言の順序に関するものである可能性があることを示すコメントがあります。ただし、問題を止めた唯一のことは、斜体の宣言を完全に削除することでした。@font-face

別のスタック オーバーフローの回答では、Font Squirrel @font-face ジェネレーターの使用が提案されています。ただし、使用している Web フォント ファイルには DRM があるため、これを行うことはできません。

イタリック体の宣言を完全に削除せずにこれを解決する方法はありますか?

更新:さらに調査したところ、この問題は互換モードだけでなく、IE8 にも影響しているようです。

4

3 に答える 3

8

名前ごとに、@font-face font-family代わりにカスタム名を作成します。

例：

@font-face {
    font-family: 'DINnormal';
    src: url('fonts/DINWeb.eot');
    src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DINbold';
    src: url('fonts/DINWeb-Bold.eot');
    src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'DINitalic';
    src: url('fonts/DINWeb-Ita.eot');
    src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb-Ita.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'DINboldItalic';
    src: url('fonts/DINWeb-BoldIta.eot');
    src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb-BoldIta.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

これらのCSSルールを定義したら、特定のCSSルールを含めることができます。

li {
  font: 18px/27px 'DINnormal', Arial, sans-serif;
}
于 2012-09-03T21:08:45.183 に答える
4

私のように、TypeKit フォントを使用して同様の問題が発生しているときにこの質問に遭遇した場合は、TypeKit ブログのこのエントリfont-familyで、TypeKit フォントの各太さとスタイルに一意の名前を強制して対処する方法について説明しています。

于 2013-03-06T00:52:54.917 に答える