web-dev-qa-db-ja.com

@ font-faceはIE8では動作しますがIE9では動作しません

上記で説明したように、@ font-faceがIE9で表示されないという問題がありますが、IE8以下を含む他のすべてのブラウザーでは正常に表示されます。さらに、コンピューターでローカルに表示すると、IE9は完全にライブではなく、フォントを表示します。

サイトは次のとおりです。

bigwavedesign.co.uk/gcc/gcc/

使用されるコードは次のとおりです。

    @font-face {
                font-family: 'LeagueGothicRegular';
                src: url('league_gothic_0-webfont.eot');
                src: local('League Gothic Regular'), url('league_gothic_0-webfont.woff') format('woff'), url('league_gothic_0-webfont.ttf') format('truetype'), url('league_gothic_0-webfont.svg#webfonta36nFpyE') format('svg');font-weight: normal;font-style: normal;
}

なぜこれが起こっているのでしょうか？

乾杯！

===========================================

編集

IE9でも同じフォントを表示する次のサイトを見つけました。

http://iamthomasbishop.com/

cssinternet-explorerfont-faceembedded-fonts
38
DanC

答えはありません、ただ確認：私は同様の問題を抱えています。フォントは、IE9を除く他のすべてのIEバージョンで動作します。IETesterと元のブラウザの両方を使用します。ドキュメントモード（F12開発ツール）フォントを変更すると、フォントが動作します。

Update：いくつかの策略により、なんとか動作させることができました。 IE9は。woffバージョンのフォント（私が除外した）を。eotと思った。 @ font-face generator from fontsquirrel を使用して、すべての異なるフォントバリエーションを取得し、プロジェクトに含めました smileyface -local 。 .htaccessファイルを変更する必要はありませんでした。現在は正常に動作し、すべてのIEバージョンで同じように見えます：

@font-face {
  font-family: "LucidaFax-bold";
  src: url("_font/LucidaFax-bold.eot");
  src: local("☺"),
  url("_font/LucidaFax-bold.woff") format("woff"),
  url("_font/LucidaFax-bold.ttf") format("truetype"),
  url("_font/LucidaFax-bold.svg#LucidaFax-bold") format("svg");
  }

h1 { font-family: "LucidaFax-bold", serif;}

（Mark "Tarquin" Wilton-Jones 'text-shadowハック、同じ外観をIE他のブラウザの世界と同じバージョン。古い学校ですか？見栄えがいい！それだけの価値はありますか？まあ、多くを学びました。;）

42
Tobias

Grillzが推奨 問題はMIMEタイプにまで及んでいたため、IIS7サイトでホストされているWebフォントで同じ問題が発生しました。

WOFFのMIMEタイプ 質問への回答に基づいて、「application/octet-stream」を使用することを選択しました。

  1. IISを開き、フォントをホストするサイトを選択します（IE9とFirefoxで同じドメイン名でなければなりません）
  2. 「MIMEタイプ」をダブルクリックします
  3. 右上隅の[追加...]をクリックします。
  4. 「ファイル名拡張子：」に「.woff」と入力します
  5. 「MIME type：」に「application/octet-stream」と入力します

WOFF MIME Type Screenshot

将来10分で誰かを救うことを願っています。

18
Richard Slater

私たちにとっての秘theは、提供する.eotファイルの形式を変更することでした。

IE6-9、Firefox 3-4、Chrome、Safari、Android、iPhoneで動作します。

@font-face {
    font-family: 'Museo';
    src: url('/ui/museo300.eot?') format('eot'),
         url('/ui/museo300.ttf')  format('truetype')
}

になる：

@font-face {
    font-family: 'Museo';
    src: url('/ui/museo300.eot?') format('embedded-opentype'),
         url('/ui/museo300.ttf')  format('truetype')
}
15
Chris Moschini

私の解決策は、2つの異なるフォントを宣言することです。

@font-face {
    font-family: "Dereza bold";
    src: local("Dereza bold"), url("../../assets/otf/dereza_bold.otf") format("opentype"); 
}

@font-face {
    font-family: "IE Dereza bold";
    src: url("../../assets/eot/dereza_bold.eot");
}

その後：

.divclass {
  font-family: "Dereza bold", "IE Dereza bold";
}
3
Abalore

アバロール+1

私の解決策：

@font-face {
    font-family: "OfficinaSansBookSCC";
    src: url('font/OfficinaSansBookSCC.eot'); 
    src: url('font/OfficinaSansBookSCC.eot') format('embedded-opentype'), 
         url( 'font/OfficinaSansBookSCC.ttf' ) format("truetype");
}

IE 7-9、chrome、opera、firefox。

IE 9、2番目のIE 7-8。

3
Дмитрий Погодаев

IE9-F12では、デバッグ画面でCSS3117エラーがあるかどうかを確認します。参照： IE9はクロスオリジンWebフォントのダウンロードをブロックします

2
TheKing2

投稿を編集したので、以下のテキストは答えになりません。正しいディレクトリを指していますか？これがサーバーからのMIMEタイプの問題である可能性はありますか？

================================================= ==

これはそれかもしれません：

IE9に含まれる新機能（Webフォントに関連するものだけでなく、IE9のすべての新機能を含む）を利用するには、サイトをdocumentMode 9でレンダリングする必要があることに注意することが重要です。以前にdocumentModeを聞いたことがない場合は、 Microsoftがガイドをまとめました これは、それが何であり、サイトでどのように使用できるかを説明しています。

from http://blog.typekit.com/2010/09/03/typekit-adds-experimental-support-for-ie9/

2
Gregg B

Font Squirrel は、必要な形式、既に作成されたCSS、およびその使用方法を確認するデモページを含むフォントキットを作成するのに役立つ素晴らしいジェネレーターツールも提供します。あなたが遭遇するかもしれない問題。

その出力を私のサイトに組み込むのは簡単で、問題を完全に修正しました。

1
sshanky

この問題がありました。フォントファミリ宣言にコンマが欠けていたことがわかりました。

0
user3819978

http://www.fontsquirrel.com は、私が取り組んでいたプロジェクトで問題なく動作したサンプルCSSにこれを使用します。

@font-face {
    font-family: 'QuicksandBook';
    src: url('/Quicksand_Book-webfont.eot');
    src: url('/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Quicksand_Book-webfont.woff') format('woff'),
         url('/Quicksand_Book-webfont.ttf') format('truetype'),
         url('/Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
    font-weight: normal;
    font-style: normal;
}
0
Richard Hollis

this ブログ投稿をチェックしてください。PaulIrishはあなたが直面している問題についていくつかのことを言い、彼は「防弾」@ font-faceステートメントと呼んでいます。

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

0
Harro

このシナリオで問題が発生する可能性がある別のことを追加したかったのです。 IE9には、最初のロード後にキャッシュできない@ font-face宣言をすべて破棄するルールがあります。 IE9は実際に最初のディスプレイでフォントを正しく使用しますが、その後の更新では@ font-faceは無効になります。偶然にブラウザを閉じてから再度開いて、フォントが不可解に機能していることを確認し、後で1回の更新で機能を停止した後に、これを発見しました。

これを修正するには、フォントを提供するリクエストにCache-Control以外のno-cache応答ヘッダーがあることを確認する必要があります。 max-age=3600に設定することをお勧めします。これにより、フォントが1時間キャッシュされます。 IE9は、フォントを一貫して表示できるようになります。

0
JayD3e