便利帳

自分用備忘録。誰かの役に立てたら幸いです。

CSS:文字にを縁取る

CSSでテキストを縁取りたいことがあったので
まとめておきます。

text-strokeを用いて縁取る

こちらの方法では文字の内側に縁取りがつきます。

.text {
    -webkit-text-stroke: 2px #000;
}

※現状では〔-webkit-〕をつける必要があるとのこと

text-shadow を用いて縁取る

こちらの方法では文字の外側に縁取りがつきます。
IE10も対応しているので、ほぼ全てのブラウザで使えるのではないかとのこと。


まず〔text-shadow〕の基本的な書き方ですが、

text-shadow: 1px 1px 0 #000;

あるいは

text-shadow: #000 1px 1px 0;

数字は、前から
・X方向(横方向へのずれ)
・Y方向(下方向へのずれ)
・ぼかし具合
を指定します。

カンマ「,」区切りで複数指定ができますので
これを利用して、下記の通り記載します。

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;


ただし、こちらの方法は文字の大きさに対してoffsetの値が大きすぎると
フォントの周りがギザギザになったり、
うまく縁取りができなかったりしますのでご注意ください。