22

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

Windows IE9 では、Chrome と Firefox はフォントを正しく表示します (OS X の Firefox、Chrome と Safari と同様) が、Windows の IE8 にはフォントの代わりにボックスが表示されるという問題があります。

ここに画像の説明を入力

私のコードは次のとおりです。

<!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 をミックスに追加しました (上記のコードは更新されています)。更新と削除キャッシュの更新の後でも、まだうまくいきません。

4

10 に答える 10

14

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

問題は、IE がフォント ファイルの読み込みに失敗し、404 エラーを返す奇妙な GET 要求を作成していたことです。

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

?#iefixfont-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 */
}
于 2013-04-25T14:53:45.037 に答える
6

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

<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
于 2012-08-26T13:42:23.827 に答える
4

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

一般に、フォントファイル（eot、woff、ttf ...）を「利用不可」にすることで「ボックス」を再現できました（たとえば、404応答が返されます）-したがって、セキュリティレベル「高」ではロードされていないだけです...

于 2013-02-20T10:50:55.180 に答える
3

<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" />
于 2012-10-18T11:50:59.890 に答える
1

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>
于 2014-01-24T21:51:11.660 に答える
1

応答ヘッダーのキャッシュ コントロールをフォント ファイルのプライベートとして作成すると、IE8 で完全に機能しました。これに関する詳細な説明は、ここで見つけることができます-彼はPDFファイルをどのように解決したかを説明しています（IE 8（64ビットVista）でHTTPSからPDFを表示できません）。

お役に立てれば。

于 2014-01-22T23:27:20.410 に答える
1

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

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

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

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

使用する：

<i class="fa fa-lg">&#xf007;</i>
于 2015-05-15T15:00:36.687 に答える
-3

IE だけでなく、すべてのブラウザで同じ問題が発生します。

面白いことに、ファイルを正しい場所に配置する必要があります。

これは、以下の構造が必要であることを意味します。

folder levels look like this:

    level 1                 level 2  level 3

----index.html 

----font-awesome-4.2.0  ----css ---- fontawesome.css

                        ----css ---- fontawesome.min.css 

                        ----fonts----... 

                                 ----... 

                        ----...

次に、リンク sylte を index.html に次のように配置します。

<link rel="stylesheet" href="./font-awesome.min.css">頭の間に

非常に重要な注意事項: fontawesome フォルダーと他のフォルダーを結合しようとしないでください。それらを別々に保管してください。

今すぐテストしてください。すべて問題ありません。

于 2014-12-05T00:09:18.737 に答える