この記事はFrontrend Advent Calendar 2014の20日目の記事です。
最近gulp iconfont を使っていてハマってしまった…
ってことがあったのでハマったとことどう対応したかを書きます！
font-smoothingにはまった…！
アイコンが綺麗に表示されるようにfont-smoothingを使っていたのですが、
Android2.3系のある特定のスマートフォンでアイコンがまったく表示されなくなりました…
だからfont-smoothingを使わないようにしました。（iOSは問題なかったのでいれてます）
キャッシュにはまった…！
最初は気づかなかったのですが、アイコンフォントを追加するたびにキャッシュが残ってなかなか更新されなくなるというところにハマってしまいました…
だからアイコンを追加して更新するごとにCSS側にクエリパラメータをいれるようにしました。
@font-face {
font-family: "icon";
src: url("files/fonts/icon.eot?c=1419063630662");
src: url("files/fonts/icon.eot?#iefix&c=1419063630662") format("embedded-opentype"),
url("files/fonts/icon.woff?c=1419063630662") format("woff"),
url("files/fonts/icon.ttf?c=1419063630662") format("truetype"),
url("files/fonts/icon.svg#icon&c=1419063630662") format("svg");
}
Date.now();を使って数値を生成してるので、常に更新するたびにフォントを読み込みなおしてくれます。
コードの領域にはまった…！
gulp iconfontは文字コードがデフォルト0xE001から始まります。
しかし、文字コードが0xE001から始まる場合、
Android4系のある特定のスマートフォンでその機種特有の絵文字が表示されてしまいました…
だからgulp iconfont のoption のstartCodepoint でスタートする文字コードを「0xE001」から「0xF001」に変更しました。
しかし、gulp iconfontで生成したcssテンプレートになぜか10進数で文字コードが書き出されるという現象が…
そのあたりの問題は下記のリンクの中にある16進数にコンバートしてくれるコードを使えば問題なく書き出せるようになります。
https://github.com/nfroidure/gulp-iconfont/issues/16
結果…！
これで問題なくアイコンフォント使えるはずだ！！!
そんなわけで下記のGitコードを公開しています。
gulp iconfont のおかげでスマートフォン開発が楽に進むことができました！
さらに上記を意識してればもっと楽に…なるはず！
次のFrontrend Advent Calendar 2014はすぎもっさん！にバトン渡します！
ワクワク！ワクワク！