Safari 3.1でWebフォントを利用する--SafariのCSS対応

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

フォントの種類の指定

　@font-faceのsrcでは、フォントファイルのURLといっしょにフォントの種類を指定している。フォントの種類はformat()を使って次のような形で指定する。

@font-face{
src: url(〜) format("〜");
}

　フォントの種類がOpenTypeの場合は「opentype」、TrueTypeの場合は「truetype」と指定する。formatの記述は必須ではないが、ブラウザがフォントの種類を判断して、未対応のフォントをダウンロードしないようにする効果がある。

Webフォントの規格とInternet Explorerの対応

　Webフォントの規格は、CSS 2の「15.3 Font selection」で定義されている。しかし、CSS 2.1では削除され、CSS 3の草案「Web Fonts」として復活した。

　Safari 3.1が本格的にWebフォントに対応したブラウザとなったわけだが、Internet Explorerはバージョン4から対応している。ただし、使用できるフォントファイルの形式は、Embedded OpenType（EOT）だけとなっており、使い勝手の悪さなどから普及しなかった。

　現在でも当時のデモンストレーションページ「Font embedding」が残っており、Internet Explorerのバージョン7や8（ベータ版）でもEOTファイルを使ったWebフォントの表示を確認することができる。EOTファイルを生成するWEFTというアプリケーションも、開発は止まったままだがダウンロードすることが可能だ。なお、Safari 3.1では、EOTファイルを使ったフォントの表示はサポートされていない。

MicrosoftのWebフォントのデモンストレーションページをInternet Explorer 7で表示したもの。文字はEOT形式のフォントで表示されている。

　次回は、CSS 3の草案を参考にしながら、Webフォントでできることをもう少し詳しく見て行きたい。