web-dev-qa-db-ja.com

IE11でアイコンフォントが読み込まれない

アイコンフォントにicomoonを使用しており、ChromeおよびFirefoxでは正常に動作しますが、IE11では表示されません...時々。最初のページの読み込みで動作するようです。キャッシュをクリアしてもキャッシュはリセットされないようです。この問題は、他のIEバージョンで発生する可能性があります。

@ font-faceは次のとおりです。

@font-face {
font-family: 'icon';
src:url('fonts/icon.eot?-3q3vo5');
src:url('fonts/icon.eot?#iefix-3q3vo5') format('embedded-opentype'),
    url('fonts/icon.woff?-3q3vo5') format('woff'),
    url('fonts/icon.ttf?-3q3vo5') format('truetype'),
    url('fonts/icon.svg?-3q3vo5#rezku') format('svg');
font-weight: normal;
font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
font-family: 'icon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-alphabet:before {
content: "\e600";
}
/* etc etc etc */

しかし、ここで奇妙になります。開発者ツールを見ると、フォントのHTTPリクエストが送信されていますが、受信しているのは数百バイトだけです（おそらくヘッダーだけです）。

Network panel

ただし、HTTP応答では、コンテンツの長さが数キロバイトとして正しくリストされます。

Response headers

「応答本文」タブには「表示するデータがありません」と表示されます。

ネットワークフォントのスクリーンショットで、Googleフォントがこのように動作していないことがわかります。

ロケーションバーにURLを貼り付けると、ファイル全体がダウンロードされます。

cssinternet-explorerinternet-explorer-11webfonts
35
Theron Luhn

同様の問題に遭遇し、上記のスクリーンショットから、応答には「no-store」のCache-Controlヘッダーがあります。 IEはキャッシュとフォントに問題があるようです。

「Cache-Control：no-store」ヘッダーと「Pragma：no-cache」ヘッダーの両方を削除すると、アイコンフォントが再び表示されるようになりました。

https://github.com/FortAwesome/Font-Awesome/issues/6454

30
timjchin

まったく同じ問題を調査し、オンラインで投稿されたさまざまなソリューションを検証した後、次のトラブルシューティングリストを作成しました。

  1. IEでは、インターネットオプション/セキュリティ/カスタムレベル/フォントダウンロードの有効化/無効化でフォントのダウンロードが無効になっています。ネットワーク管理者によって無効にされている可能性があります。その場合、この設定を表示したり変更したりすることはできません。
  2. HTTPヘッダーにより、IEがフォントファイルをローカルに保存できなくなります。修正するには、_Cache-Control: no-store, no-cache_または_Pragma: no-cache_ヘッダー、または過去の日付を持つExpiresヘッダーを削除します。 IEでVaryヘッダーには、_Accept-Encoding_、_User-Agent_、Hostまたは_Accept-Language_以外に設定されている場合、IEのトリックがあります。 _は何もキャッシュしません、unlessETAGヘッダーも存在します（ このMSDNブログ投稿 を参照）。
  3. フォントのダウンロードに正しいMIMEタイプを設定していません。たとえば、Jetty 9は、デフォルトで通常のフォントタイプ（_Content-Type: text/plain_）に_eot, woff, woff2_を設定します。使用する適切なコンテンツタイプについては、 この回答 をご覧ください。
  4. アイコン要素には必ず_display: block_または_display: inline-block_を使用してください。
  5. 最後に、FontAwesomeで トラブルシューティングガイド を必ず確認してください。
9
Andrei Socaciu

同様の問題に直面しましたが、Bootstrap=フォントアイコン（Glyphicons）を使用しています。これが機能する場合は試してみてください。

（一般的にWindows 10）IE-11の設定は、外部フォントをダウンロードせず、Windowsで使用可能なフォントのみを使用するように変更されました。これがデフォルトの動作です。

ただし、IEでこの設定を変更して、外部フォントをダウンロードできるようにすることができます。IEで実行する手順は次のとおりです。設定>>インターネットオプション>>セキュリティ enter image description here

[インターネット]（または使用している可能性のあるゾーン）>> [レベルのカスタマイズ...]をクリックします
次に「セキュリティ設定」の「フォントのダウンロード」を有効にします。デフォルトでは無効になっています。 enter image description here

ページを更新

2
Saurabh R S

私は同様の問題を抱えていたが、それはIE特定のdisplayとpositionの設定がiconfontsと組み合わせて困難なことによって引き起こされるようだ。

通常は次を使用して動作します。

element:before {
     display:block;
     position: absolute;
     ... your styles ...
}
2
tobias47n9e

私の場合、.eotフォントファイルが破損していました。新しいもの（+新しい.cssスタイル）を生成し、問題を修正しました。それを試してみてください。

PS。 IE @ font-faceでEOTをサポートしていることを確認してください。例：

@font-face {
  font-family: "fontName";
  src:url("../../src/theme/fonts/fontName.eot");
  src:url("../../src/theme/fonts/fontName.eot?#iefix") format("embedded-opentype"),
  url("../../src/theme/fonts/fontName.woff") format("woff"),
  url("../../src/theme/fonts/fontName.ttf") format("truetype"),
  url("../../src/theme/fonts/fontName.svg#fontName") format("svg");
  font-weight: normal;
  font-style: normal;
}
1
Paweł Bednarczyk

構文は正しいですが、どのコンバーターを使用して.tffから.eofに変換したかに問題がある可能性があります。この問題全般の詳細については、こちらの記事をご覧ください http://www.iandevlin.com/blog/2009/12/webdev/adventures-with-font-face

それまでの間、Googleフォントでホストされているフォントを使用して問題をテストしてみてください。これは、Googleがブラウザ間の互換性をシームレスに処理するためです。 Googleフォントが機能することが判明した場合、フォントの変換方法に問題があることがわかり、別のフォントを試す必要があります。私が理解していることから Font Squirrel は、クロスブラウザ互換のフォントを生成するのに非常に優れています。これが幸運に役立つことを願っています

1
coderrick

これが問題です： https://docs.Microsoft.com/en-us/windows/security/threat-protection/block-untrusted-fonts-in-enterprise#Turn_on_and_use_the_Blocking_untrusted_fonts_feature

基本的に、MicrosoftはSpriteシートの使用に戻らなければなりません。

0
mryarbles