4

おそらく奇妙な質問であり、あなたの答えの後で私はこれを尋ねることを恥じているかもしれません。

私のウェブサイトに特定のフォントが埋め込まれています（経由@font-face）。このフォントは、より広い解像度（デスクトップ）でのみ表示されるセクションに使用されます。たとえばスマートフォンでは、このセクションは表示されません（display:none）。

ルールはメディアクエリ内ではなく、@font-faceスタイルシートの冒頭で定義されています。

モバイルデバイスでサイトを表示している場合、この埋め込みフォントファイルの読み込みを回避できるかどうか疑問に思います。

ほら。font-fileにはviewkbがあり、サイトをできるだけ高速にしたいと思っています。私のモバイル版ではフォントは必要ないので、

1.）フォントは現在ロードされていますか？iPhoneでこれをテストする方法がわかりません。使用しているセクションがに設定されているのでdisplay:none、フィードバックはありません。

2.）ロードされている場合（そして私はそう思います）、この@font-face宣言media-queryをmax-width：640px（iPhoneなど）の中に設定することは可能でしょうか？この場合、ファイルはロードされませんか？

そのことについて何かアイデアはありますか？

前もって感謝します。

4

2 に答える 2

2

1）の画像は、一部のブラウザに読み込まれ、一部のブラウザにdisplay:noneは読み込まれません。ですから、フォントについても同じだと思います。

2）FF 3.6にはバグがありますが、最近はおそらく修正されています。私の知る限り、メディアクエリと@ffの両方をサポートするブラウザは正しくレンダリングする必要があります。

CSS標準では、@ media内のAtルールはCSS2.1では無効であると規定されていますが、この投稿によると、@importとmedia-target宣言を使用して外部ファイルをロードできます。

@import url("fonts.css") screen and (min-width:800px);

しかし、あなたが知っている、@importそれはうまく機能しません。だから私はCSS2を気にせず、CSS3を書いているふりをします;-)

この男は、メディアクエリ内で@ffを移動するだけで大​​丈夫だと言います。

最善の解決策は、メディアクエリ内に配置することだと思います（古いブラウザからメディアクエリを非表示にすることを目的としたキーワードmin-widthを使用することを忘れないでください）。only

プログレッシブエンハンスメントアプローチよりも使用するmin-width方が間違いなく適してmax-widthいます。サイトがモバイルデバイス向けに設計されている場合は、おそらくそれを使用したいと考えています。

しかし、他の人が言ったように、テストは必須です...そして結果も共有します;-)

于 2012-09-23T09:41:00.480 に答える
1

うまくいくようです。古いバージョンのIE（古いブロザーでのメディアクエリサポートにmodernizrなどを使用しています）ではテストしませんでしたが、機能する可能性があります。

@font-face必要なメディアクエリ内で直接ルールを定義しています。私はそれをすべての最新のブラウザでテストしました。ブラウザウィンドウが非常に小さく、メディアクエリがトリガーされない場合、リクエストはありません。ウィンドウのサイズを（フォントが必要な場所で）より大きくすると、ロードされます。

まさに私が欲しかったもの。

于 2012-09-30T17:59:00.937 に答える