web-dev-qa-db-ja.com

CSSフォントフェイス "？#iefix"

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_」があるのはなぜですか？

cssfont-face
25
12japerk

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

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

Internet Explorer <9では、src属性のパーサーにバグがあります。 srcに複数のフォント形式を含めると、IEはロードに失敗し、404エラーを報告します。理由は、IEが左括弧から最後の右括弧までのすべてのファイル。その間違った動作に対処するには、最初にEOTを宣言し、単一の疑問符を追加するだけです。疑問符はばかげていますIE =文字列の残りの部分はクエリ文字列であり、EOTファイルのみをロードすると考えます。他のブラウザは、仕様に従って、srcカスケードとフォーマットヒントに基づいて必要なフォーマットを選択します。

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

必要に応じて、以下にいくつかの情報を示します。 https://github.com/stubbornella/csslint/wiki/Bulletproof-font-face 。

56
Shrey Gupta