web-dev-qa-db-ja.com

Internet Explorer 11とサポートされているWebフォント

ほとんどのデバイスですべての主要なブラウザー（FireFox、ChromeおよびIE11）をキャッチするために、TTFおよびOTF Webフォントを使用しています。実動サーバーに再配置する前にすべて正常に見え、IEは私のアイコンを表示したくありません。

おそらく、レドモンドの頭脳には、インターネット経由でこれを機能させないようにする何らかの機能があるため、localhostからのみ機能します。

ここでの取引は何ですか？ IEにはどのような種類のフォントを使用する必要がありますか？

cssinternet-explorerwebfontsfont-face
10
Luke Puplett

これは、@ font-faceをロードする標準的な方法です。

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

eOTのサポートについて互換性の表を確認してください。これらのリンクを確認してください-

リンク1

リンク2

13
Rohit Suthar

次のことに注意してください。
IE cssのfont-familyエントリの名前がフォント名と異なる場合、フォントは機能しません！このバグは、一日中理解するのに非常に時間がかかりました。気づかないとイライラする！

IE 6-11の場合、EOTフォントを使用しますが、他のブラウザーではサポートされていないことに注意してください。

IE> = 9＆他のすべてのブラウザでは、Web専用に設計されているため、サポートが最も広く、圧縮率が最も高いため、woffフォントを使用します。

など：

@font-face {
    font-family: 'FontName';
    src: url('FontName.eot');  /* IE 9 - 11 */
    src: url('FontName.eot?#iefix') format('embedded-opentype'), /* IE Fix for IE 6-8*/
         url('FontName.woff') format('woff'); /* IE 9-11 & All Modern Browsers */
}
6
beliha