現在，オリジナルアイコンフォントFont Botamochiはgrunt-webfontを使って生成しています．
基本的な使い方はelbowroomerさんが紹介してくれています．細かな設定は公式のgrunt-webfontの方を参照しましょう．
今回はFont Botamochi を開発する過程で役立ったことを紹介して行きます．まず，grunt-webfontはGruntfile.jsに書かれたパラメータを元に実行されます．
srcにはフォントの元となるsvgファイルを指定します．arrayデータとして，複数のパスを指定することもできます．svgファイルは左のパスからABC順に読み込まれて，unicodeが割り振られていきます．Font Botamochiは新しいフォントを追加する予定なので，バージョンごとにフォルダを用意することで，unicodeの割り振りをコントロールしています．
destはフォントを保存するディレクトリを指定します．fontはフォントの名前を指定します．
templateはcssのテンプレートファイル，htmlDemoTemplateは生成したフォントのデモ用htmlのテンプレートファイルを指定します．
テンプレートファイルは%= fontBaseName %という特殊な引数を使うことで，フォント生成時に自動でフォント名などの固有の値が代入されて行きます．Font Botamochiの場合はcheatsheetの作成に大いに役立っています．
baseClass，classPrefixはFont Awesome でいうところの，fa, fa- の部分です．
Font Botamochi を開発する上でいじったところはこれぐらいです．特にcheatsheetは以前は手作業で作っていたので，ものすごく楽になりました．
コメント