2011年8月2日火曜日

CSS3のWeb Font

従来からフォントの指定はできましたがローカルにインストールされていることが必須となっていました。
CSS3からサーバ上にあるフォントを使用することができます。

@font-face {
    font-family: 'フォント名';
    src: url(フォントのURL) format('truetype');
}
p {
    font-family: 'フォント名', serif;
}

フォント名の指定は何でもいいようですが識別しやすい名前がいいと思います。
フォントのURLはhttp://~もしくは相対で記述できます。
formatの定義には、拡張子がttfの場合は'truetype'、otfの場合は'opentype'を指定します。

フォントを使用するにあたりライセンス等は十分に注意する必要がありますが、おすすめはGoogle Web Font
無料でフォントを使用できコード(link要素とCSSコード)も載ってます。
さらにIE6とかにも対応しています。

調べてみたらIE6でもWeb Fontは使えるそうです。(恥ずかしながら知りませんでした)
ただし、フォントの形式がeot(Embedded Open Type)のみとなっています。
ttf2eotサイトでttfファイルをeotファイルに変換して使うといいと思います。

IEの場合
@font-face {
    font-family: 'フォント名';
    src: url(フォントのURL:拡張子がeot);
}
p {
    font-family: 'フォント名', serif;
}

0 件のコメント:

コメントを投稿