saikoの日記帳

about

良いフォントは大体有料

終わらぬフォント問題

源ノ明朝

何かと騒がせてくれた源ノ明朝ですが、まあ悪くはないんですよね。
フォントとしての性能は間違いなく高い。
しかもそれが無料で使えちゃうんですからね!

このブログだと前は限界明朝というのを使ってました。
サブセット化のせいでない部分が露呈して即刻使用を停止しましたが。
よく考えたら、その問題の解決方法はあったんですよね。
面倒だったのでやらなかったんですけども。

フォントに収録されてる文字は大体決まっていて、源ノ明朝はJISX0208収録。
wikiによれば6900文字弱が収録されているらしいです。
それを元にした限界明朝も、恐らくJISX0208のはず。
ということは、それが収録している第一、第二水準+ASCIIコードでサブセットすればいいだけ。
幸い、それらはリストになってるので、簡単に見つかりもします。

つまり、わざわざフォント変えずとも解決はできたんですねえ!

有料フォント

だからといってもう戻す気もありません。
どうせなら新しく別のフォントに変えたい所です。

色々なサイトを検討する機会が増えたんですが、フォントの違いも見えてきます。
明朝とゴシック系統は随分と気色が違いますし、出せる雰囲気も変わってきます。
どっちがどんな感じだななんて今更話すことでもない一般常識ですね。

で、このブログに合う雰囲気を出せるのはどっちなのか。
これまでは明朝体しかないと思っていましたが、案外ゴシック体でも良さそうなんですよね。
丸っこい文字でもそう悪くないんじゃないかと。

ただ、会社に入っているフォントを見ていると思うのですが、やはり有料フォントはすごいです。
フリーでも優秀なもの多いんですが、金が掛かると違います。
すっげー良い雰囲気を出すフォントがゴロゴロ転がってます。
値段は1フォントにつき2万とかしますけどね。

流石にウン万単位で出せるわけでもないので、やはりここはフリーフォントに頼ります。
というわけで、今度ゴシック系列のものとかを試してみます。
「あのイーハトーヴォの~」だけを見ても上手く想像できませんからね。
今までそれで見て判断してたのが良くなかった。
今度からはブログに反映させてみて考えます。

というわけで、

①新しくフォントの適用を考える
②収録させる文字は第一水準漢字と第二水準漢字、それとASCIIコード
③実際にブログに適用させて判断する
④ゴシック文字も試してみる

ってのをやってみます。
いつやるかは未定です。

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

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

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

page-top