3

他のすべてのブラウザー (FF、Chrome、Safari、Opera、IE9) は問題なく動作します。

しかし、IE8 では @font-face フォントをロードしません。ただし、別のページに移動してから戻ると、フォントは正常にレンダリング/ロードされます。

画像を参照してください:

ここに画像の説明を入力

上: 別のページに移動したときに表示されるテキスト、下: サイトが最初に読み込まれたときに表示されるテキスト

CSS コード:

@font-face {
    font-family: 'FontNameHere';
    src: url('/font/webfont.eot');
    src: local('?'), url('/font/webfont.woff') format('woff'),
    url('/font/webfont.ttf') format('truetype'),
    url('/font/webfont.svg#webfontkKNhbsUZ') format('svg');

}

前もって感謝します。

4

2 に答える 2

2

Internet Explorer 9 以降、Firefox、Chrome、Safari、および Opera は、WOFF (Web Open Font Format) フォントをサポートしています。

Firefox、Chrome、Safari、および Opera は、タイプ TTF (True Type Fonts) および OTF (OpenType Fonts) のフォントをサポートしています。

Chrome、Safari、および Opera も SVG フォント/形状をサポートしています。

Internet Explorer は、EOT (Embedded OpenType) フォントもサポートしています。

注: Internet Explorer 8 以前のバージョンは、@font-face ルールをサポートしていません。

ただし、 IE8 と Web フォントとの関係は、「サポートしていない」というよりも少し複雑です。それは実際にそれらをサポートしますが、それらを使用するのが苦痛になる方法です.

Web フォント形式には、次の 5 種類があります。

Embedded Open Type (EOT) TrueType (TTF) OpenType (OTF) Scalable Vector Graphics (SVG) Web Open Font Format (WOFF) そのうち、WOFF が標準になる予定です。Chrome、Firefox (3.6 以降)、Opera、Safari、IE9 でサポートされています。

もちろん、IE8 は WOFF について何も知らず、代わりに EOT のみをサポートします (公平を期すために、これは主に IE8 が WOFF より前にあったためです)。つまり、IE8 と他のブラウザーの両方で表示できる Web フォントを使用するには、EOT および WOFF 形式を指定する必要があります。

さらに悪いことに、IE8 にはバグがあり、同じフォントに対して複数の形式を読み込むことができません。幸いなことに、使用できるハックがあります。

とにかく、これは @font-face のクロスブラウザー CSS です。

@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-Light-webfont.eot');
    src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: 300;
    font-style: normal;
}

この例では、Open Sans というフォントとその複数の形式 (EOT、WOFF、TTF、および SVG) を使用しており、これらは私のサイトの「fonts」フォルダーに保存されています。

  • なぜ SVG 形式を含めたのか疑問に思われている方のために説明すると、その答えは、モバイル Safari (iPhone/iPad) がバージョン 4.1 までこの形式しかサポートしていなかったからです。
于 2013-09-20T06:08:10.600 に答える
0

これは古い質問であることは知っていますが、Google検索ではかなり上位に表示されるため、ここに回答を追加する価値があると思いました...

私はまだ決定的な答えに達していませんが、あなたが説明している同じ症状に苦しんでいる他の人を見つけることができませんでした.

一般的に、IE8 では、Web フォントは機能するか機能しないかのどちらかですが、いくつかのページの読み込み (通常は最初の読み込みではありません) で読み込まれず、散発的にサイトのページからページへと読み込まれないことがわかりました。私は取り組んでいます。

別の開発サーバーを使用していますが、この問題は本番環境ではなくそこでのみ発生します!

なぜこのようなことが起こるのか、私はまだ理解していません。私の最初の本能は、EOT フォントの MIME タイプだったので、開発サーバーに追加しました。それはそれを修正しませんでした。完全に診断する時間はありませんでした。生産がより重要であり、私は非常に忙しいため、おそらくこれ以上掘り下げることはできません。その結果、彼らが問題を理解するきっかけとなるでしょう...

于 2014-06-02T15:50:09.713 に答える