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

　次のソースではすべての文字を「WebFont」で表示するように設定している。その上で、順にローマン体、イタリック体、ボールド体、ボールドイタリック体で表示するように設定した。

　イタリック体の「a」や「g」の文字を見ると、ローマン体を斜めに変形したものではなく、斜体としてデザインされたフォントで表示されていることがわかる。

Safari 3.1の表示

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

@font-face	{
	font-family: WebFont;
	src: url('font/Fontin_Sans_R_45b.otf') format("opentype");
	}

@font-face	{
	font-family: WebFont;
	font-style: italic;
	src: url('font/Fontin_Sans_I_45b.otf') format("opentype");
	}

@font-face	{
	font-family: WebFont;
	font-weight: bold;
	src: url('font/Fontin_Sans_B_45b.otf') format("opentype");
	}

@font-face	{
	font-family: WebFont;
	font-style: italic;
	font-weight: bold;
	src: url('font/Fontin_Sans_BI_45b.otf') format("opentype");
	}

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

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

div#font01	{
	font-style: normal;
	font-weight: normal;
	}

div#font02	{
	font-style: italic;
	font-weight: normal;
	}

div#font03	{
	font-style: normal;
	font-weight: bold;
	}

div#font04	{
	font-weight: bold;
	font-style: italic;
	}

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

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