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

　前回のSafari 3.1でWebフォントを利用する--SafariのCSS対応に続いて、Safari 3.1が対応したCSS3のWebフォントの機能について紹介する。今回は、イタリック体やボールド体のフォントを個別に指定したり、インストールされたフォントの定義を行う方法を見ていきたい。

イタリック体やボールド体のフォントを定義する

　フォントには、イタリック体（斜体）やボールド体（太字）といった字体がある。Webフォントではこうした字体ごとに、使用するフォントファイルを指定することが可能だ。

　前回のサンプルで利用した、exljbrisのFontin Sansというフォントには、ローマン体（正体）だけでなく、イタリック体、ボールド体、ボールドイタリック体（太斜体）、スモールキャップス体のフォントファイルが用意されている。そこで、今回もこのフォントを利用して字体ごとにフォントを定義してみたい。

　字体ごとにフォントを定義するには、@font-faceにfont-styleやfont-weightの設定を追加する。ここでは上から順に、「WebFont」というフォントファミリーのローマン体、イタリック体、ボールド体、ボールドイタリック体のフォントを定義している。なお、スモールキャップス体の設定にはSafariが対応していないので、ここでは定義していない。

@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");
}

　この設定を記述したスタイルシートでは「WebFont」というフォントファミリーが利用できるようになる。さらに、同じ「WebFont」で表示する設定にした文字でも、その字体によって使用されるフォントファイルが変わるようになる。