fontelloを使用して、必要なアイコンフォントのみをロードする

Fontello：Lightweight Custom Icon fonts

を作成します

Fontelloは、ベクター画像からカスタムアイコンフォントを作成するための無料のユーザーフレンドリーなサービスです。 さまざまなオープンソースプロジェクト（Font Awesome、Entypo、および典型など）のアイコンを単一のコンパクトファイルに統合することにより、Web開発を合理化します。これにより、ページの読み込み時間が大幅に短縮され、全体的なWebサイトのパフォーマンスが向上します。

アイコンフォントは、標準画像よりもいくつかの利点を提供します。高解像度の画面では鮮明で、CSS（サイズ、色、影）で簡単にスタイリングされ、画像スプライトよりも簡単に管理できます。 ただし、新しいプロジェクトの場合、SVG画像は優れた代替品である可能性があり、マルチカラー機能とよりシャープなビジュアルを提供します。 レガシーブラウザのサポートまたはワークフローの制約がアイコンフォントを必要とする場合、それらの使用を最適化することが重要です。

Font Awesome（バージョン4.7、〜75kb）などの人気のあるアイコンフォントライブラリを使用した課題は、ほとんどのプロジェクトが利用可能なアイコンのほんの一部のみを利用していることです。 ライブラリ全体をロードすると、ページの重量が不必要に増加します。 fontelloは、必要なアイコンを選択できるようにすることでこれを解決します。

カスタムフォントの作成

1. アイコンの選択：Fontello Homepageから必要なアイコンを選択します。
2. カスタマイズ：「名前のカスタマイズ」タブを使用すると、アイコンを変更できます（たとえば、に変更icon-facebookに変更）。 [設定]ボタンを使用すると、プレフィックスの変更が可能になります（たとえば、デフォルトのicon-fbプレフィックスの変更）。 個々のアイコンコードを調整することもできます。 icon-
3. ダウンロード：満足したら、生成されたフォントファイルをダウンロードしてください。

フォントの統合

1. 抽出物：ダウンロードしたzipファイルを抽出します。 「CSS」、「フォント」フォルダー、および「config.json」ファイル（フォント構成を含む）があります。
Import（オプション）：
2. 既存のプロジェクトの場合、「config.json」ファイルをfontelloページにドラッグするか、設定＆gtを介してインポートします。 Import。
ファイルの配置：
3. すべてのファイル（フォルダー構造の維持）をプロジェクトディレクトリにコピーします。 css inclusion：
プロジェクトに生成されたCSSファイル（例えば
4. ）を含めます。 social-media.css使用法：に置き換えます。
5. カスタム画像を使用して <i class="icon-classname"></i>Fontelloは膨大なライブラリを提供していますが、カスタムSVG画像をインポートできます。 SVGが適切に準備されていることを確認してください。塗りつぶし、色、複雑なルール（icon-classname塗りつけなど）、および脂肪ラインの属性を取り外します。輪郭を単一のアウトラインに参加させます
パフォーマンスが向上します

fontelloはファイルサイズを大幅に削減します。 一例では、フォントの素晴らしい4.7ファイル（75kb）が4kbのFontelloファイル（8つのアイコンを使用）に縮小されました。 節約は、使用するアイコンの数によって異なります。 これにより、HTTPリクエストが最小化され、読み込み速度が向上します。 さらに、fontelloは、複数のフォントにわたって一貫したアイコンプレフィックスを可能にし、管理を簡素化します。

Advanced Configuration

evenodd

corsヘッダー：

別のドメインでフォントファイルをホストする場合、

ファイルでCORSヘッダーを構成します：

• フォントマイムタイプ：.htaccess：
で正しいマイムタイプを設定します

<code class="language-htaccess"><filesmatch>
  Header set Access-Control-Allow-Origin "*"
</filesmatch></code>

結論
• fontelloは、軽量でカスタマイズされたアイコンフォントの作成を簡素化します。 一見小さいファイルサイズの削減でさえ、ウェブサイトのパフォーマンスを大幅に改善するために蓄積されます。 アイコンフォントワークフローを最適化するための使用を検討してください

以上がfontelloを使用して、必要なアイコンフォントのみをロードするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。