Icon Fontのセマンティックなコーディング / Lei Hau'oli Engineer's Blog | レイハウオリエンジニアブログ

Icon Fontとは アイコンのベクターデータをフォントにしたもの メリット 高解像度ディスプレイ対応 画像が劣化しないためメンテナンスしやすい。 デメリット モダンブラウザにしか対応していない(IE7,リガチャはAndroid2.xでできない) アイコンとフォントの情報がマッチしない モバイル時代でさらに強まったアイコンの役割 Icon on the PC site テキストを修飾するデザイン的な要素が強かった Icon on the smart device 狭い画面で直観的な操作を促すUIの役目を果たしている How to mark up? マークアップ例その1 フォントの直書き デザイン上はHTML5でも、ブラウザやクローラーは 「う」 と認識 <a href="html5.html">う</a> a { font-family: 'jsdoitSymbols'; } マークアッ