フロントエンド開発Blog

オレには鈍器がある

Noto Sans Japanese , WEBフォント , フォント , 非同期

かなりメモ的な記事ですが・・・

日本語フォント、たとえばNoto Sans Japaneseをそのまま読み込もうとするとonloadにかかる時間がぐっと長くなってしまいます。

特にwindow.onloadにJSをもろもろ書いている場合、このJSの実行タイミングも巻き込んで遅くなってしまうのでパフォーマンス上よろしくないなぁと思ってしまうものです。

そんなときは非同期だ!ということで重たいWEBフォントを体感的に軽くする方法をメモ。

webfontloader

github - webfontloader

非同期でWEBフォントを読んでくれるようです。コールバックも充実しています。成功時、失敗時、WEBフォント非対応ブラウザの場合などなど、あらゆる状況下でコールバック実行できるようになっているのもポイントが高いですね。

rel属性を後から追加

<link id="loadwebfont" type="text/css" href="webfont.css">

のようにHTMLに書いておくと、大抵のブラウザはCSSを読み込みません。これを利用してwindow.onloadの最後に$loadwebfont.attr("rel","stylesheet")のようにrel属性を追加するとWEBフォントの読み込みを後回しにできます。体感的に早くなりました。手軽といえば手軽な方法ですね。

あ、それからWEBフォントをwindowsとmacで見比べるとどうしてもwindowsだとほっそりして見える。特にNoto Sans Japanese の一番細いのだと顕著でした。これはOS毎にアンチエイリアスの利きが異なるからだ、ということらしいです。

このアンチエイリアスはCSSでON/OFFできない(-webkit-font-smoothingだとwebkitブラウザのみになってしまう)ため、windowsのときはtext-shadowでアンチエイリアスっぽく見せる、というごまかし方がいけてます。PHPでもJSでもいいのでユーザエージェントからwindows判定をし、windowsのみ以下のCSSを割り当てる。

text-shadow:0 0 2px rgba(150,150,150,0.4)

これでwinとmacで同じような見え方になりました。Windowsで細すぎて困ったときに一度お試しください。

ページトップへ

関連ページ

ページトップへ