はじめてのWebfonts

2011/3/21

tutorial

今までは、サイト上で意図したフォントを使うには
PCに共通してインストールしてあるデバイスフォンを指定するか、
photoshopなどで画像として作る方法が主でした。

しかしCSS3からはwebfonts機能が搭載されたので、
CSSのみで希望のフォントが使える様になりました。

まだ一般化するには時間がかかると思いますが、
webfontsの基本をまとめてみました。

webfontsのメリット・デメリット
webfontsで使えるフォントフォーマット
Webfontの使い方 CSSの@font-faceを使う方法
Webfontsの使い方 Webfontサービスを利用する方法
Webfontサービス

webfontsのメリット・デメリット

CSSのみで希望のフォントを指定できるので、
非常にメリットが大きく思えますが、
まだまだ幾つかの問題もあります。

メリット	デメリット
CSSのみでフォントの指定ができるテキスト選択が出来る画像を作る必要がないので作業料が減る画像でないのでブラウザの文字拡大縮小に対応できる純粋なテキストなので画像よりもSEOで有利	フォントのフォーマットによって対応ブラウザが異なるフォントのライセンスがまだまだ不明瞭フォントデータを読み込むのにタイムラグが生じる（特に2バイトの日本語フォントでは顕著）

webfontsで使えるフォントフォーマット

TTF(TrueType) /OTF(OpenType)

デスクトップアプリケーションで使われているフォーマット。
最も手軽に導入できますが、フォント制作者が生のデータをサーバーに上げることに難色を示したので、
WOFFにその座を明け渡すことになりそうです。
Firefox3.5〜、Safari3〜が対応。

EOT (Embedded OpynType)

Microsoftがwebfonts向けに提唱。
Microsoftが提供している専用コンバートツール「Web Embedding Fonts Tool (WEFT)」で、
EOTファイルを作成することができます。
IE4〜対応。IE4以外のブラウザは非対応。

WOFF(Web Open Font Format)

今後のwebfontsの標準フォーマットになることが確定しています。
圧縮されているためデータが軽い。
基本的にwebサイトでのみ利用でき、デスクトップアプリケーションでは利用できないとして
ライセンスを分離している。
Firefox3.6〜、Chrome、Opera、IEも9から対応。

SVG Fonts

SVG(XMLベースのベクターグラフィックス言語)のフォント版。
iPhoneやiPadのSafariはTTFやOTFには非対応ですが、
唯一SVGには対応しています。
※iOS 4.2にてTTF形式に対応しました。

番外 JavascriptやFlashと組み合わせた方法

フォントファイルをjavascriptに変換し、テキストを任意のフォントで置き換えるCufon、
HTMLのテキストをjavascriptでflashデータに置き換えるsIFRなどもあります。
javascriptやFlashと組み合わせることで、
フォントフォーマットに左右されずにフォントを指定する方法もあります。
詳しくは下記のサイトが参考になります。
ウェブで任意の書体を使う方法まとめ【更新】 – フォントブログ

Webfontの使い方 CSSの@font-faceを使う方法

webfontsを利用するには@font-faceを使います。
@font-faceで任意のフォント名を作成し、
そのフォントを使いたい箇所のセレクタの属性で指定します。

@font-face{
font-family:'VitaminRegular';	/*任意のフォント名*/
src:url('VITAMIN_-webfont.woff') fromat('woff');	/*フォントファイルへのパス、フォーマット*/
}

#test{
font-family: VitaminRegular;	/*先ほどのフォント名*/
}

前述の通りブラウザによって使えるフォントフォーマットが異なりますので、
クロスブラウザに対応する場合は以下の様に書きます。

@font-face {
font-family:'VitaminRegular';
src: url('VITAMIN_-webfont.eot?iefix') format('eot'),/*ie6-8*/
url('VITAMIN_-webfont.woff') format('woff'),	/*Firefox,Chrome,Opera,IE9*/
url('VITAMIN_-webfont.ttf') format('truetype'),	/*safari*/
url('VITAMIN_-webfont.svg#webfontBW5C59cp') format('svg');	/*iphone/iPad*/
}