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

塗りの色を指定する

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

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

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での表示

他のブラウザでの表示

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では透明にはならず、黒色で表示される。

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