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

エ・ビスコム・テック・ラボ
2008-06-27 08:00:00
今回はスタイルシートを利用した文字のアウトラインの表示を解説する。
最新特集【一覧】

EPUB生成ツール「ReVIEW」について達人出版会の高橋氏に聞いてみた

1つのソースでEPUBとPDFを生成できる「ReVIEW」を試す

Snow Leopard探索記 最終回：線路は続くよどこまでも

　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;
}
※ブラウザで表示を確認する

塗りの色を指定する

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