文字のアウトラインを表示する--FirefoxとSafariのCSS対応

　Safariのバージョン3では、スタイルシートを利用して文字のアウトラインを表示できるようになった。スタイルシートで文字をアウトライン化すれば、画像を使わずに文字のデザインの幅を広げることができる。「Safari 3.1でWebフォントを利用する」で紹介したWebフォントが普及すれば、文字のデザインに画像を使う必要は少なくなっていくだろう。

アウトラインのデザインを指定する

　文字のアウトラインのデザインは、以下のような-webkit-text-stroke〜というプロパティで指定する。現在のところ、指定できるのはアウトラインの色と太さだ。

　次のサンプルでは、colorプロパティで文字の色を水色に、-webkit-text-stroke-colorプロパティでアウトラインの色を青色に、-webkit-text-stroke-widthプロパティでアウトラインの太さを3ピクセルに設定している。

Safari 3での表示

div	{
	font-size: 64px;
	font-weight: bold;
	color: skyblue;
	-webkit-text-stroke-color: darkblue;
	-webkit-text-stroke-width: 3px;
	}

<div>こんにちは</div>

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

　また、-webkit-text-strokeプロパティを利用すれば、アウトラインの色と太さをまとめて指定することができる。

Safari 3での表示

div	{
	font-size: 64px;
	font-weight: bold;
	color: skyblue;
	-webkit-text-stroke: 3px darkblue;
	}

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

塗りの色を指定する