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

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

塗りの色を指定する

 文字の塗りの色はcolorプロパティで指定するが、Safari 3では-webkit-text-fill-colorというプロパティも利用できるようになっている。colorと-webkit-text-fill-colorの両方のプロパティを指定した場合、-webkit-text-fill-colorの指定が優先される。

文字の塗りの色を指定するプロパティ
プロパティ機能
color文字の塗りの色を指定する
-webkit-text-fill-color文字の塗りの色を指定する

 たとえば、次のサンプルではcolorプロパティを水色、-webkit-text-fill-colorプロパティを黄色に設定している。すると、文字の塗りの色はSafariでは黄色で、-webkit-text-fill-colorに対応していない他のブラウザでは水色で表示される。

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

 -webkit-text-fill-colorプロパティは、文字の塗り色を透明にしてアウトラインを表示したいときに活用できる。colorプロパティの値を「transparent」と指定すれば塗り色は透明になるが、アウトラインを表示できなければ透明になった文字を読むことはできない。そこで、colorプロパティではアウトラインに対応していないブラウザ用の塗り色を指定して、-webkit-text-fill-colorプロパティで透明色を指定する。

 次のサンプルでは背景画像を表示して、-webkit-text-strokeでアウトラインを白色に、-webkit-text-fill-colorで塗り色を透明色に設定した。また、colorプロパティでは文字の色を白色に設定している。これで、Safariでは文字を透明色で、他のブラウザでは白色で表示することができる。

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

 なお、現状で「color: transparent」と指定して文字の塗り色が透明になるのは、SafariとFirefoxだ。OperaとInternet Explorerでは透明にはならず、黒色で表示される。

アウトラインを表示したときの下線の色

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]