SVG形式で保存したアイコンをウェブフォントにしてスマホサイトで効率的に使う方法 | hi-posi Front-End blog

サイトで使い回すアイコンをウェブフォントにして効率的に使っちゃおう！ スマートフォンのウェブフォント対応状況についてもご紹介いたします。 アイコンがウェブフォント化されているサイト Ameba https://s.amebame.com/ アイコンのほとんどがウェブフォントのようです。 アイコンをウェブフォント化するメリット 従来のスプライトシートで実装するような手間が省けて嬉しい（スプライトシートだと更新があったときわりと面倒くさい） 「フォント」なので文字の色やサイズを変えられる サイズを変えても画像が荒れない 3番目のメリットがスマホサイトにとって重要です。「画像が荒れない」、ディティールにこだわるならこれとっても大事。 アイコンをウェブフォント化するデメリット 「フォント」なので１文字内に複数の色が設定できない これくらいかも。。デメリット、あまり思いつきません。 作り方：