したがって、プロジェクトで Font Awesome を使用していて、テストでIE8の問題が発生しています。
Windows IE9では、ChromeとFirefoxはフォントを適切に表示します(Firefoxと同様、ChromeとOS Xの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つのフォントファイルがあります...
...それらが属している場所であり、世界中から読み取ることができます(755アクセス許可)。何が欠けていますか? IE8の互換表示で何かする必要がありますか?
同じコンピューターがFont Awesomeサイトのフォントを問題なく表示するので、これは私が間違っていることに違いありません。
リクエストに応じて、font-awesome.cssのコピーはこちらです font-awesome.css 。フォントファイルへのパスを除いて、多かれ少なかれ私はそれらからダウンロードしたものです。
@ Abody97に基づいて https://html5shim.googlecode.com/svn/trunk/html5.js を追加しました(上記のコードが更新されました)。更新と削除キャッシュの更新の後でも、まだ運がありません。
私は同じ問題を抱えており、解決策を見つけました。誰かがまだそれを必要とする場合に備えて、ここに投稿します。
問題は、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 */
}
これは本当に一般的な問題であると思われ、これによると discussion は:beforeを使用してアタッチされているキャラクターに関係しています。 IE 8はfa-nameクラスを使用せず、文字を手動で挿入します。
例えばの代わりに:
<i class="fa fa-user fa-lg"></i>
使用する:
<i class="fa fa-lg"></i>
文字コードは Font Awesome Cheatsheet にあります。これは、IE=バージョンに関係なく、常に機能しているようです。
これが誰かを助けることを願って、
ジェイソン
CSSを含める前に、これをhead
に追加してみてください。
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
同じ問題があり、IE8の「セキュリティレベル」を「高」以下に設定することで解決しました。
一般に、フォントファイル(eot、woff、ttf ...)を「使用不可」にする(たとえば、404応答が発生する)ことで「ボックス」を再現できます。つまり、セキュリティレベルが「高」であると想定します。再ロードされていません...
問題の原因となったインクルードファイルによって追加の<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" />
IEバージョン9未満は woff ファイル形式をサポートしていません。おそらくそれがIE8でそれらを取得できない理由の答えです
フォントファイルのプライベートとして応答ヘッダーのキャッシュコントロールを作成すると、IE8では完全に機能しました。これについての詳細な説明はここにあります-ここで彼はPDFファイルの解決方法を説明します( Ca n't display not PDF from HTTPS from = IE 8(64ビットVistaの場合) )。
お役に立てれば。
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>
私のために働いた唯一のものはこれでした:
https://github.com/FortAwesome/Font-Awesome/issues/2324
ジェイソンからの他の回答と組み合わせる:例の代わりに:
<i class="fa fa-user fa-lg"></i>
使用する:
<i class="fa fa-lg"></i>