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;
}

My Favorite Songs - 12345
My Favorite Songs - 12345

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