望みの日本語フォントで表示できるウェブフォント
今まではフォントを指定しても、見ている人の環境に同じフォントがインストールされていなければ、表示されませんでした。
そのため、好みのフォントをPNGやJPEGなどの画像に変えて表示していました。しかしそれには多くのデメリットがあります。
1.検索エンジンが読めないのでSEO的に不利
2.訪問者が文字サイズを変更・検索・文字をコピーができない
3.ホームページの修正・更新の作業量が増える
4.翻訳・読み上げソフトが使えない
5.サイト全体のイメージを決める本文には使えない
しかしウェブフォントを使えば、見ている人のパソコンに同じフォントがインストールされていなくても、指定したフォントで表示できます。
ただ海外ではすでに多くのサイトが取り入れていますが、日本ではまだ殆ど使われていません。それにはいくつか理由があります。まず日本語ファント自体の読み込みが重い(これは改善されつつあります)。有料で使用できるフォントがあるが使用料やアクセス数制限などの問題から、個人サイトでは気軽に使えない。ウェブフォントファンでは、こういった問題も解決していけるように、いろいろな話題を取り上げていきます。
ウェブフォントのファイル形式
TrueType(.ttf)
アップルコンピュータとマイクロソフトが共同開発した、パソコン環境で一般的なフォーマット。
OpenType(.otf)
TrueTypeの後継フォントとしてアドビ、マイクロソフトが共同で開発した一般的なフォントフォーマット。
EOT(.eot)
Microsoft開発のウェブフォント用フォントフォーマット。IEのみ対応。
WOFF(.woff)
軽量なウェブフォント用に開発されたフォーマット。モダンブラウザーが対応。
SVG(.svg)
以下は各ブラウザでの対応状況
TrueType (.ttf) |
OpenType (.otf) |
EOT (.eot) |
WOFF (.woff) |
SVG Font (.svg) |
|
---|---|---|---|---|---|
IE 4~ | × | × | ○ | × | × |
IE 9~ | × | × | ○ | ○ | × |
Chrome 4~ | ○ | ○ | × | × | ○ |
Chrome 6~ | ○ | ○ | × | ○ | ○ |
Safari 3.1~ | ○ | ○ | × | × | ○ |
FireFox 3.5~ | ○ | ○ | × | × | × |
FireFox 3.6~ | ○ | ○ | × | ○ | × |
Opera 10~ | ○ | ○ | × | × | ○ |
Opera 11.10~ | ○ | ○ | × | ○ | ○ |
iOS4.0~ | × | × | × | × | ○ |
iOS4.2~ | ○ | ○ | × | × | ○ |
Android 2.2~ | ○ | ○ | × | × | × |
この表で分かる通り少なくとも、2つ以上のファイルフォーマットを指定する必要があります。
(iOS4.0やIE9以前は個人的にはこの際、切りすすても良いと思います)