3

カスタム フォント ( Gotham-Light.eot) をダウンロードしましたが、Internet Explorer 9 で動作しません。

@font-face {
    font-family: Gotham-Light;
    src: url('Gotham-Light.eot');
}

これはうまくいきません。ASP MVC3 を再構築し、カスタム ツールを使用していますが、まだ何も使用していません。

4

4 に答える 4

17

まず、商品:

@font-face {
    font-family: 'ludger_duvernayregular';
    src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');
    src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot?#iefix') format('embedded-opentype'),
         url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.woff') format('woff'),
         url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.ttf') format('truetype'),
         url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.svg#ludger_duvernayregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

p.test {
    font-family: 'ludger_duvernayregular', Arial, serif;
    font-weight: 400;
    color: blue;
}

注意してください、私は意図的に動作していると見やすいフォントフェイスを使用しました. (そして、私は Web フォントで Gotham にアクセスできないので... Gotham が Web フォント形式での使用を許可されているかどうかさえわかりません。ライセンスがない場合、またはライセンスで許可されていない場合、それを尊重してください。）したがって、フォントファイルへのパスについて少し考える必要があります。

私が行ったことは、AlienWebGuy がリンクされているブログ投稿を参照することです。これは良いことです。長くないので読んでみます。要約すると、次のようになります。

  1. フォント ファイルの MIME タイプの設定が間違っている可能性があります。詳細については、以下を参照してください。また、Apache にこの問題がある可能性があるというメモもあります。これは IIS の問題のようです (記事によると)。
  2. WOFF の代わりに EOT ファイルを使用するように IE9 をだます (?) ことができます。これにより、明らかに問題が解決されます (記事によると)。

さらに、余談ですが、IE9 では、まったく同じ CSS を使用したjsFiddle デモ でフォントを表示する際に問題がありました。とても奇妙です。IE7 と 8 は問題なく動作したので、何らかの形で動作していたことはわかっています。それが何なのかはわかりませんでしたが、同じマークアップと CSS を自分のサイトのファイルに保存したところ、問題なく動作しました。

壊す...

上記のCSSで何が起こっているのかを説明しましょう。各行について説明します。ただし、次のファイル形式の Web フォントがあることに注意してください。

  • eot
  • ワッフ
  • ttf
  • svg

レガシー iOS をサポートする必要がない場合はeot、おそらく必要なだけですttf。woffただし、SVG の翻訳は入手が困難です。

次に、最初にフォントに名前を付けて、参照できるようにします。

font-family: 'ludger_duvernayregular';

IE9 互換モード:

src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');

ここで使用している URL が実際に実際のファイルにつながっていることを確認してください。それをアドレスバーに入れて、何が起こるか見てみましょう (ダウンロードしますか? 404?)。

ただし、以下では、完全な URL を削除して、ステートメント全体 (末尾を含む) を確認できるようにします。

IE6、7、および 8:

src: url('http://../ludgerduvernay.eot?#iefix') format('embedded-opentype'),

この部分に注意してください：

.eot?#iefix <<< See below for an explanation.

さらに IE CSS を修正

まれに、@font-face 宣言の文字数が多すぎるために IE が失敗することがあります。これは、ほとんどの場合、「?」の後にハッシュ記号「#」を追加することで解決できます 。疑問符。これにより、少し余裕ができます。

- Font Springの記事より

なぜこれが機能するのかわからないので、彼らの言葉を信じています。

最新のブラウザ:

url('http://../ludgerduvernay.woff') format('woff'),

サファリ、アンドロイド、iOS:

url('http://../ludgerduvernay.ttf') format('truetype'),

レガシー iOS:

url('http://../ludgerduvernay.svg#ludger_duvernayregular') format('svg');

次に、それを使用します。

p {
    font-family: 'ludger_duvernayregular', Arial, serif;
}

これが IE6 に戻って動作することに実際に驚きました。とにかく、相対パスではなく、ファイルへのフル パスを使用していることに注意してください。通常は、ここから開始するのが適切です。リンクがダウンロードされることを確認してください。基本的で失敗しやすいので、私はこれを大々的に作っています。

そのため、ファイルが URL を使用してダウンロードされ、他のブラウザーや IE6、7、8 で動作する場合は、別の可能性を検討できます。

サーバー側 (IIS) で IE9 を修正する

Microsoft の IIS サーバーは、MIME タイプを持たないリソースの送信を拒否します。私たちが開発した構文は、IE9 が EOT よりも WOFF を優先するように強制しますが、IIS で提供されると失敗します。これは、IE9 が WOFF ファイルを要求するためですが、WOFF は IIS で定義された MIME タイプではないため、404 Not Found エラーが返されます。これを解決するには、MIME タイプが「application/x-font-woff」の「.woff」を IIS インストールに追加する必要があります。

- Font Springの記事より

そのため、サーバーがボーリングしていないことを確認する必要がある場合があります。Chrome コンソールまたは Firebug NET タブを使用して、ファイルと共に送信されたヘッダーを表示することもできます。

ここで少し助けてもらったので、次のオプションについて検討する必要があると思います。

  1. Google Web フォント. ヒーローにならないでください。彼らはフォントをホストし、インクルード スタイルシート マークアップを提供してくれます。また、かなりクールなフォントもいくつかあります。Typekit、Webtype、Fontdeck、Fonts Live など、他の Web フォント サービスもあり
  2. Font Squirrelには@Font-Face Generatorがあり、必要なすべてのファイルを提供できます (警告: Web での使用が許可されていることがわかっているフォントのみを提出してください)。エキスパート モードを使用すると、デモを含む多くの優れた機能を含む ZIP ファイルが得られます。私が受け取ったものは、ここからダウンロードできます。興味深いことに、生成された CSS は Font Spring のものとまったく同じですが、コメントはありません。それはおそらく偶然ではありません。
  3. この Opera Dev pageで素晴らしいツールを見つけました。それもまた読みごたえがあります。
  4. そしてもちろん、そのブログ投稿 AlienWebGuy は、Font Spring にリンクされています。

これは難しいことではありませんが、トラブルシューティングの方法を知っておく必要があります。ファイルがダウンロードされていることを常に確認してください。Chrome コンソールの [Resources] タブまたは Firefox の Firebug アドオンを使用し、[NET] タブを監視して、ダウンロードされるかどうかを確認できます。文字通りうまくいかない場合は、そのページまたはコードをアクセスできる場所に投稿して、レビューできるようにします。

ハッピーコーディング。:)

デモで使用されている非常にクールなフォントは、Ludger Duvernay Regularです。詳細については、Steve Cloutier/Cloutierfontesのサイトを参照してください。無料で個人利用できるようにしていただきありがとうございます。:)

于 2012-09-11T02:16:39.463 に答える
1

Gotham は商用製品であり、どこかからダウンロードしたばかりの場合は、おそらく違法コピーまたは偽物であり、技術的にも壊れている可能性があります.

Cicleなど、同様のデザインのフリー フォントの使用を検討してください。

于 2012-09-11T05:14:35.550 に答える
1

http://www.fontspring.com/blog/fixing-ie9-font-face-problemsに記載されている手順に従っている場合は、おそらくフォントの呼び出し方法です。

スタイルシートから正しい場所を指していることを確認してください。上記のコードは、フォント ファイルがスタイルシートと同じディレクトリにある場合にのみ機能します。

お役に立てれば。

于 2012-09-11T00:53:06.803 に答える