CSS3 フォント

CSS3 @font-face ルール

以前のCSSバージョンでは、ウェブデザイナーはユーザーのコンピュータにインストールされているフォントを使用する必要がありました。

使用CSS3、ウェブデザイナーは自分の好きな任意のフォントを使用できます。

使用したいフォントファイルを見つけたら、そのフォントファイルをウェブサイトに含めるだけで、必要なユーザーに自動的にダウンロードされます。

選択したフォントは、新しいCSS3バージョンには、@font-faceルールの説明があります。

あなたの「自分の」フォントは、CSS3 @font-faceルール内で定義されます。

表内の数字は、そのプロパティをサポートする最初のブラウザのバージョン番号を示します。

プロパティ
@font-face	4.0	9.0	3.5	3.2	10.0

Internet Explorer 9+、Firefox、Chrome、Safari、Opera は WOFF (Web Open Font Format) フォントをサポートしています。

Firefox、Chrome、Safari、Opera は .ttf（TrueTypeフォント）および .otf（OpenType）フォントタイプをサポートしています。

Chrome、Safari、Opera は SVG フォント/折りたたみもサポートしています。

Internet Explorer も EOT (Embedded OpenType) フォントをサポートしています。

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

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

	ヒント：URLでは、フォントには小文字を使用してください。大文字はIEで予期しない結果を引き起こします。

HTML要素にフォントを使用するには、font-family プロパティでフォント名（myFirstFont）を参照してください：

太字テキストを含む別の @font-face ルールを追加する必要があります：

@font-face { font-family: myFirstFont; src: url(sansation_bold.woff); font-weight:bold; }

ファイル「Sansation_Bold.ttf」は別のフォントファイルで、Sansationフォントの太字が含まれています。

ブラウザがこのテキストのフォントファミリー「myFirstFont」を使用する場合、太字で表示されるはずです。

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

次の表は、すべてのフォント記述とその中の @font-face ルール定義を示しています：

記述子	值	説明
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" です。

その他の拡張