Safari 3.1でWebフォントを利用する--様々な字体を定義する

インストールされたフォントの定義を行う

　@font-faceでは、サーバー上に用意したフォントだけでなく、表示環境にインストールされたフォントの定義を行うこともできる。たとえば、「Arial」のボールド体のフォントを変更するといったことが可能だ。

　「Arial」はWindowsやMacintosh環境に標準でインストールされているフォントファミリーで、以下のようなフォントで構成されている。

• Arial
• Arial Italic
• Arial Bold
• Arial Bold Italic
• Arial Black

　Arialを使って文字を表示した場合、標準の設定では、ブラウザはローマン体を「Arial」、ボールド体を「Arial Bold」で表示する。

標準の状態で表示したもの。Arialのローマン体（上）は「Arial」、ボールド体（下）は「Arial Bold」で表示される

※ブラウザで表示を確認する

　次のソースように@font-faceでフォントを定義すると、ボールド体を「Arial Black」で表示することができる。なお、表示環境にインストールされたフォントをsrcで指定する場合は、url()の代わりにlocal()を利用して、フォントの名前を指定する。

@font-faceを設定した状態で表示したもの。ボールド体（下）が「Arial Black」で表示される

/* =============================================== */
/* フォントの定義                                  */

@font-face	{
	font-family: Arial;
	src: local('Arial');
	}

@font-face	{
	font-family: Arial;
	font-weight: bold;
	src: local('Arial Black');
	}

/* =============================================== */


div	{
	font-family: Arial; 
	font-size: 40px;
	}

div#font01	{
	font-weight: normal;
	}

div#font02	{
	font-weight: bold;
	}

<div id="font01">My Favorite Songs - 12345</div>
<div id="font02">My Favorite Songs - 12345</div>

※ブラウザで表示を確認する