ほとんどの実装では、CSS メディア クエリで参照される背景画像が事前にダウンロードされます。(ただし、すべてのブラウザでサポートされているわけではありません。 )display:none;
同じことが、メディア クエリを介して含めたすべてのフォントに適用されます — より大きな/異なるビューポート用に指定されている場合でも.*
なんで?
これにより、縦向きから横向きなど、ビューポートのサイズが変更された場合に、よりスムーズな移行が可能になります。
解決?
あなたが言及した制約を考慮すると、CSS だけでこれを行うためのきれいな方法はわかりません。JS (ただし、正常に劣化することを確認してください) またはPHPで何かを行うことができます。
しかし、 HTTP リクエストと訪問者がダウンロードする必要のある量を減らす最も簡単な方法には、次のいずれかまたはすべてを実行することが含まれます。
- より少ないフォントを使用するか、代わりに Web セーフ フォントを使用します。
- フォントにCDNを使用する。
- 使用する文字のみを含む「縮小された」フォント ファイルを含めます。
後者の 2 つはGoogle Web Fontsを参照してください。
サイトにとって重要なモバイル トラフィックを大量に期待または取得する場合は、モバイル ファーストのアプローチから Web サイトのデザインとマークアップを再考する価値があります。必要なものとそうでないものです。(このアプローチは、多くの場合、サイトのデスクトップ バージョンの煩雑さを軽減するのにも役立ちます。)
*いじるアプローチはフォントにも役立つ可能性がありますが、これまでのところ文書化されていないため、自分でブラウザー テストを行う必要があります。