CSS3 @font-faceルール

例

「myFirstFont」という名前のフォントを指定し、そのURLがどこにあるかを指定します：

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

Internet Explorer 9、Firefox、Opera、Chrome、Safari は @font-face ルールをサポートしています。

ただし、Internet Explorer 9 は .eot タイプのフォントのみをサポートし、Firefox、Chrome、Safari、Opera は .ttf と .otf の2種類のフォントをサポートしています。

注意：Internet Explorer 8 およびそれ以前のIEバージョンは @font-face ルールをサポートしていません。

@font-face ルールにより、ウェブデザイナーは「ウェブセーフ」なフォントの1つを使用する必要がなくなります。

フォントの名前、@font-face ルール：

フォントファイルがお使いのサーバー上のどこかにある場合は、CSSを参照してください：

フォントファイルが別の場所にある場合は、完全なURLを使用してください：

このフォントを使用する準備ができました。以下は、すべてのdiv要素でそれを使用する方法の例です：

div
{
font-family: myFirstFont;
}

font-properties

以下の例は、divでフォントを使用するものです：

div
{
font-family: myFirstFont;
}

@font-face
{
font-properties
}

フォント記述子	值	説明
font-family	name	必須です。フォントの名前を定義します。
src	URL	必須です。そのフォントをダウンロードするURLを定義します。
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	オプションです。フォントをどのように引き伸ばすかを定義します。デフォルトは「normal」です。
font-style	normal italic oblique	オプションです。フォントのスタイルを定義します。デフォルトは「normal」です。
font-weight	normal bold 100 200 300 400 500 600 700 800 900	オプションです。フォントの太さを定義します。デフォルトは「normal」です。
unicode-range	unicode-range	オプションです。フォントがサポートするUnicode文字の範囲を定義します。デフォルトは「U+0-10FFFF」です。

CSS3 チュートリアル：CSS3 Fonts

その他の拡張