先日Opera 10 の アルファ版がリリースされ、これでメジャーな Web ブラウザーすべてで Web Fonts を使う準備が整いました。

実際に demo を作成してみました。IE 4.01 以降、Safari 3.1 以降、Firefox 3.1 b 以降、Opera 10 a 以降のいずれかの環境で確認できます。EOT ファイルは文字数を調整し、1.6 MB のフォントをダウンロードします。IE 以外の Web ブラウザーは 2.9 MB のフォントをダウンロードします。大きいファイルをダウンロードするので適用されるまでに時間がかかります。(転送量が気になりそうですね…)

• 動作確認用の demo

IE 4.01 での Web Fonts 表示の様子。IE は EOT ファイルのみに対応しています。

Safari 3.1 での Web Fonts 表示の様子。問題なさそう。

Firefox 3.1 b での Web Fonts 表示の様子。フォントはレンダリングされているもののボールドがうまくかかっていない。

Opera 10 a での Web Fonts 表示の様子。問題なさそう。

IE は EOT ファイルのみにしか対応していないため、2 つの font-face を定義して使います。

e.g.

@font-face {
font-family: aoyagi;
src: url(AoyagiKouzanFontGyousyo.ttf);
}

@font-face {
font-family: aoyagi-eot;
src: url(AoyagiKouzanFontGyousyo.eot);
}

body{
font-family:aoyagi,aoyagi-eot;
}

フォントは青柳衡山氏作成の青柳衡山フォント行書 1 (パブリックドメイン) を使用させていただきました。

トラックバックURI

http://www.yomotsu.net/lab/css/webfonts/trackback

実験室に戻る

Web サイト内検索