WebFont LoaderくんがwebフォントのFOUT問題を解決してくれた話

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とか使うときは、対象のフォントのサブセット化を許可してほしい。 軽くさせろ。

それでは今日はここらでサヨウナラー

関連記事

デフォルト画像
2018.06.05
すごくどうでもいい話

どこにも売ってない すげえどうでもいい話なんですけど。 最近、ダイドーの「ぷるシャリみかん」って商品を見つけたんですよ。 イオンに売ってて、思わず3本買ってしまったくらい。 行楽シーズン到来!熱中症対策※にピッタリなゼリー飲料登場! それから色々なスーパーだとかコンビニに行くんですが、どこにもない。 図ったかのように置いてない。 イオンじゃあんなに売れてたのに、なぜ置いてない? 発売は去年の4月だそうで、ちょうどこの季節に販売開始な感じの商品です。 個人的にはどこにでも売っていてほしいぐらいの商品なんですけども。 唯一見つけたのはコンビニの冷凍コーナーぐらいという勢いのなさ。 冷凍されてると高くなるんですよね、それも倍ぐらいに。 今ではイオンまでわざわざ行って買いだめをしてしまっているぷるシャリゼリー…。 ダイドーだし知名度的には負けてないと思うんですけど! 見かけた人全員に買ってもらいたい商品ですよ。 もし夏コミまで残ってたら持っていきたい程度には思っています。 頼むからもっと広く販売されてくれ…。 販促活動ちゃんとして…。 それでは今日はここらでサヨウナラー

2019.08.29
新イベント始まりましたね

それはさておき小イベントの成果 昨日ギリギリで滑り込みセーフでした。せめてこれだけは取らねえとな!?ラファエルは可愛いなァ!! 少女と皇帝のラファエルは射精させてくるタイプのラファエル。 なんとか台北の夏だけは手に入れないといけないと思っていたので、間に合ってよかったっすわほんと。最後、結局通常モードのハードをひたすら周回して6000pt貯めました。みんなは計画的に1日5回プレイしような! 「黙示録」 開 幕 だ その前に重要な事項として、行動力の配布方法が変わりました。 「 【変更前】11-14時,18-21時,21-24時でそれぞれ行動力100ずつ配布 ⇒ 【変更後】8-16時,16-24時でそれぞれ行動力150ずつ配布 」 受け取れる行動力の量に変化はありませんが、前よりも受け取りやすくなったみたいです。朝起きて1回、帰宅して1回って感じになりましたね。 確か黙示録って、あっちでは既に行われたイベントでしたよね。ほんまソヤもセレサもかわいいな…。タロットが14枚しかないので引くことができません!石は1400個あるから、その気になればピックアップギリギリまで引くこともできるけどさぁ!イベ産って基本的に☆上げることができないのツラミよね。 https://twitter.com/witchsweapon/status/1167047918127173637 毎度思うんですが、ここのシナリオ担当は頭がおかしいのかってくらい重量あるテキストぶち込んできますよね。いやぼくはそういうの大好きなんで喜んで読みますけど。前から言ってますが、魔女兵器は遊べるSSだと思ってるんで。 さて、皆さんこちらをどうぞ。3万もあるんですよ!!!全部は買えないけど、今回のイベントを走り切るぐらいの特攻アイテム買うことはできるんだなぁ。どうせ買えないやつは血石で買うしオーキードーキー。 今回の目標!!! 念の為、ソヤの記憶の情景とタロット全部が最終目標ぐらいです。エンジョイ勢としてはこの程度が走りきれるぐらいのペースなのだ…。 ただ、なんとなく欲しいので称号も狙えれば頑張ります。前回のランキングイベは余裕のよっちゃんだったしなんとかなるんじゃねーかな!!しらんけど!! これも前々から言ってるんですが、大規模イベントも3回目なんだし、そろそろ追憶の鍵が使えるようになってもいいんですよ?運営さんは第1回目のイベントを見られるようにしてくれてもいいと思うんだ…。 今日からちょっとずつ頑張ります。 それでは今日はここらでサヨウナラー

デフォルト画像
2018.10.28
M3から帰ってきました

故郷(新潟)へと帰還いたしました M3行ってきました!!! 今回もめちゃくちゃ楽しかったです!!!! とまあその辺今日何したかとかは後日まとめるとしまして。 とりあえず何買ってきたかっていうのを雑にまとめます。 細かいのも多分いずれまとめます、戦利品リストみたいな形でね! 今回もCDタワーにしてみました。 横二列にドーン。 うーん、壮観である。 ただ、おそらくですが前回よりは購入数は減ったと思います。 計算してみたら大体32000円くらいでした。 安ゥい! 旧譜とかを買ったりもしたので、その分当初の予定よりも追加で掛かっちゃった感じですね。 多分30枚くらい買ってます。 今日は疲れたので、これ書いたらMUSECAのサントラみたいになってる「- One Heart -」を聞きながら寝ます。 これヤバいって、1000円で売り出すようなアレじゃないって。 倍でもおかしいからね? 作っていったチェックリストについて かなり役に立ちました。 頑張ってjsとjsonで書き出しまでやった甲斐がありましたね! 今までどこ行ったかを忘れることがあったんですが、それもほとんどなかったです。 とはいえ、ちゃんとした「行ったチェック」ボタンを付けるべきだとは思いましたが。 初の試みでしたが、上手く行ってよかったです本当。 これからのイベントでは、もっと改良して使いやすくしていこうと思っています。 やっぱり今どきは紙にチマチマ書いててもしょうがないと思うんですよ! デジタルに生きよう!な!! 明日以降今日の流れとかを具体的に書いていきます。 多分。 それでは今日はここらでサヨウナラー