WEBアイコンリファレンス

最近は画像ではなく、高精細スクリーンに対応するためにベクターグラフィックスを利用するサイトも増えてきました。 特にwebフォントを使ったアイコンの表現は世界的に普及してきています。

そこでこのページでは、webアイコンフォントを活用した使用例などを紹介していきます。

webアイコンフォント一覧

WEBフォントについて

WEBページでテキストなどの字体の指定はcssのfont-familyを使用しますが、ユーザーの環境によっては別のフォントに置き換わってしまう事があります。 そのためサイトの印象を左右するタイトルなどは、画像を使って表現することが多くなります。

画像を使用すれば、ユーザーの閲覧環境には左右されません。 ですがテキストよりデータサイズが大きくなるうえに、スマホやタブレットなどの高精細なディスプレイでは解像度が足りずぼけてしまうという事もあります。 そのため画像のタイトルと同等のクオリティで表現できるwebフォントを使用するサイトが最近では増えてきました。

webフォントならユーザーの環境に左右されず、意図した通りの表示ができます。 これはwebフォントのデータがサーバーに置かれており、指定したフォントが高速配信されるためです。 なのでユーザーの環境にフォントデータがなくても、意図した通りの表示をする事が可能です。

またwebフォントはアイコンとして使用することができます。 ですが所有しているフォントデータを自社サーバーに置いて使う場合は、ブラウザによっては対応しているフォント・フォーマットが異なるため注意が必要です。

WEBフォントのフォーマット

主要なフォーマットは「WOFF(Web Open Font Format)」「ETO(Embedded Open Type)」「SVG(Scalable Vector Graphics)」「OTF(Open Type Font) / TTF(True Type Font)」などがある。 モバイル・古いブラウザにも対応させるならこれらのフォントデータが必要となります。