WebKit最強?!
マイコミジャーナルの【コラム】OSXハッキング!(262)に、最新のWebKitの情報が載っていました。
OSX版WebKitのナイトリーを使用した記事でしたが、ほぼ同時にWindows版もビルドされているはずと思い、Win用最新のナイトリー*1を落としてきて現在のSafari for Windows環境へ上書きして試してみたところ・・・おぉ! こりゃスゲー!!*2
Windows版ナイトリーでも件の記事にあるとおり、@font-face規則に対応しているではないですか。
検証サイトはコラムでも紹介されているCSS @ Ten: The Next Big Thing
現状のメジャーなブラウザエンジンではどうか一応試してみましたけど、やはりというかなんというか・・・わかっちゃいたけど対応してません。
- Firefox2でもこんな感じ(つい最近アップデートしたのでGecko代表と言うことで)
Operaは・・・割愛(笑)*3
ネットで調べてみると、@font-face規則はCSS2の時には見送られたらしいけどCSS3で復活したらしい。ていうかコレって標準で実装して欲しいよね。*4
CSSの実装はどうなってるんだろ
と、いうことで@font-faceがどのように実装されているのかをSafariのインスペクタで確認してみました。
- 最初にHTMLソースを確認。
左ペインには読み込まれているフォント名が表示されていますが、クリックするとフォントフェイスの確認も出来ます
右ペインでh1のStyleを見るとfont-familyにTinsnipsというヤツが・・・
通常はこんなフォントインスコしてないよね(゚Д゚)
- メインのCSSをチェック。h1でのfont指定はいたって普通にされている
通常はこの中でインスコされているフォントがあればブラウザで利用されるワケだけど・・・
- 上では見えていませんがメインCSSに@importでindex.cssを読み込ませる指定がありまして、コチラのほうに@font-faceに関する記述がありました
コレによって@font-face対応ブラウザではサーバーサイドのフォントが利用されるわけですね
他にも紹介されていた付箋のデモも見た目は機能してくれました。ただ、なぜか今回試した限りではデータベースが作成されなかったのでリロードすると付箋が消えちゃいましたけど・・・(;´д`)
MSやMozilla FoundationもWebKitの動きを知らないわけはナイと思うので今後IE8やFx3の動向が気になりますです・・・(あ、いちおう歌劇もね)