Chromeと@font-face

 バージョン3からずっと Firefox をメインのブラウザとして家でも会社でも使ってきたのですが、最近 Mac の安定版がリリースされた Chrome に乗り換えることが出来るか(Firefox でしていたことが Chrome でどこまで実現可能か)試してみました。結論から言うと、いくつか実現出来ない機能があることにはあるのですが、代替手段があったり、もしなくてもそんなに困らない機能だったりして、機能的には許容範囲、スピードとメモリ使用量の点ではむしろ Chrome の方が満足のいくものとなりました。
 Yahoo! JAPAN のトップページのフォント指定が MSゴシックか MS Pゴシックなのが嫌だったのを、Firefox のアドオン Stylish で次のような css を適用してヒラギノ角ゴシックで表示するようにしていました。

@font-face {
    font-family: "MS PGothic";
    src: local("Hiragino Kaku Gothic Pro W3");
}
@font-face {
    font-family: "MS Gothic";
    src: local("Hiragino Kaku Gothic Pro W3");
}

 Chrome にも同じ Stylish という拡張機能があったので同様に指定してみたのですが、どうも @font-face の取り扱いが異なるようでそのままではうまく表示されませんでした。ブラウザによってサポート状況が異なるようです。
 そこで、安全な@font-faceの書き方(抄訳)を参考にして以下のように書き直してみました。

@font-face {
    font-family: "MS PGothic";
    src: url('ヒラギノ角ゴ Pro W3.otf');
    src: local('Hiragino Kaku Gothic Pro W3'), local('Hiragino Kaku Gothic Pro'),
        url('ヒラギノ角ゴ Pro W3.otf') format('opentype');
}
@font-face {
    font-family: "MS Gothic";
    src: url('ヒラギノ角ゴ Pro W3.otf');
    src: local('Hiragino Kaku Gothic Pro W3'), local('Hiragino Kaku Gothic Pro'),
        url('ヒラギノ角ゴ Pro W3.otf') format('opentype');
}

 これでばっちり Yahoo! JAPAN のトップがヒラギノ角ゴシックで表示されるようになりました。’Applies to Everything’にしておけばブラウジング中に MS ゴシックを目にすることもなくなりそうですね :p

comments powered by Disqus