2013HTTPリクエストを減らすために【WebFont編】ドラッグ&ドロップしてコマンド叩いてウェーイgrunt-webfontこのシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。【終章】我々には1000msの猶予しか残されていない3日目は、スマホ環境であればHTTPリクエストを減らすためにWebフォントの採用を考慮しても、やぶさかではないだろう。下記の画像をご覧頂きたい。これはプロジェクトで私が使用していたスプライト画像だが(実際は縦にして使用)、このような単純な形状、単色のアイコンであれば、Webフォント化したほうがなにかと都合がよい。パターンの可能性があり、スプライトすれば1リクエストでおさまるが、それでも画像が肥大化していけば、Receivingが無視できない状況になってくる。そこでWebフォント化すれば色は自由に変更可能だし、フォントなのでtext-shadowで影を当てることも可能、font-sizeで大きさも変更でき柔軟に対応することができる。sets以前は上記オンラインツールを使っていたが、やはり更新対応を考えるとめんどうだった。ゆうわけで、Mapleプロジェクトではgrunt-webfontを導入している。前回の記事を見ながらMapleプロジェクトを準備してもらいたい。そのほかの必要環境として以下のものインストールしておく。Homebrewも入っていなければインストールする。https://raw.github.com/sapegin/grunt-webfont/master/Formula/sfnt2woff.rbあと事前に必要になるのはフォントの元となるSVGファイル。SVGファイルを作るうえで便利なテンプレートがあるのでそれを拝借する。cognitom/symbolsテンプレートを使ってMapleでは上記のようなイラレファイルを作成した。iconmonstrにはいろいろ使い勝手がいいアイコンが無料で配布されているので、ここから必要なものをとってくるのもいいだろう。Illustratorでアートボード別に書きだして、SVGファイルとして保存する。要注意なのはこのアートボードの空白部分も含めてSVGファイルなので気をつける。基本的にこの部分はデザイナーさんにやってもらえればよいことなので、フロントエンドデベロッパーは完成したSVGファイルを、/src/files/font/svgディレクトリに投げ込んでコマンド打つだけだ。webfontを実行すれば上記のようなログとともに、.woffと.ttfと_myfont.scssが作成される。{content:"\f100";}_myfont.scssは_setting.scssで@importされていますので、特にCSSをいじる必要性はない。上記のように、.icon-{SVGファイル名}のクラスを当てれば、すぐさま使える。Webフォント使えば、CSSスプライトに頼らなくても大丈夫だー\(-o-)/って使う前は思っていたが、やはり単純な表現に限定される。グラデーションカラーかつシャドウ有りや、部分的に色を変えるなどはWebフォントでは無理があるので、そこはCSSスプライトを採用するか、デザインを少し調整してWebフォント化するかはデザイナーと相談すべきだろう。Webフォントも複数のアイコンのリクエストをまとめることができるが、Webフォント自体のリクエストが必要になるので、フォントがダウンロードされるまでは、当たり前だが表示されない。そのため数種類のパターンで収まることがわかっていればWebフォント化可能でもCSSスプライトでまとめることも考慮すべきだろう。なにごともバランスが重要だ。こうじ)1983年石川県生まれ。大学でデザインを専攻後、晴れてWebデザイナーになるが、コーディング好きが高じてWebデベロッパーに転身。