web-dev-qa-db-ja.com

CSS @ font-faceがIEで機能しない

Firefoxでは動作するがIEでは動作しない次のCSSがあります。明らかに、フォントはディレクトリ内にあります。助言がありますか？

@font-face {
    font-family: "Futura";
    src: url("../fonts/Futura_Medium_BT.eot"); /* IE */
    src: local("Futura"), url( "../fonts/Futura_Medium_BT.ttf" ) format("truetype"); /* non-IE */  
}

body nav {
    font-family: Futura,  Verdana, Arial, sans-serif;
    font-size:1.2em;
    height: 40px;
}
htmlcssxhtmlhtml5css3
30
Shane

ハックを提案する多くのチュートリアルを読んだので、このソリューションを思いつきました。もっと良いと思います...それはうまくいくようです。

@font-face { 
    font-family: MyFont; src: url('myfont.ttf'); 
}
@font-face{ 
    font-family: MyFont_IE; src: url('myfont.eot'); 
}
.my_font{ 
    font-family: MyFont, MyFont_IE, Arial, Helvetica, sans-serif; 
}
11
JD Isaacks

それでも問題が解決しない場合は、次の解決策をご覧ください。

http://www.fontsquirrel.com/fontface/generator

他のどのフォントジェネレータよりもはるかに優れた/高速で動作し、使用するための例を提供します。

10
Aart den Braber

IE> 9の場合、次のソリューションを使用できます。

@font-face {
    font-family: OpenSansRegular;
    src: url('OpenSansRegular.ttf'), url('OpenSansRegular.eot');
}
4
UbiQue

から http://readableweb.com/mo-bulletproofer-font-face-css-syntax/

Firefox 3.5および3.6、Internet Explorer、Safari、Opera 10.5、およびChromeでWebフォントがサポートされるようになったため、Web作成者は新しい質問に直面します。 Firefox開発者のJohn Daggettは最近、これらの問題と調査中の回避策について少しまとめて投稿しましたが、その投稿に反応して、特にPaul Irishの作品に応えて、次の@ font-face CSS構文を思いつきました。これは、IE 8、7、and 6を含む上記の名前付きブラウザのすべてでテストされています。これまでのところ、非常に良いです。以下は、無料のDroidフォントを完全なものとして宣言するテストページですFont-familyにはRegular、Italic、Bold、Bold Italicがあります。詳細については、ソースを表示してください。独自のWebサイト、およびユーティリティ自体に加えて、ダウンロードパッケージ役立つドキュメント、テストフォント、およびEOTテストページが含まれています。 EOTFASTと呼ばれます。@ font-faceを使用している場合は、必需品です。

これが、Mo '防弾仕様です。

@font-face{ /* for IE */
    font-family:FishyFont;
    src:url(fishy.eot);
}
@font-face { /* for non-IE */
    font-family:FishyFont;
    src:url(http://:/) format("No-IE-404"),url(fishy.ttf) format("truetype");
}
2
RoToRa

Google Font API を使用できます。彼らは、IE 6以上で動作すると言います。（これはテストしていません。）

Googleのサービスインフラストラクチャは、フォントを最新のブラウザー（Internet Explorer 6以降を含む）と互換性のある形式に変換します。

1
GvS

Font Squirrelは機能しませんでした。 IEサポート。 Firefoxを入手するか、IE両方ではなく動作します。私のために働いた解決策は、上記のMo Bullet Prooferリンクでした。

1
user2442032

以下に従って変更

@font-face {
    font-family: "Futura";
    src: url("../fonts/Futura_Medium_BT.eot"); /* IE */
    src: local("Futura"), url( "../fonts/Futura_Medium_BT.ttf" ) format("truetype"); /* non-IE */  
}

body nav {
     font-family: "Futura";
    font-size:1.2em;
    height: 40px;
}
0
user7393779

フォントフェイス宣言がメディアクエリ内にある場合、IE（Edgeと11の両方）はそれらをロードしません。スタイルシートで最初に宣言され、ラップされない必要があります。メディアクエリ

0
RichW