web-dev-qa-db-ja.com

Font AwesomeフォントがIE8でボックスとして表示される

したがって、プロジェクトで Font Awesome を使用していて、テストでIE8の問題が発生しています。

Windows IE9では、ChromeとFirefoxはフォントを適切に表示します（Firefoxと同様、ChromeとOS XのSafari））が、WindowsのIE8には問題があります。フォントの代わりにボックスを取得します。

enter image description here

私のコードは：

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <title>Site title</title>

    <!--[if lt IE 9]>
        <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <link href=".../css/css.css" rel="stylesheet" type="text/css">
    <link href="../css/print.css" rel="stylesheet" type="text/css" media="print">

    <link href="../Apple-touch-icon.png" rel="Apple-touch-icon-precomposed">
    <link href="../css/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css">
    <link href="../css/jquery-ui-overrider.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lato|Michroma&subset=latin&v2" rel="stylesheet" type="text/css">
    <link href="../css/prettify.css" rel="stylesheet" type="text/css">
    <link href="../css/font-awesome.css" rel="stylesheet" type="text/css">
    <!--[if IE 7]>
        <link href="../css/font-awesome-ie7.css" rel="stylesheet">
    <![endif]-->

4つのフォントファイルがあります...

  • fontawesome-webfont.eot
  • fontawesome-webfont.svg
  • fontawesome-webfont.ttf
  • fontawesome-webfont.woff

...それらが属している場所であり、世界中から読み取ることができます（755アクセス許可）。何が欠けていますか？ IE8の互換表示で何かする必要がありますか？

同じコンピューターがFont Awesomeサイトのフォントを問題なく表示するので、これは私が間違っていることに違いありません。

リクエストに応じて、font-awesome.cssのコピーはこちらです font-awesome.css 。フォントファイルへのパスを除いて、多かれ少なかれ私はそれらからダウンロードしたものです。

@ Abody97に基づいて https://html5shim.googlecode.com/svn/trunk/html5.js を追加しました（上記のコードが更新されました）。更新と削除キャッシュの更新の後でも、まだ運がありません。

cssinternet-explorerwebfontsfont-awesome
22
Jason

私は同じ問題を抱えており、解決策を見つけました。誰かがまだそれを必要とする場合に備えて、ここに投稿します。

問題は、IEがフォントファイルのロードに失敗し、404エラーを返す奇妙なGETリクエストを作成していたことでした。

ここにあるトリックを使用します： http://www.fontspring.com/blog/fixing-ie9-font-face-problems 問題を修正することができました。

追加 ?#iefixは、font-faceを含むCSSのeot url（この場合はfont-awesome.css）

@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 */
}
14
rolegio

これは本当に一般的な問題であると思われ、これによると discussion は：beforeを使用してアタッチされているキャラクターに関係しています。 IE 8はfa-nameクラスを使用せず、文字を手動で挿入します。

例えばの代わりに：

<i class="fa fa-user fa-lg"></i>

使用する：

<i class="fa fa-lg">&#xf007;</i>

文字コードは Font Awesome Cheatsheet にあります。これは、IE=バージョンに関係なく、常に機能しているようです。

これが誰かを助けることを願って、

ジェイソン

11
Jason

CSSを含める前に、これをheadに追加してみてください。

<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
6
Chris

同じ問題があり、IE8の「セキュリティレベル」を「高」以下に設定することで解決しました。

一般に、フォントファイル（eot、woff、ttf ...）を「使用不可」にする（たとえば、404応答が発生する）ことで「ボックス」を再現できます。つまり、セキュリティレベルが「高」であると想定します。再ロードされていません...

4
mr_x_hacker

問題の原因となったインクルードファイルによって追加の<html>タグが生成されていることがわかりました。したがって、私の最終的なファイルでは、<html lang="en">と<html>の両方がありました。余分な<html>タグがIEを奇妙なモードにスローし、フォントの素晴らしいアイコンが表示されました。私が抱えていた問題。

その不正な<html>を排除し、ヘッダーが正しく設定されていることを確認すると、すべてが修正されました。

現在、すべてのページでヘッダータグのボイラープレートセットを使用しています。

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>    
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <meta charset="utf-8" />

私がこれを1つのページに入れる前に：

<!DOCTYPE html>
<html lang="en">
<html>  <!-- This tag was causing the problem, removing it solved things for me -->
<head>    
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <meta charset="utf-8" />
3
Jason

IEバージョン9未満は woff ファイル形式をサポートしていません。おそらくそれがIE8でそれらを取得できない理由の答えです

1
Przemysław Kaczmarczyk

フォントファイルのプライベートとして応答ヘッダーのキャッシュコントロールを作成すると、IE8では完全に機能しました。これについての詳細な説明はここにあります-ここで彼はPDFファイルの解決方法を説明します（ Ca n't display not PDF from HTTPS from = IE 8（64ビットVistaの場合） ）。

お役に立てれば。

1
Mano

IIS（MVC環境）の下で、次のルールをWeb.configに追加する必要がありました。

   <system.web>
    <httpHandlers>
      <add verb="GET" path="*.eot" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.svg" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.ttf" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.woff" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.otf" type="System.Web.StaticFileHandler" />
    </httpHandlers>
  </system.web>
1
Sean Anderson

私のために働いた唯一のものはこれでした：

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

ジェイソンからの他の回答と組み合わせる：例の代わりに：

<i class="fa fa-user fa-lg"></i>

使用する：

<i class="fa fa-lg">&#xf007;</i>
1
viber8