2

@font-face をクロスブラウザーで使いやすい方法で使用するための「正しい」構文について調査を行っているときに、次のサイトに出くわしました。これは非常に理にかなっています
。新しい防弾フォントの顔の構文

ただし、Font Squirrel が提供する @font-face デモ コードのいずれかを見ると、@font-face の定義は次のとおりです。 

@font-face {
    font-family: 'OswaldLight';
    src: url('/utils/load_demo_font.php?font=1145/Oswald-Light-webfont.eot');
    src: url('/utils/load_demo_font.php?font=1145/Oswald-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/utils/load_demo_font.php?font=1145/Oswald-Light-webfont.woff') format('woff'),
         url('/utils/load_demo_font.php?font=1145/Oswald-Light-webfont.ttf') format('truetype'),
         url('/utils/load_demo_font.php?font=1145/Oswald-Light-webfont.svg#OswaldLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

Font Squirrel デモ スクリプトのすべてに 2 つの src 宣言が含まれているのはなぜですか? 私はこれを理解できません。

4

2 に答える 2

4

これは IE9 互換モードの問題です。

完全な説明については、まずhttp://www.fontspring.com/blog/the-new-bulletproof-font-face-syntaxを参照してください。

使い方

Internet Explorer <9 では、src 属性のパーサーにバグがあります。src に複数のフォント形式を含めると、IE は読み込みに失敗し、404 エラーを報告します。その理由は、IE が開き括弧から最後の閉じ括弧までのすべてをファイルとしてロードしようとするためです。この間違った動作に対処するには、最初に EOT を宣言し、疑問符を 1 つ追加するだけです。クエスチョン マークは、残りの文字列がクエリ文字列であると IE に認識させ、EOT ファイルだけをロードします。

次に、フォローアップ記事を参照してください: http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

今月初めに導入した新しい構文に潜在的な潜在的な問題が Microsoft によって提起されました。間もなくリリースされる IE9 には、IE7 モードと IE8 モードの両方でレンダリングできる機能が付属しています。これら 2 つのモードで、Microsoft は実際の IE7 と IE8 に影響を与えたパーサーのバグを「修正」しました。この修正により、これらの互換モードの @font-face 構文が壊れます。
...
この構文は、EOT を再度指定する 2 番目の 'src:' 属性が追加されていることを除いて、以前の反復とまったく同じです。これが必要かどうかの判断はお客様にお任せします。

互換性ビューを気にしない場合は、最初にそれをクリアできますsrc。

于 2013-09-20T14:59:15.557 に答える
0

ブラウザーが 2 番目のものを理解するが、最初のものは理解しない場合、2 番目のものは最初のものをオーバーライドします。このようにして、複数のブラウザーの互換性を追加できます。ブラウザ A は最初の SRC ステートメントを使用し、ブラウザ B、C、および D は 2 番目の SRC ステートメントを使用します。

于 2013-02-04T13:23:36.143 に答える