アイコンフォント入門

アイコンフォントについて知っておく必要があるすべてのこと——それが何であるか、どのように機能するか、そしてプロジェクトに適した形式の選び方。

アイコンフォントとは？

アイコンフォントは、グリフ——通常は文字や数字——が絵文字的なシンボルに置き換えられた書体です。文字「A」をレンダリングする代わりに、アイコンフォントはホームアイコン、検索ルーペ、またはショッピングカートをレンダリングします。

アイコンはフォントファイルの中に存在するため、テキストとまったく同様に振る舞います。font-size で任意のサイズにスケーリングし、color で色を変更し、テキストシャドウを追加し、CSS トランジションを適用し、さらにアニメーションさせることができます——画像ファイルに触れることなく。

このアプローチにはいくつかの実用的なメリットがあります：

解像度非依存——ベクターアウトラインはあらゆる画面密度でクリアにスケーリングする
小さなペイロード——1 つの圧縮フォントファイルが何十もの個別画像アセットを代替する
CSS コントロール——色、サイズ、シャドウ、不透明度、ホバー状態がテキストスタイリングと共に無料で使える
単一 HTTP リクエスト——アイコンセット全体が 1 回のネットワークラウンドトリップで読み込まれる

簡単な歴史

初期のウェブでは、開発者は個別の画像や CSS 画像スプライト——各アイコンが固定の矩形領域を占める大きな複合画像——に頼っていました。スプライトは HTTP リクエストを減らしましたが、脆弱でした：アイコンを追加またはリサイズするには、スプライトシート全体を再生成し、手動でピクセルオフセットを更新する必要がありました。

2012 年頃、Font Awesome や IcoMoon などのプロジェクトが、よりクリーンな代替手段を普及させました：Unicode の私用領域にマッピングされたフォントグリフとしてアイコンをパッケージングする方法です。デザイナーは 1 つの @font-face 宣言を変更するだけでアイコンセット全体を入れ替えることができ、開発者はすでにテキストに使っているのと同じ CSS でアイコンをスタイリングできるようになりました。この技術は急速に広まり、単色アイコングラフィを使用するデザインシステムにとって信頼性の高い、低オーバーヘッドの選択肢として今も残っています。

アイコンフォント vs SVG アイコン

「アイコンフォント vs インライン SVG」の議論は、10 年以上にわたってフロントエンドの議論の定番です。両方のアプローチが有効で、正しい選択はプロジェクトの要件によって異なります。

アイコンフォント

単一 HTTP リクエスト——1 つのフォントファイルですべてのアイコンを提供
非常にシンプルな CSS スタイリング——任意のテキストと同様に color、font-size、text-shadow を変更
モノクロのみ——各グリフは単一の塗り色のみをサポート
簡単な導入——スタイルシートリンクを追加し、CSS クラスを使うだけで完了

インライン SVG

マルチカラー——各パスが独自の塗り、ストローク、またはグラデーションを持てる
デフォルトでアクセシブル——<title> と aria-label がスクリーンリーダーに実際のセマンティクスを提供
個別にキャッシュ可能——使用されていないアイコンはダウンロードされない
きめ細かい制御——個々のパスをアニメーション、要素ごとにフィルターを適用

SVG スプライト

複数の SVG を単一の <symbol> スプライトシートに結合
<use href="#icon-name"> でアイコンを参照
両方のメリットを提供——単一リクエスト、マルチカラー、アクセシブル——ただし、より複雑なビルドパイプラインが必要

結論

アイコンフォントは単色アイコングラフィに基づくデザインシステムにとって優れた選択肢です。統合が簡単で、パフォーマントで、広くサポートされています。アイコンが複数の色やパスごとのアニメーションを必要とする場合は、インライン SVG や SVG スプライトの方が適しています。

形式の比較

アイコンフォントは 5 つのファイル形式でパッケージできます。それぞれ圧縮方法、ブラウザサポート、ユースケースが異なります。一覧で比較すると：

形式	圧縮	ファイルサイズ	ブラウザサポート	最適な用途
.woff2	Brotli	最小	97%+	現代ウェブ（推奨）
.woff	zlib	小さい	98%+	広い互換性のフォールバック
.ttf	なし	中程度	98%+	デスクトップアプリ、開発
.svg	なし	最大	限定的	レガシー iOS、デバッグ
.eot	オプション	中程度	IE のみ	IE 6-8 レガシーサポート

適切な形式の選択

どの形式を含めればよいか迷っていますか？この実用的な意思決定ガイドを使ってください：

1 つだけ選ぶなら——WOFF2 を配信してください。最高の圧縮（Brotli）を提供し、97%以上のブラウザをカバーします。
IE 11 サポートが必要な場合——WOFF2 + WOFF を配信してください。WOFF が Brotli デコードに対応していない残りのブラウザをカバーします。
IE 8 サポートが必要な場合——WOFF2 + WOFF + EOT を配信してください。EOT は Internet Explorer 6-8 が理解できる唯一の形式です。
デスクトップアプリケーション向け——TTF を使用してください。Windows、macOS、Linux での OS レベルのフォントレンダリングのネイティブ形式です。
フォントの問題をデバッグする場合——SVG Font を検査してください。その XML 構造は人間が読めるため、グリフのパスとメタデータを簡単に確認できます。