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

エ・ビスコム・テック・ラボ
2008-06-27 08:00:00
  • このエントリーをはてなブックマークに追加

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

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

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

アウトラインのデザインを指定するプロパティ
プロパティ機能
-webkit-text-stroke-colorアウトラインの色を指定する
-webkit-text-stroke-widthアウトラインの太さを指定する
-webkit-text-strikeアウトラインの色と太さをまとめて指定する

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

Safari 3での表示 Safari 3での表示
div{
font-size: 64px;
font-weight: bold;
color: skyblue;
-webkit-text-stroke-color: darkblue;
-webkit-text-stroke-width: 3px;
}
こんにちは
ブラウザで表示を確認する

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

Safari 3での表示 Safari 3での表示
div{
font-size: 64px;
font-weight: bold;
color: skyblue;
-webkit-text-stroke: 3px darkblue;
}
ブラウザで表示を確認する

塗りの色を指定する

  • 新着記事
  • 特集
  • ブログ