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が正しく動作している可能性があります(これは私の望む動作ではありませんが)。誰もこれにどのような光を当てることができますか?
条件付きコメントでie9の@ font-face宣言を囲むだけでいいのですか?それはモバイルのための@ font-faceを再宣言することです。私は "モバイル"によってIEMobileを意味すると仮定していますか?あなたはcondtionalコメントを介してIEMobileをターゲットにすることもできますので、どちらの方法でも実行できます。
@media screen and (max-device-width: 1000px) { @font-face{ font-family: 'SomeFont'; src: url('../Fonts/somefont.eot'); } }