HTTPリクエストを減らすために【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ

grunt-webfont

このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。

3日目は、スマホ環境であればHTTPリクエストを減らすためにWebフォントの採用を考慮しても、やぶさかではないだろう。

まずは下記の画像をご覧頂きたい。

これはプロジェクトで私が使用していたスプライト画像だが（実際は縦にして使用）、このような単純な形状、単色のアイコンであれば、Webフォント化したほうがなにかと都合がよい。

このスプライトであれば、カラー × 矢印の向き × シャドウの有無 パターンの可能性があり、スプライトすれば1リクエストでおさまるが、それでも画像が肥大化していけば、Receivingが無視できない状況になってくる。

そこでWebフォント化すれば色は自由に変更可能だし、フォントなのでtext-shadowで影を当てることも可能、font-sizeで大きさも変更でき柔軟に対応することができる。

それではWebフォントって一体どうやって作るのだろうか？高いフォント作成アプリを購入しなければならないのだろうか？オンライン作成ツールもあるようだが、毎回、新規アイコン追加の度にそのツールのサイトを訪問しなければならないのだろうか？

以前は上記オンラインツールを使っていたが、やはり更新対応を考えるとめんどうだった。そうゆうわけで、Mapleプロジェクトではgrunt-webfontを導入している。

前回の記事を見ながらMapleプロジェクトを準備してもらいたい。そのほかの必要環境として以下のものインストールしておく。Homebrewも入っていなければインストールする。

$ brew install fontforge ttfautohint
$ brew install https://raw.github.com/sapegin/grunt-webfont/master/Formula/sfnt2woff.rb

あと事前に必要になるのはフォントの元となるSVGファイル。SVGファイルを作るうえで便利なテンプレートがあるのでそれを拝借する。

テンプレートを使ってMapleでは上記のようなイラレファイルを作成した。iconmonstrにはいろいろ使い勝手がいいアイコンが無料で配布されているので、ここから必要なものをとってくるのもいいだろう。Illustratorでアートボード別に書きだして、SVGファイルとして保存する。要注意なのはこのアートボードの空白部分も含めてSVGファイルなので気をつける。

基本的にこの部分はデザイナーさんにやってもらえればよいことなので、フロントエンドデベロッパーは完成したSVGファイルを、/src/files/font/svgディレクトリに投げ込んでコマンド打つだけだ。

$ grunt webfont
Running “webfont:dist” (webfont) task
Font ‘myfont-b5fd89266afbbfbfc281a0ce9a5bf50e’ with 13 glyphs created.

で、/src/tools/でgrunt webfontを実行すれば上記のようなログとともに、.woffと.ttfと_myfont.scssが作成される。

// _setting.scss
//-------------------------------------
@import "../vendors/myfont";

// _myfont.scss
.icon-hoge:before {
content:"\f100";
}

_myfont.scssは_setting.scssで@importされていますので、特にCSSをいじる必要性はない。

上記のように、.icon-{SVGファイル名}のクラスを当てれば、すぐさま使える。

Webフォント使えば、CSSスプライトに頼らなくても大丈夫だー＼(-o-)／って使う前は思っていたが、やはり単純な表現に限定される。グラデーションカラーかつシャドウ有りや、部分的に色を変えるなどはWebフォントでは無理があるので、そこはCSSスプライトを採用するか、デザインを少し調整してWebフォント化するかはデザイナーと相談すべきだろう。

またWebフォントも複数のアイコンのリクエストをまとめることができるが、Webフォント自体のリクエストが必要になるので、フォントがダウンロードされるまでは、当たり前だが表示されない。そのため数種類のパターンで収まることがわかっていればWebフォント化可能でもCSSスプライトでまとめることも考慮すべきだろう。

なにごともバランスが重要だ。