CSSで文字にボーダー(縁取り)をつけたい。

Illustratorの線やPhothopのレイヤースタイルの境界線みたいに文字にボーダー(縁取り)をつける方法のメモ。
といっても、イラレの線やPhoshopの境界線みたいにバチッとした縁取りを付けるのは難しそうです。

1. text-stroke を使う方法

f:id:kikiki-kiki:20170327123709p:plain
text-stroke サポート状況

IE以外はそこそこサポートされてきてるっぽい。
プロパティには-webkit-のブレフィックスが現状では必要。(なぜかFirefoxも。-webkit-text-stroke ってプロパティ名？)

書き方

f:id:kikiki-kiki:20170327130903p:plain

/* width | color */
-webkit-text-stroke: 2px #000;

又は

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #000;

ボーダー(縁取り)は文字の内側に付く
※ color: transparentにすれば文字部分を透過に出来ます

2. text-shadow を使う方法

text-shadowの構文は下記の様な感じです。

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 0 #000
/* color | offset-x | offset-y | blur-radius */
text-shadow: #000 1px 1px 0

このoffset-x | offset-y | blur-radius | colorのセットを「,」区切りで複数指定することが出来るので、上下左右にソリッドなtext-shadowを付けることで文字にボーダー(縁取り)を付けることができます。

書き方

f:id:kikiki-kiki:20170327141539p:plain

// 上
text-shadow: 2px 2px 0 #000,
             -2px 2px 0 #000,
             2px -2px 0 #000,
             -2px -2px 0 #000;
// 下
text-shadow: 2px 2px 1px #000,
             -2px 2px 1px #000,
             2px -2px 1px #000,
             -2px -2px 1px #000;

ボーダー(縁取り)は文字の外側に付く
※ color: transparentにしても文字部分はtext-shadowの色で塗りつぶされている

text-shadowはIE10+で効くようなので、こちらを使えばほぼ全てのブラウザで表示ができそうです。text-shadow サポート状況
※ 文字の大きさに対してoffsetの値が大きすぎるとフォントの周りがギザギザになってしまうので注意が必要です。
　
text-shadowの指定方法を工夫すれば太めの縁取りもできるみたいで、次のようなジェネレーターサービスを使うと簡単かもしれません。

CSS text-stroke generator (text-shadow hack)

まとめ

text-stroke は内側にラインが入る
text-shadow は外側にラインが入る

と覚えておけば良さそうです。
IEも10以上なら表示されるし、Illustratorの線やPhothopのレイヤースタイルの境界線に近いのはtext-shadowの方かなと思いました。
また、IEではtext-strokeが表示されないので少し表示が変わってしまいますが、text-strokeとtext-shadowと合わせて指定するとこもできます。
f:id:kikiki-kiki:20170327141750p:plain
両方サポートしているブラウザなら細かな表現ができそうですが、やはり限界があるように感じます。