3

私の現在のウェブサイト-デザインは、ブートストラップレスポンシブフレームワークで構築されています。ドキュメントサイズの約50%を占めるいくつかのカスタムフォントを使用します。フォントはCSSを介して含まれているため、含める方法を変更することはできません。

私の現在の目標は、帯域幅の消費を減らすために、モバイルデバイスがこれらのフォントを要求するのを防ぐことです。

@media (min-width: 480px)レスポンシブレイアウトでフォントを読み込まないようにするCSSの方法はありますか?

4

3 に答える 3

1

メディアクエリで参照されている場合、すべての背景画像が事前にダウンロードされているとは限りません -

http://timkadlec.com/2012/04/media-query-asset-downloading-results/

おそらく、この手法はフォントでも機能するでしょう。JS を必要とするもの (typekit、google など) を使用している場合は、とにかく JS が原因でフォントが要求されます。

于 2013-01-21T15:55:44.550 に答える
1

モバイル用とデスクトップ用の 2 つの異なるスタイルシートを作成し、PHP ブラウザー検出またはその他のさまざまな方法を使用して、ユーザーがモバイル デバイスとデスクトップ デバイスのどちらを使用しているかを確認し、対応するスタイルシートを提供することができます。

PHPget_browser関数を見てみましょう: http://php.net/manual/en/function.get-browser.php

于 2013-01-21T14:33:28.740 に答える
1

ほとんどの実装では、CSS メディア クエリで参照される背景画像が事前にダウンロードされます。(ただし、すべてのブラウザでサポートされているわけではありません )display:none;

同じことが、メディア クエリを介して含めたすべてのフォントに適用されます — より大きな/異なるビューポート用に指定されている場合でも.*

なんで?

これにより、縦向きから横向きなど、ビューポートのサイズが変更された場合に、よりスムーズな移行が可能になります。

解決?

あなたが言及した制約を考慮すると、CSS だけでこれを行うためのきれいな方法はわかりません。JS (ただし、正常に劣化することを確認してください) またはPHPで何かを行うことができます。

しかし、 HTTP リクエストと訪問者がダウンロードする必要のある量を減らす最も簡単な方法には、次のいずれかまたはすべてを実行することが含まれます。

  • より少ないフォントを使用するか、代わりに Web セーフ フォントを使用します。
  • フォントにCDNを使用する。
  • 使用する文字のみを含む「縮小された」フォント ファイルを含めます。

後者の 2 つはGoogle Web Fontsを参照してください。


サイトにとって重要なモバイル トラフィックを大量に期待または取得する場合は、モバイル ファーストのアプローチから Web サイトのデザインとマークアップを再考する価値があります。必要なものとそうでないものです。(このアプローチは、多くの場合、サイトのデスクトップ バージョンの煩雑さを軽減するのにも役立ちます。)


*いじるアプローチはフォントにも役立つ可能性がありますが、これまでのところ文書化されていないため、自分でブラウザー テストを行う必要があります。

于 2013-01-21T14:28:01.643 に答える