新年度がスタートして早ひと月。もうすぐ大型連休ですね。最近は物価高にもろもろの負担増と、あまり明るい話題に乏しいですが、そんな逆風に負けないよう、着実にスキルアップをはかっていきたいものですね。

さて、今月は策定中の CSS 3 modules の中から、サーバーにアップした任意のフォントをウェブページに適用するWeb Fontsを取り上げてみようと思います。

Web Fonts とは？

Web Fonts とは、W3C CSS 3 Web Fonts Module （現在、草稿段階）で策定中の、サーバーにアップロードした任意のフォントを、ウェブページに適用できるようにするための規格です。

従来、ウェブページ上で特殊なデザインフォントを使いたい時には、画像化したものや、CSS の font-family プロパティによる指定と相場が決まっていました。ところが、前者はテキストデータとして扱いたい場合やメンテナンスコストの面で不利ですし、後者も個々のクライアントがインストールしているフォントに依存します。

CSS 3 の Web Fonts なら、クライアントの環境に依存することなく、また画像化の手間を労することもなく、好きなフォントを好きな場所に適用できるようになります。

従来の選択肢

CSS font-family プロパティ　※要CSS
(X)HTML の <font face=""> 同様、指定したフォントがクライアント側にインストールされていることが表示の前提条件。インストールされているか否かで見栄えが変わってしまうため、特定のフォントを指定するのは敬遠されることが多いのが現状です。特にそれが特殊なタイプフェイスである場合、アンチエイリアスが効かない環境ではジャギー（輪郭のギザギザ）のために可読性を損なうこともあります。

画像 + 代替テキスト

画像置換　※要CSS
CSS を利用してテキストを画像に置き換える、いわゆる画像置換（image replacement）はさまざまな手段がありますが、アクセシビリティや論理構造的な妥当性とのかねあいで、それぞれの手段に一長一短あります。

また見出しに用いる場合には、新たな見出し用画像を作成するためのメンテナンスコストも悩みの種になりうるでしょう。その分、複数の色を使った文字など、表現力の幅は画像を用いた選択肢に軍配が上がります。

• Revised Image Replacement（mezzoblue）

Dynamic Font　※NC4+限定
実は Web Fonts は意外と早くから実装されていて、1997年の時点で当時の Netscape Communicator 4 と Internet Explorer 4 が実装しています。

この Netscape の Dynamic Font は、HexWeb Typograph や WebFont Maker といったツールを介して、TrueType などのフォントを pfr（TrueDoc Portable Font Resource）という形式のフォント定義ファイルに変換してサーバーにアップロードします（*.ttf や *.otf といったフォントファイルを直接アップロードするわけではありません）。実は Windows 版 IE に限り（Mac 版では不可）、ActiveX を利用することで Dynamic Font を表示することができます。

当時はまだ OS やウェブブラウザの多言語対応度も未熟だったため、Dynamic Font はデザインの幅を広げるだけでなく、欧米圏のユーザーに日本語や中国語のページを閲覧できるようにするという意義もありました。また東アジア圏のユーザーには外字の表示手段という利用法もあったわけですが、実際にはあまり活用されなかったようです。

• Dynamic HTML in Communicator（Dynamic HTML in Netscape Communicator -1997）
• Dynamic Font Support（Netscape Communications - 1997）
• Bitstream と Netscape、 Netscape Communicator ユーザにダイナミック・フォント・サポートを提供（Netscape プレスリリース - 1997）

Embedded Open Type　※IE4+限定
一方、IE の Embedded Open Type の仕様では eot という独自規格を採用していました。これも TrueType フォントを Microsoft が無償で配布していた WEFT（Web Embedding Fonts Tool）と呼ばれるツールを介して eot 形式のファイルに変換します。

なお、この eot フォントの表示は現在の IE6や7でも可能です。また eot も pfr も、今のところ CSS 3 Web Fonts（現在 Working Draft 段階）のフォーマットとして利用できるようになる見込みです。

• Font embedding（Microsoft）
• WEFT のスクリーンショット（Microsoft WEFT 3）

sIFR（Scalable Inman Flash Replacement）　※要Flashプラグイン+JavaScript
sIFRは、Flash に埋め込んだフォントのアウトラインと JavaScript を利用して、制作者のお好みのタイプフェイスでテキストを表示する仕組みです。表示された sIFR のテキストは、プレーンテキストと同じようにテキストデータとしてコピーできます。

埋め込んだフォントを見るには、閲覧者サイドのブラウザで Flash が再生できることと、JavaScript が有効になっている必要がありますが、仮に Flash や JavaScript が無効になっていても、本来のプレーンテキストが表示されるので、アクセシビリティが損なわれないのが利点です。また、Flash と JavaScript さえ使える環境なら、現行のほぼすべての OS やブラウザで閲覧可能なのも特長。

ただ日本語や中国語やハングルなど、東アジア圏のフォントを埋め込む場合は、表示がかなり重くなるのが最大のネックです。

• sIFR Documentation & FAQ
• sIFR でアンチエイリアス フォントの埋め込み（我的春秋）
• sIFR のデモとサンプルソース（我的春秋）

では、次にWeb Fontsの適用方法について見ていきましょう。