@mediaクエリルール内の@ font-faceの動作の不一致(IE9)

Chrome、Firefox、Safariのメディアクエリやリソースに関する現在の動作は、必要なときまでリソースを読み込まないことです。例えば480px解像度の携帯端末では、 max-device-width:1000px のルール内で画像が読み込まれません。当然これは、モバイルデバイスから離れて重いデスクトップリソースを保持するのに最適です。

フォントリソースの読み込みに関して、私はこのアプローチと矛盾しています。以下は上記のすべてのブラウザのWebフォントをロードします。IE9以外

@media screen and (max-device-width: 1000px) {
    @font-face{ 
        font-family: 'SomeFont';
        src: url('../Fonts/somefont.eot');
        /* full stack here etc. */
    }
}

私は大きな書体をモバイルから遠ざけたいので迷惑ですが、IE9はメディアクエリの外に出ていない限りフォントを読み込まないでしょう。

これは正しい動作ですか?スペックの中で特にフォントリソースについて何も見つけることができないので、IE9が正しく動作している可能性があります(これは私の望む動作ではありませんが)。誰もこれにどのような光を当てることができますか?

4

3 答え

理由は次のとおりです: "@mediaのAt-rulesはCSS2で無効です。 1
Firefox のように見えます

3
追加された
それは答えのようです! CSS3でも変わるかもしれないようです。良い発見!
追加された 著者 Graham Conzett,

条件付きコメントでie9の@ font-face宣言を囲むだけでいいのですか?それはモバイルのための@ font-faceを再宣言することです。私は "モバイル"によってIEMobileを意味すると仮定していますか?あなたはcondtionalコメントを介してIEMobileをターゲットにすることもできますので、どちらの方法でも実行できます。

<!--[if IE 9]>

0
追加された

古いものですが、私の答えは同じ問題を抱えている他のユーザーを助けることができます。私はこの問題を解決するための記事を書いています。これはここをクリックしてください。

IE10では条件付きコメントは無視されるため、基本的には条件付きコメントとJavaScriptベースソリューションを使用できます。

0
追加された