iPhone での -webkit-text-stroke プロパティ

HTML5やらCSS3をボチボチと勉強していまして、最近覚えたものに、アップル拡張の「-webkit-text-stroke」というCSSプロパティがあります。これは文字の縁取りを行うもので、ふちの太さと色、内側の色を次のプロパティで指定します。

-webkit-text-stroke-width

ふちの太さ

-webkit-text-stroke-color

ふちの色

-webkit-text-fill-color

内側の色

ふちの太さと色は、「-webkit-text-stroke: width color」という具合に、まとめて指定することもできます。

サンプルを書いてみると、こんな感じになります。

<div style="font: bold 100px/1em Helvetica,sans-serif; color: blue; -webkit-text-fill-color: red; -webkit-text-stroke-color: green; text-align: center;">
<span style="-webkit-text-stroke-width: thin;">A</span>
<span style="-webkit-text-stroke-width: medium;">A</span>
</div>

HTMLのstyle属性に記述しているの少し読みにくいですが、まずフォントは「Helveticaボールドの100px」、ふちの色が「グリーン」で内側の色が「レッド」、オリジナルの文字色は「ブルー」と指定し、さらにふちの太さを「細」と「中」の2種類を指定しています。

で、前記のコードを実際に出力すると、次のようになります。

A A

これをMacのSafari 4.0.5で表示すると、次のように表示されます。

Firefox 3.6.3だと対応していないので「-webkit〜」プロパティは無視され、「color」プロパティで指定した文字色＝ブルーで表示されます。

ここまでは予想どおりの結果なのですが、iPhone OS 3.1.3のSafariで表示すると、少しおかしな結果になります。

内側の色は指示したとおり「レッド」になっていて、指定したふちの太さに合わせて内側が細くなっているのですが、何故か肝心のふちが表示されません。

仕様には「iPhone OS 2.0以降で有効」とあるので、対応しているはずなのですが……。