カスタムフォントがIE8/IE7のイタリック体でレンダリングされることがあります

Question

IE7とIE8では、カスタムWebフォントを使用すると、明示的にfont-style: normalを設定した場合でもテキストがイタリック体で表示されることがあります。問題は散発的です。何度か上手くレンダリングされ、次にリフレッシュされ、すべてがイタリック体で表示され、次にリフレッシュされ、正常に戻ります。この問題を停止しただけの事は完全にイタリック宣言を削除しましたが：this article上

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

Theresのa commentそれは@font-face宣言の順序についての可能性を示している：

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

Another Stack Overflow answerは、Font Squirrel @ font-face generatorを使用することを示しています。私はこれを行うことはできませんが、私が使用しているウェブフォントファイルはDRMを持っています。

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

更新：さらに調査すると、この問題は互換モードでなくIE8にも影響するようです。

Answer 1

各@font-facefont-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; 
} 

Answer 2

をTypeKitフォントを使用して、this entry from the TypeKit blogは、どのようにしてユニークなの各重量の名前を&のTypeKitフォントの名前に強制することができるかを説明しています。

Answer 3

IE8（エミュレータ）を使用しているときに掘り下げて掘り下げたときに、イタリック体でウェブフォントが表示されていました。特に、webFontsの場合にエミュレータが誤解を招く可能性があります。実際のIE8でサイトを試してみましたが、私はWindows 7マシンを使用していましたので、実際のものをダウンロードできなかったので、http://www.browserstack.com/というこのサイトを使用しました（テスターまたは偽のブラウザはありません。 、7、8、9、10および11）

と私は私のフォントはもうイタリックではなかった気づい：D

は、ここで私が読んだ記事へのリンク、

http://blog.typekit.com/2013/03/14/the-dangers-of-cross-browser-testing-with-ie9s-browser-modes/

希望これは私がこのような何かに出くわした場合の研究をするときあなたたちは、それは本当にあなたが使用中のあなたのHTMLを提供していなかった私に数時間