WebFont Loader
昨日のちらつき、読み込み速度問題が本日解決いたしました。
その立役者となってくれたのでWebFont Loaderくんです。
ネットをひたすら調べてたら結構出てきた単語だったので調べてみました。
どうやら話によれば、Webフォントの読み込みイベントを実装してくれるらしい。
つまり、
①ローディングしてるとき
②ローディングが終わったとき
③ローディングに失敗したとき
とかを判定してくれるらしい。
これを使ってFOUTとかいうクソ問題を解決している人が多いらしい。
ほんとかよとか思いながら使ってみました。
font-familyで源ノ明朝を読み込んで、後はJSで制御するだけ。
よく見ると、JS以外は全部普通にWebフォント使う手順なんですよね。
使い方とかを書く気はないので気になる人は調べてね。
効果
これで解決できる問題は、再描画によるフォントのちらつき。
ブラウザによってはWebフォントを読み込むまで代替フォントを出すんですよ。
そんで読み込み終わったらそのフォントをWebフォントに差し替えると。
ぼくが差し掛かってた問題はこの辺が大きくて、基本的にブラウザは
HTML→JS→CSS→画像・フォント
（詳しい人からすれば違うかもしれないけど）
（所謂DOMツリーとかそういう？レンダリングする順番みたいな？よくわかんねえ）
って順番で読み込んでいるみたいだったので、その上フォントが重すぎて時間がかかっていたと。
上の順番のHTMLからCSSまでで既に1秒ぐらい掛かってたわけで。
そこにフォントがWait＋コンテンツロードで5秒とか追加されてたんですね。
そうなるとレンダリングが完了するまでに6,7秒掛かると。
ブラウザによってデバイスフォント表示の時間とか規約が違うのでそこも困りごとでした。
IEなんて常に代替フォント表示し続けやがるし。
そういうのを今回のプラグインが解決しました。
フォントのロードイベントを判定できるので、ロード完了までVisibility: hidden掛けるだけ。
しかも優秀なのは、その判定がCSSでできてるってことですよ。
なのでこっちはCSSで自動付与される.wfなんちゃらにhiddenかければ解決。
終わったらvisibleに切り替えると。
ただ、別にページが見えるまでの速度をなんとかしてくれるわけじゃないんですよね。
なのでWebfontloader側でsettimeoutの時間を伸ばさないでいたら代替フォントが出てきました。
初期値は3000みたいなので、思い切って10000くらいまで伸ばして解決。
めっちゃ問題起きそうだけど、オッケー貰ったからオッケー。
源ノ明朝滅べ
嫌いじゃないんですけど、今回みたいな問題が起きるのが辛いです。
単純にフォント容量が大きいだけなんですけども。
しかもまだ出たばかりで、CDNとかも用意されてないんですよね。
いやCDNにした所でどれくらい変わるのか知りませんけど。
ちなみに、ちらつきの方は解決したんですが、容量はどうにもなりませんでした。
最終的に第一水準漢字と第二水準漢字を含めたサブセット化をして終了。
今回フォントを使うサイトではかなりこぼれた漢字があったのでその辺は手作業で対応。
今後のことを考えなければすべて円満に解決しました。
まあ2週間後とかに追加コンテンツが出てくるんですけどね、その辺はしーらない。
というわけでして、なんとか今日中に終わらせることができましたよ。
なんだかんだ来週までとか無理だろとか思ってましたけど、良かったです。
次font-familyとか使うときは、対象のフォントのサブセット化を許可してほしい。
軽くさせろ。
それでは今日はここらでサヨウナラー