27

css @font-face について質問があります。この Web サイト (http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax) の次のコードを使用しています。

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
     url('myfont-webfont.woff') format('woff'), 
     url('myfont-webfont.ttf')  format('truetype'),
     url('myfont-webfont.svg#svgFontName') format('svg');
}

url('myfont-webfont.eot?#iefix')行「 」#iefixの最後に「 」があるのはなぜですか?

4

1 に答える 1

58

これは、IE8 以下がフォント宣言を解釈する方法が原因です。通常url('myfont-webfont.eot')、これらのバージョンの IE では 404 サーバー エラーが発生します。?#iefixサーバーの問題の修正を追加します。(IE に条件付きスタイルシートがあるのと同じ理由です。)

Fontspringによると（ソースから直接）：

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

したがって、必要な部分は?; これ#iefixは、ブラウザーによって特定の方法で解釈されない、プログラマーにとって単なるセマンティックな行であると思います。

必要に応じて、詳細情報を次に示します: https://github.com/stubbornella/csslint/wiki/Bulletproof-font-face。

于 2013-01-08T02:45:45.993 に答える