この記事は、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 のフォントにストロークを使った場合。

properstroke css テキストストローク text stroke

webkit以外のブラウザーは普通の黒い文字になる。

fallback css テキストストローク text stroke

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が大きくなると問題が出てくるので、とっちらを使ってもそう大差は無さげな気がしあす。

alltextshadow css テキストストローク text stroke

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;
}

thickandbeautiful css テキストストローク text stroke

テキストストロークのアニメーション

テキストストロークは、色んなカラー値使用できるので、透明なストロークを重ね合わせて、重なった部分だけが濃くすることもできる。
残念ながら、ストロークの太さは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;
        }
}