Safari 3.1でWebフォントを利用する--SafariのCSS対応

　現在、Webページで利用できるフォントはユーザーの環境にインストールされたものだけで、文字の表現の幅は非常に限られている。しかし、Webフォントの機能を利用できるようになれば、制作者がサーバー上に用意したフォントでWebページを表示できるようになる。

　3月18日から提供されているSafari 3.1では、CSS 3やHTML 5で提案されている機能への対応がさらに進んだ。そこで、新しく対応したスタイルシートの機能の中から、CSS 3の「Webフォント」について2回に分けて紹介していきたい。

サーバー上に用意したフォントでWebページを表示する

　ユーザーの環境にないフォントでWebページを表示するため、まずは、利用したいフォントをサーバー上に用意する。OpenTypeやTrueType形式のフォントファイルを利用することが可能だ。

　ここでは、exljbrisのFontin Sansというフォントを利用する。@font-faceでの利用条件がライセンスに明記されたフリーフォントだ。

　次に、スタイルシートの@font-faceで、サーバー上に用意したフォントの定義を行う。

　フォントを定義するには、font-familyでフォントのファミリー名を、srcでフォントファイルのURLを指定する。このとき、ファミリー名には任意の名前を指定することが可能だ。ここではファミリー名を「WebFont」と指定して、OpenType形式のフォントファイルへのURLを指定した。こうして定義したフォントは、ユーザーの環境にインストールされているフォントと同じように、スタイルシート内で利用できるようになる。

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

　「WebFont」というファミリー名で定義したフォントは、font-familyプロパティを「WebFont」と指定すれば利用することが可能だ。次のソースでは、<h1>と<address>でマークアップした部分を「WebFont」で表示するように指定している。Safari 3.1で表示してみると、Macintosh版とWindows版のどちらでも同じように定義したフォントで表示されることがわかる。

Safari 3.1（Macintosh版）の表示

Safari 3.1（Windows版）の表示

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

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

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


h1	{
	font-family: WebFont; 
	font-size: 60px;
	text-align: center;
	border: solid 1px #4488aa;
	margin: 20px;
	padding: 5px;
	}

address	{
	font-family: WebFont; 
	font-size: 14px;
	font-style: normal;
	text-align: center;
	margin: 20px;
	padding: 5px;
	}

<h1>My Favorite Songs - 12345</h1>

<address>
This page uses the <a href="http://www.josbuivenga.demon.nl/fontinsans.html">Fontin font by exljbris.</a>
</address>

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