2012-03-01 4 views
6

私のCSSには次の行があります。font-faceがIE8で動作していないようですか?

@font-face { font-family: Keffeesatz; src: url(/Styles/YanoneKaffeesatz-Light.otf) format("opentype") } 
@font-face { font-family: KeffeesatzBold; src: url(/Styles/YanoneKaffeesatz-Bold.otf) format("opentype") } 

IE9では、これらが表示されます。 IE8では、フォールバックフォントArialを使用しています。これをIE8で動作させるにはどうすればよいですか?

+0

を見てみましょう。カスタムフォントがクロスブラウザーで動作するには、フォントをいくつかの形式で使用できるようにする必要があります。 –

+0

fontsquireelの発電機が私のために働いていないように見えます。ファイルをアップロードした後も、ファイルがアップロードされていないと表示され、ダウンロードにはフォントはありません。私はFireFox 10とIE8の両方で試しました。今夜別のブラウザで試してみる。 –

+0

FontSquirrelのウェブサイトは、今日私にとって本当に、本当に遅いです。彼らはいくつかの問題を抱えているのだろうか。また、[google web fonts](http://www.google.com/webfonts)のいくつかを見て、彼らがどのように作業したかを知ることもできます。 –

答えて

15

古いバージョンのIEに埋め込むには、フォントのEOTバージョンを提供する必要があります。彼らは他のフォーマットを認識しません。そのため、あなたはArialのフォールバックを観察しています。

フォントをFont Squirrel @font-face Generatorにすると、既存のフォントに比べて新しいCSS @font-faceの新しいセットが用意されます。

+0

最後に私のためにFont Squirrelを手に入れました。出力を大好き!素晴らしい!ありがとう! –

1

Internet ExplorerはCSS3の.ttf(TrueType)または.otf(OpenType)フォントフェイスを少なくとも認識しません。 IEは.eot(Embeddable Open Type)を認識します。

@font-face { 
font-family: 'MyWebFont'; 
src: url('webfont.eot'); /* IE9 Compat Modes */ 
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
    url('webfont.woff') format('woff'), /* Modern Browsers */ 
    url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
    url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

(http://www.fontsquirrel.com/fontface/generator)[fontsquirrelのジェネレータ]を通して、あなたのフォントを実行してみて、それが出てクランクものを見るhere

+1

IE9は既に最も一般的なフォントフォーマットを認識しています。 – BoltClock

+2

はい、互換モードはありません – koffster

関連する問題