CSS3 フォント

CSS3 @font-face ルール

CSS3 の以前では、web デザイナは、すでにユーザのコンピュータにインストール済のフォントを使わなければなりませんでした。

CSS3 になり、web デザイナは、好きなフォントを使用できるようになりました。

使用したいフォントを見つけるか、または購入したときに、web サーバへフォント・ファイルを含めておけば、 必要に応じて、自動的にユーザへダウンロードされます。

あなた "独自 " のフォントは、CSS3の @font-face ルールで定義します。

ブラウザ・サポート

Firefox、Chrome、Safari 及び Opera は、.ttf (True Type Fonts) と .otf (OpenType Fonts) タイプのフォントに対応しています。

Internet Explorer 9+ は、@font-face ルールに対応していますが、 それは .eot (Embedded OpenType) タイプのフォントに対応しているだけです。

注: Internet Explorer 8 以前のバージョンは、@font-face ルールに対応していません。

使用したいフォントの使用

新しい @font-face ルールでは、最初にフォントの名前を定義し（例えば、myFirstFont）、 次にフォントファイルにポイントする必要があります。

HTML要素へフォントを使用するには、font-familyプロパティを介してフォントの名前（myFirstFont）を参照します:

例

<style type="text/css">
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}
</style>

Try it yourself »

ボールド・テキストの使用

ボールド・テキストの記述子を含む、別な @font-face ルールを追加しなければなりません:

例

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
     url('Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;
}
 

Try it yourself »

"Sansation_Bold.ttf" ファイルは、Sansation フォントのボールド文字を含む別なフォントファイルです。

ブラウザは、フォントファミリ "myFirstFont" であるテキストの一部を太字でレンダリングする時は、いつもこれを使用します。

このように、同じフォントに対して多くの @font-face 規則を持つことができます。

CSS3 フォント記述子

次の表は、@font-face ルールの中で定義できる全フォント記述子をリストしています: