この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。
ウェブ上で表示されているフォントは、基本的にはベクターグラフィックなので、フォントサイズを12pxから120pxに大きくしたりしても、ぼやけたりしないのです。ベクターと言うことは、ピクセルのデーターでフォントや形を表示するのではなく、数式で計算されたポイント一個一個で作られておます。なので、ベクターイメージ編集ソフト（e.g. Adobe Illustrator)の様に、テキストの周りストロークを書いたりできるのです、そして、ついてWebkitでも同じ様にテキストにストロークを書けるようになりました。
使用例：
h1 {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
ショートハンド
-webkit-text-stroke: 1px black;
そこで自分はすぐに”いいねー。webkitでしかサポートしてないってことは、テキストカラーと背景を白にして、テキストストロークを入れれば、webkitだけにでもテキストの飾り付けができる！”
嬉しいことに、Webkitも簡単にWebkitでしか適用なれないプロパティーが提供しているので、全部のブラウザーに影響なく使える；
h1 {
color: black;
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
@font-face を使って Anime Ace 2 のフォントにストロークを使った場合。
webkit以外のブラウザーは普通の黒い文字になる。
text-strokeを他の方法で再現
次に、まだwebkitしか対応していないtext-strokeを使用するのではなく、FirefoxやOpera,IE9でも対応しているtext-shadowを使ってテキストストロークを再現してみましょう。shadowを上下左右に1pxずつ ずらせて blurはなしで設置します。
h1 {
color: white;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
これが、テキスト影(text-shadow)を使ってtext-strokeを再現したのになります。かなりいい感じに再現できてますのねー。この方法を使う一番の問題は、2px以上のストロークを設定すると、ストロークに間が空いてきます。webkitを使ってもstrokeのpxが大きくなると問題が出てくるので、とっちらを使ってもそう大差は無さげな気がしあす。
text-strokeとtext-shadowを合わせる
text-strokeとtext-shadowを合わせて使うと、なかなか面白い表現をすることができる。それでは、webkitのtext-strokeを入れてからtext-shadowをいれてみましょう。
h1 {
-webkit-text-stroke: 1px black;
color: white;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
テキストストロークのアニメーション
テキストストロークは、色んなカラー値使用できるので、透明なストロークを重ね合わせて、重なった部分だけが濃くすることもできる。
残念ながら、ストロークの太さはWebkit Keyframeアニメーションには対応してないが、色のアニメーションは対応している。
/* Only the color will change, not the width */
@-webkit-keyframes colorchange {
0% {
-webkit-text-stroke: 10px red;
}
100% {
-webkit-text-stroke: 20px green;
}
}
