ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Font Awesome to PNGはFont Awesomeの情報を画像アイコンとして出力するソフトウェアです。

Web Fontを多数使えるようにしてくれるFont Awesomeはとても便利ですが、一つのアイコンのために全体のWeb Fontを読み込むのでは非効率的です。そんな時にはFont Awesome to PNGを使って画像化してみましょう。


これはサイズ24で出力した例。


128。ぐっとシャープになっています。


256。それほど違いは分かりませんが、Retinaだと分かるかと思います。


こうやってカラー指定ができるのもWeb Fontならでは。

Font Awesome to PNGでは指定したアイコン(または全て)を指定したサイズ、指定した色で画像として出力してくれます。Web Fontとしてではなく画像として使いたい場合にも便利ではないでしょうか。

Font Awesome to PNGはPython製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。


MOONGIFTはこう見る

Web FontはHTML5で実装されたものではなく、実際にはIE4から利用できます。そのためほぼ大抵のWebブラウザであれば使える技術になっています。難点はフォントファイルが大きくなってしまうため、モバイル環境などで積極的に使いづらいことかも知れません。

そこで必要な分だけを画像として取り出すのはいい方法と言えます。惜しむらくはバラバラな画像ではなく、一つの画像とSprite用のスタイルシートを出力して欲しかったかも知れません。なお画像であるため表示サイズの変更や色変更に対応できなくなってしまうのが難点になります。

odyniec/font-awesome-to-png · GitHub

 

MOONGIFTの関連記事

  • DevRel
  • Com2