CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS @font-faceルール

@font-faceルールは、スタイルシートで使用するフォント名と特定のダウンロード可能なフォントを関連付けるために使用されます、@font-face CSS at-ruleは、テキストを表示するためのカスタムフォントを指定します。

　このルールでは、字体系列font-familyデスクリプタを使用してフォントに名前を付け、srcデスクリプタは外部フォント名に関連付けられます。

の使用構文

このルールの構文は以下の通りです：

@font-face: font-description

この@font-faceルールには、通常のCSSにあるような1つまたは複数の属性の宣言が含まれており、これが字体記述と呼ばれます。指定できるのは最大24個の異なる属性がありますが、それらのすべての説明は本リファレンスの範囲を超えます-さらに詳しい情報は、以下のURLにアクセスしてくださいW3C CSSフォントモジュールページ。

@font-faceルールの一般的な形式は以下の通りです：

@font-face { font-family: fontname; src: url(fontfile path); }

その後、フォントは属性（例えばfont-familyおよび）内の名前font、ただし、ダウンロード可能なフォントをサポートしていない場合や何らかの理由でフォントが読み込めない場合には、代替として他のフォント名を指定する必要があります。

下面的示例演示了如何使用@font-以下の例では、@fontの使用方法を示しています。

face。

　　@font-Regular.ttf")　format("truetype");
　　　font-例
　　　Bold.eot");/src:　url("../fonts-family:　"OpenSans";
　　　Bold.eot");/src:　url("../fonts-Regular.eot");
　　serif;
　　face属性。
　　　font-p　{-family:　"OpenSans",　Arial,　sans
　　　font-body　{　1.2size:
　　serif;

}/テストをしてみる‹

注意：em;-使用して@ font

face規則、ユーザーがコンピュータにインストールしたフォントの数に依存しないこともできます。-通过设置相应的规则到，当设置了诸如粗体或斜体之类的特定字体特征时，也可以设置对特定的可下载字体的选择@font

face。

　　@font-Regular.ttf")　format("truetype");
	font-例
　　　Bold.eot");/src:　url("../fonts-family:　"OpenSans";
　　　Bold.eot");/src:　url("../fonts-Regular.eot");
　　serif;
　　@font-Regular.ttf")　format("truetype");
　　　font-face　{
　　　Bold.eot");/src:　url("../fonts-family:　"OpenSansBold";
	Bold.eot");/src:　url("../fonts-OpenSans
　　serif;
　　Bold.ttf")　format("truetype");1　h
　　　font-{-family:　"OpenSans",　Arial,　sans　/*　family:　"OpenSansBold",　Arial,　sans　*/
　　serif;
　　Specify　the　OpenSans　bold　font
　　　font-p　{-family:　"OpenSans",　Arial,　sans
　　serif;

}/テストをしてみる‹

›

参量

パラメータの意味は以下の通りです：	パラメータ	値
説明 -必須
font-family	font-family	以下のパラメータは必須です。font-familyフォント属性値のフォント名。
src	src	使用するフォントファイルの場所を指定します。
オプション -以下のパラメータはオプションです。
font-style	font-style	有効なfont-style属性値。
font-weight	font-weight	有効なfont-weight属性値（相対値bolderおよび除外lighter）。

ブラウザの互換性

@font-face属性のブラウザの互換性、以下のテーブルの数字は、その属性をサポートするブラウザの最低バージョンを示しています；すべての主要ブラウザはこのルールをサポートしています。

	Firefox 3.5+ Google Chrome 4+ Internet Explorer 4+ Apple Safari 3.1+ Opera 10+

注意：ブラウザ間で特定のフォント技術のサポートには大きな差があります。Internet Explorerは.eotおよび.wof形式のフォントをサポートし、Firefox、Chrome、Safari、Operaは.woff、.ttfおよび.otf形式のフォントをサポートしています。

さらに詳しく

以下のチュートリアルを参照してください：CSSフォント。

CSS @keyframesルール CSS @charsetルール