高品質の画像は、優れた Web サイトと優れた Web サイトの違いを生みます。ただし、ファイルの重量も増加し、簡単に拡大縮小、編集、操作できないため、追加の HTTP リクエストが発生します。
レスポンシブ デザインに関しては、多くの場合、画像をまったく使用せず、代わりに適切な場合にアイコン フォントを使用することが最善の解決策となります。これらは簡単にカスタマイズでき、透明性が確保され、ブラウザーのサポートも優れています。また、完全な書体よりも含まれる文字数が少ないため、使用するメモリも少なくなります。
アイコンフォントの作成本当に必要なアイコンのみを使用して、ファイル サイズを削減できる独自のカスタム フォントを作成できるジェネレーターがいくつかあるため、時間はかかりません。これらは、フォントと CSS ファイルを含むダウンロード パッケージも提供しており、Web サイトにすぐに統合できます。
アイコンフォントを使用すると、ロード時間を最大 14% 短縮また、本質的にベクトルであるため、画像スプライトよりもサイズが小さいにもかかわらず、無限にスケーラブルです。新しいグラフィックを必要とせずに、CSS を使用してアイコン フォントのスタイルを動的に設定できます。さらに、「text-shadow」などの CSS3 プロパティを使用できるという利点もあります。
のプロセスアイコンフォントを使用するこれは、他のフォントを読み込むのと同じです。「@font-face」メソッドを使用すると、各アイコンに適用する CSS ルールを作成し、特定のアイコン クラスを作成し、最後に単純な HTML マークアップを追加できます。または、別のアプローチを採用し、「data-icon」属性を CSS 属性セレクターと組み合わせて使用することもできます。
スケーラブルで軽量、解像度に依存しないフォントを独自のプロジェクトで使用し始めるのに役立つ、最高のアイコン フォント ジェネレーターを 8 つまとめました。
[nggallery id=14419 レイアウト="リスト" ]
[wp_scm_comment]