@font-faceのブラウザ別挙動を調べてみる。

サーバに置いたフォントをWebページの表示に使うことができる「Webfonts」機能ですが、ブラウザへの実装が始まったとはいえ、まだまだ微妙です。手元にあるブラウザで挙動を調べてみた。
ちなみにCSSはこんな風に書きました。みかちゃんフォント使用。

★@font-face指定が効くかどうか。
  • Firefox 3.5.8 & 3.6 ( Mac & Win xp ) - ばっちり。
  • Safari 4.04 ( Mac ) - ばっちり。ただし表示の仕方に不満が（後述）。
  • Opera 10.10 & 10.50β　( Mac & Win xp ) - 日本語フォントだと表示されない。
  • IE 8 ( Win xp ) - 表示されない（後述）。
  • Google Chrome 2.0 ( Mac & Win xp ) - ばっちり。

★フォントのダウンロードが終了するまでの挙動。
  • Firefox - 別の表示可能なフォントで代替表示される。ダウンロードが終了した時点で、こちらが指定したフォントへ表示が切り替わる。
  • Safari - ウェブフォントでの表示を指定した領域は、フォントがダウンロードされるまで表示されない。
  • Opera - 別の表示可能なフォントで代替表示される。ただし上述したように、フォントのダウンロードが終了しても、日本語フォントは表示されず、意図したフォントに切り替わらない。
  • IE - フォントのダウンロードが終了するまでページは表示されない。
  • Google Chrome - ウェブフォントでの表示を指定した領域は、フォントがダウンロードされるまで表示されない。

うーん。全てがFirefoxのように動いてくれんかなぁ。

★ローカルPCに当該フォントがインストールされていた場合。
  • Firefox - ローカルのフォントを使って即座に描画。
  • Safari - ローカルのフォントを使って即座に描画。
  • Opera - 日本語フォントだと表示されない。
  • IE - CSSの書き方なんだろうが、ローカルにフォントがあってもとりあえず .eotファイルをダウンロードしてしまう。ダウンロード後にローカルフォントを使って表示しているようだ。
  • Google Chrome - ローカルのフォントを使って即座に描画。

ということで、OperaとIEはちょっと問題外っぽい。Operaは英語フォントだとうまく動作するのですが、日本語フォントだと駄目。うちではOperaの公式デモページもちゃんと表示できないので、これ以上追求しません。フォント周りの特別な設定が必要なんだろうか。IEの方も、設定をいじれば何とかなるのかなぁ。

それから、フォントがダウンロードされるまでのタイムラグ。
Firefoxは代替フォントで暫定表示してくれるのでありがたいのですが、SafariとChromeはフォントのダウンロードが完了するまで描画を待ちます。フォントは2MBくらいあるので、数秒間ブランクが空いてしまうのは辛いですね。

各ブラウザでWebfonts指定を含むページをロードした時に、どの時点でonloadイベントが発生するかも調べてみました。bodyタグに　onload="alert( 'load completed' );" を付け加えるだけ。

  • Firefox , Opera , IE - フォントがダウンロード終了した時点で発生。
  • Safari , Chrome - htmlのロードが終了した時点で、フォントのダウンロード完了を待たずに発生。
うーむ。SafariやChromeで、「フォントのダウンロードが完了するまでは何かを暫定表示→フォントが準備できたら表示切り替え」というのをonloadイベントを検知することでやれないかと思ったのですが、その手法は無理っぽいですねぇ。

現時点では、全てのブラウザに対応させるのは相当面倒くさそうですなぁ。

お試しサンプルページはこちら。ご自身で挙動を確かめてみてください。
　　→ 日本語フォントをWebfontsに指定したページサンプル。
　　→ 英語フォントをWebfontsに指定したページサンプル。


カテゴリ:

タグ: