@font-faceを使用すると、スタイルシートでの
フォントの指定と実際に使用するフォントデータ対応関係を示すことができます。たとえば、「Times New Roman」はフォントファミリー名ですが、実際にはその中に「Times New Roman Bold」「Times New Roman Italic」「Times New Roman Bold Italic」などという個別のフォントが含まれています。しかし、スタイルシートのプロパティでは、フォントファミリーのみの指定しかできません。
また、スタイルシートのプロパティでフォントの太さを指定することができますが、100-900のうち、どれを指定すると「Times New Roman Bold」が使用されるかなども定められていません。@font-faceを使用すると、これらの対応を以下の例のように明確に示すことができます。
この例の場合「src: local("フォント名")」で示しているのが実際に使用するフォントで、それ以外の部分は、そのフォントを選択する条件を示しています。たとえば、一番下の@font-faceでは、font-familyプロパティで「Times New Roman」が指定され、かつfont-styleの値が「Italic」または「oblique」で、font-weightの値が「500-900」の場合は「Times New Roman Bold Italic」を使用するように定義しています。
@font-face { /* (C2- ie4-) */
src: local("Times New Roman Italic");
font-family: "Times New Roman";
font-style: italic, oblique;
}
@font-face {
src: local("Times New Roman Bold");
font-family: "Times New Roman";
font-style: normal;
font-weight: 500,600,700,800,900;
}
@font-face {
src: local("Times New Roman Bold Italic");
font-family: "Times New Roman";
font-style: italic, oblique;
font-weight: 500,600,700,800,900;
}
実際には、src: url(URI)形式でフォントをダウンロードさせたり、フォントの形式を指定することができます。また、上記のほかにフォントの選択方法や加工方法に関して20種類以上の指定方法も用意されています。しかし、実際にはほとんどサポートされていない機能ということもあって本リファレンスでは割愛させて頂きます。興味のある方は、CSS2仕様の「
15.3 Font selection」を参照してください。