38

上記のように、@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/

4

12 に答える 12

42

回答はありません。確認のみです。同様の問題があります。フォントは、IE9 を除く他のすべての IE バージョンで動作し、IETester と元のブラウザーの両方を使用します。ドキュメント モード (F12 開発ツール) を変更すると、フォントが機能します。私がそれを望む方法ではありません。

更新：いくつかのトリックで、なんとか機能させることができました。IE9 は、私が思っていた.eotよりも.woffバージョンのフォント (私が除外したもの) を使用しているようです。fontsquirrelの@font-face ジェネレーターを使用して、さまざまなフォントのバリエーションをすべて取得し、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 のテキスト シャドウハックを使用して、他のブラウザーの世界と同じ外観を IE バージョンに適用することで、私は新鮮な気分になりました。 ;)

于 2011-01-09T20:14:32.630 に答える
18

IIS7 サイトでホストされている Web フォントでまったく同じ問題が発生しました。Grillz が示唆しているように、問題は MIME タイプにまで及びます。

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

  1. IIS を開き、フォントをホストするサイトを選択します (IE9 と Firefox で同じドメイン名である必要があります)。
  2. 「MIME タイプ」をダブルクリック
  3. 右上隅にある [追加...] をクリックします。
  4. 「ファイル名拡張子」に「.woff」と入力
  5. 「MIME タイプ:」に「application/octet-stream」と入力します

WOFF MIME タイプのスクリーンショット

将来誰かが10分節約できることを願っています。

于 2011-03-02T14:01:05.463 に答える
15

私たちにとっての秘訣は、提供している .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')
}
于 2011-05-19T17:44:47.997 に答える
3

私の解決策は、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";
}
于 2011-12-06T20:32:52.450 に答える
3

アバロア+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 で動作します。

1 行目は IE 9 に必要で、2 行目は IE 7-8 に必要です。

于 2012-02-06T16:13:16.723 に答える
2

In IE9 - F12 look at the debug screen see if there are any CSS3117 errors. See also: IE9 blocks download of cross-origin web font

于 2011-04-21T12:46:50.117 に答える
2

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

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

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

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

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

于 2011-01-05T18:23:55.227 に答える
0

このシナリオでうまくいかない可能性があることを、さらにもう 1 つ追加したいと思いました。IE9 には、最初の読み込み後にキャッシュできないすべての @font-face 宣言を破棄するルールがあります。IE9 は実際には最初のディスプレイでフォントを正しく使用しますが、その後の更新では @font-face が無効になります。たまたまブラウザを閉じてから再度開いたときに、フォントが不可解に機能していることに気付きましたが、1 回更新すると機能しなくなりました。

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

于 2016-04-08T15:43:10.527 に答える
0

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;
}
于 2012-10-10T09:30:07.247 に答える
0

このブログ投稿をチェックしてください。ポール アイリッシュは、あなたが直面している問題についていくつか言いたいことがあります。

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

于 2011-04-29T15:28:29.427 に答える
0

この問題がありました。font-family 宣言にカンマがありませんでした。

于 2014-08-27T23:35:25.017 に答える