Category: リファレンス

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