Internet Explorerではかなり昔からあった埋め込みフォント(@font-faceによるフォントの参照)の機能は、Safari 3とFirefox 3.5で有効になったことから急速に話題になることが増えた。ようやく時代がMicrosoftに追いついてきた感じですね。その書き方は大筋では一緒なのだが、細かな仕様の違い、というかIEがEmbedded OpenTypeしかサポートしていないことから工夫が必要になる。その工夫をBulletproof、つまり将来にわたって安全であろうという観点で短くまとめたBulletproof @font-face syntaxというすごく参考になったエントリがあったので訳しておく。語調などは超訳なので、原文とニュアンスが変わっているかもしれない。

安全な@font-faceの書き方

以下は訳注と私見。

条件付コメント

面倒くさいというのはわからなくもないけど、実際はCMSなりなんなりのテンプレートをさくさく書き換えるだけな場合が多いと思うので、そんなでもないような気もするし、将来に渡って安全という観点では条件付きコメントは最も優れているような気がする。その一方で条件付コメントがとにかく受け付けないという何かを持っている人が多いことも理解できないことはない、というかどっちかというとそっち側の人間なのでこの方法を採用したくない気持ちもわかる。

url(//:)...

これで404になるリクエストが発生しない理由は、上の例だと、

//:) format%20('no404'),%20url('GraublauWeb.otf

というURLをリクエストするので、そのウェブページのドメインに対するリクエストではなくなるから。IEからは404に見えるのは変わらない。

format('opentype')をTrueTypeでも指定する

これの意味がわからない。現状ではどちらでも変わらないのだけど将来は変わるかもしれないと思う。というかOSに依存するのだろうけど変わるんじゃないかと思う。とは言うもののTrueTypeを提供して format('truetype')を指定する際に何かしらの問題点はあるかもしれないので、それはオススメできなとは思う。のでOpenTypeを提供するのが現状では無難でかつBulletproofな気がする。


埋め込みフォントを日本語フォントで……となると、個人のサイトではサイズや帯域の面でも労力やコストの面でもなかなか難しいけど、金に糸目をつけない規模の大きなサイトでなら浸透する可能性はあるのかな。

Bulletproof的なアプローチの話は話題になること自体少なかった(あってもごく一時的だった)けど、優秀なモダンブラウザが増えてきて新しい表現を方法をウェブが手に入れる一方で、いまだにIE6を使っている昭和な人が無視できない数存在することから、今ではウェブデザインにおいて最も力を入れて考慮すべきことになった気がする。クロスブラウザではなくエラスティック・ウェブデザインみたいな意味で。

とかいうとりあえず言ってみました的な言葉で締める。Bulletproofを「将来に渡って安全な」とか訳すと堅苦しいのでなんか良い訳が欲しいな。