Robert’s talk |
CSS3における@font-face機能を使うことでさまざまなフォントが利用できるようになる。ブラウザにおけるレンダリング処理の改善も進められており、指定されたフォントがより指定通りにレンダリングされるようになりつつある。HTML5/CSS3時代のブラウザはこれまでよりもフォントの表現力が高まることになる。
しかし、サポートしている機能やフォントフォーマットはまださまざまで、サポートしていないバージョンのブラウザも多く利用されている。どのブラウザのどのバージョンがどの機能に対応しているか把握し、それらに適した指定を実施する必要がある。そうした場合に使えるデータがUsing CSS3 and @font-face to use any custom font on a web site - Robert's talkにまとまっている。CSS3フォント機能とそれぞれのブラウザにおける対応状況が掲載されている。掲載されているデータを表にまとめると次のとおり。
IE | Firefox | Chrome | Safari | Opera | Safari(iOS) | |
---|---|---|---|---|---|---|
@font-face | 4+ | 3.5+ | 4+ | 3.1+ | 10+ | |
WOFF | 9+ | 3.6+ | 6+ | 6+ | 11.1+ | |
OpenType | 3.5+ | 4+ | 3.1+ | 10+ | 4.2+ | |
TrueType | 9+ | 3.5+ | 4+ | 3.1+ | 10+ | 4.2+ |
EOT | 4+ | |||||
SVG | 4+ | 3.1+ | 10+ | 3.2+ |
Using CSS3 and @font-face to use any custom font on a web siteには実際に複数のブラウザに対応したフォント指定を実施するためのサンプルも掲載されており参考になる。