@ font-faceがIEに正しく表示されない

私は何時間も探していて、尋ねられた友人で、うまくいかなかった。だから皆さんが私を助けてくれることを願っています。私のウェブサイトはカスタムフォントを使用していますが、IE（10）はこれをサポートしていません。私は他の方法をサポートしているのかどうか分かりません。ここに私のです：@ font-faceがIEに正しく表示されない

@font-face { font-family: shardee; src:url('fonts/Shardee.ttf'); }

Internet Explorerでカスタムフォントを持つ必要はありませんがいいです。

Internet Explorerでフォントが認識されない場合、既定のフォントが使用されます。しかし、問題は、カスタムフォントのフォントサイズが完全であることですが、Internet Explorerのデフォルトフォントでは大きすぎます。 IE固有のCSSコードで修正しようとしましたが、まったく機能しません。私はInterner Explorerの次のCSSコードを使用しています：

<!--[if IE]> 
     <style> 
      #menu ul li{ font-size:15px; } 
     </style> 
    <![endif]-->

を私も、このように見えた外部スタイルシートでそれを試してみました：私はPHPで使う機能はWordPressで

<!--[if IE]> 
     <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri() ?>/style/ie.css" /> 
    <![endif]-->

あなたのウェブサイトの経路にあなたを連れて行く機能。あなたがワードプレスを使用していない場合、あなたはそのコードを忘れて空白のままにすることができます。

問題はパスではなく、パスは正しいです。私はブラウザ内のソースコードを調べて、ie.cssにあるコードを表示しました。 ie.cssのコードは上記とまったく同じですが、タグectはありません。

私はあなたがこの問題を私に助けてくれることを願っています。私が知る限り、2つの解決策が可能です。具体的なCSSを動作させるか、IEでカスタムフォントを作成する方法を教えてください。私はInternet Explorerのバージョン10を使用しています。

サイトhereが表示されますが、いったん修正されるとサブドメインに置く必要がないため消えてしまいます。

種類について、バートRoelofs氏

出典

2013-04-01 Bart Roelofs

質問が有意義なものにするには将来の訪問者には、デモの完全なコードを質問に含めるか、固定されていない（つまり、問題を取り除く）オンラインデモの合理的に永続的なURLを提供する必要があります。 –

複数のフォントフォーマット

フォントの.ttf,.woffと.eotバージョンを使用し、ブラウザの広い範囲をサポートします。

@font-face { 
    font-family: 'shardee'; 
    src: url('fonts/Shardee.eot'); 
    src: url('fonts/Shardee.eot?#iefix') 
      format('embedded-opentype'), 
     url('fonts/Shardee.woff') format('woff'), 
     url('fonts/Shardee.ttf') format('truetype'); 
}

あなたは.woffと.eotへ.ttfフォントを変換するには、Font Squirrelのようなフォント変換のウェブサイトを使用することができます。

DRM偽陽性

@Jukkaが指摘したように、Windowsで使用可能であることから、それを防止することだTTFファイルとの法的な問題があります。 IEの開発者コンソールで、次のエラーメッセージが表示されます。

CSS3114: @font-face failed OpenType embedding permission check. 
Permission must be Installable.

Shardeeはunknown license typeと捨てられたフォントであるように思われます。このフォントを使用するのは合法かもしれませんが、Windowsでは、すべてのTTFファイルに、Webページに埋め込むことが正当だと明示するDRM情報が必要になるようです。 IEのエラーは、おそらく偽陽性です。

これをテストするために、私はTTFフォントを採用しました.TTFフォントは、Webサイトでの使用を正式に認可されています。 TTFバージョンは、DRMエラーのためIEで動作しませんでした。この例は間違いなく偽陽性です。これは、複数のフォント形式を使用する必要がある理由の1つで、TTFのような単一の形式がすべてのブラウザで機能しない理由の1つです。

WindowsではIEでTTFファイルを使用することはできませんが、IEでは引き続きWOFFまたはEOTバージョンを使用できます。上記の@font-faceルールをローカルWebサーバー上でテストしたところ、すべてのバージョンのIEでShardeeフォントが正しく表示されました（IE開発者コンソールのエラーメッセージが表示されます）。しようとする

ステップ：

Convert.ttfファイル.woffと.eot
に既存.ttfファイルと同じディレクトリに.woffと.eotファイルをアップロードします。
@font-faceルールを上記のものと置き換えます。私は最初のバージョンでいくつかのタイプミスを修正しました。

問題が解決しない場合は、Webサーバーの設定に問題がある可能性があります。関連する質問：IE9 blocks download of cross-origin web font

出典

2013-04-01 13:17:17

答えをありがとう。しかしそれはうまくいかなかった。それはクロムとMozilla（そして私がインストールしていないブラウザーが適切に機能している）で動作しています。しかし、IE 10で動作しません。私は何か間違っているかもしれませんが、私は何がすべきか分かりません。 –

@BartRoelofs：Shardeeフォントを使用して、ローカルWebサーバー上のIEのすべてのバージョンで正常に機能した、追加情報と更新された '@ font-face'ルールで答えを更新しました。 –

オプションで、iOS 4.1以前をサポートする '.svg'ファイルを追加します。 –

したがって、IE10では、id=menuの要素内のメニューは、宣言されたフォント "shardee"ではなくブラウザのデフォルトフォントで表示されることが明らかです。これは実際にメニューを読みやすくします。しかし、技術的には、説明はDeveloper Tools（F12キーを押して入力）のConsoleペインに表示されます。エラーメッセージ（コードCSS3114）は、@font-faceが埋め込みの使用権のチェックに合格していないことを示しています。

フォントの使用権を確認し、可能であれば権利を取得するための著作権者（Bright Ideasと推定される）に連絡してください。

出典

2013-04-01 13:44:49

FontPrepはそれも私はこの同じ問題に遭遇したとF12を走っfonts.css

出典

2014-01-17 23:14:51

を作成するのMac OS X用の優れたウェブフォントジェネレータです。 IE10では、私がいたサイトの互換性ビューが有効になっているようです。互換性ビューを無効にすると、カスタムフォントが表示されます。これは誰かに役立ちます願っています...

出典

2015-12-04 20:17:16 TryingToWork