ちなみに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のロードが終了した時点で、フォントのダウンロード完了を待たずに発生。
現時点では、全てのブラウザに対応させるのは相当面倒くさそうですなぁ。
お試しサンプルページはこちら。ご自身で挙動を確かめてみてください。
→ 日本語フォントをWebfontsに指定したページサンプル。
→ 英語フォントをWebfontsに指定したページサンプル。
コメント