なげやりろぐ

フテイキコウシン

 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 FoundationWebKitの動きを知らないわけはナイと思うので今後IE8やFx3の動向が気になりますです・・・(あ、いちおう歌劇もね)

*1:今回試したのは現時点で一番新しいr30123です。

*2:ちなみに最新のWebKitSafariを利用するには配布ファイルに同梱されているrun-nightly-webkit.cmdを経由してSafariを立ち上げる必要があります

*3:ちゃんと試しましたがやはり未対応でした。レンダリング後のレイアウト的にはFirefoxと同等。

*4:サイト側で用意したフォントをクライアント側でレンダリングさせるってとってもオイシイ機能だと思うのですけどね。