@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に指定したページサンプル。