フォントでアイコン! CSS応用テクニック

CSS-Tricksにフォントをアイコンとして利用する面白いCSSテクニックが紹介されている。記事では「アイコンフォント」と称されており、フォントにはFicoが使用されている。「アイコンフォント」はフォントとして作成されたアイコンデータをCSSの@font-faceを使ってデザインに利用しようというテクニック。

掲載されているサンプルを見るとどのようなことが実現できるかがよくわかる。画像でアイコンを作るときのテクニックがすべて適用できるのに加え、フォントであるためスムーズなリサイズ、カラーの変更、シャドーの付加などの処理を適用できる。

フォントが使われているためリサイズやカラー変更などがシームレスに実施されるところが最大の特徴となる。タブレットデバイスなどでリサイズした場合でも表示はとてもスムーズ。最近はデスクトップでもテキストサイズを変更して閲覧することがある。シームレスなユーザ体験を提供するうえで興味深いテクニックといえる。