Help us understand the problem. What is going on with this article?

gulp iconfontではまった!そしてその後…

More than 5 years have passed since last update.

この記事は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コードを公開しています。

タスク

CSSテンプレート

gulp iconfont のおかげでスマートフォン開発が楽に進むことができました!
さらに上記を意識してればもっと楽に…なるはず!

次のFrontrend Advent Calendar 2014はすぎもっさん!にバトン渡します!
ワクワク!ワクワク!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away