IllustratorやPhotoshopを使わずにCSSだけで文字を縁取る方法

IllustratorやPhotoshopで文字を切り抜いて縁取ることができますが、実は文字を縁取ることはCSSだけでも一応できます。

今回はCSSだけで文字を縁取る方法を紹介します。

 

text-stroke

CSSのtext-strokeプロパティを使って文字を縁取る方法です。

書き方は以下の通り。

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

 

縁の太さ、縁の色を指定できます。

もちろん個別にも指定できます。その場合は以下の書き方になります。

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

 

注意点として、IEではサポートされていないことと、他のブラウザでもベンダーインプレックスが必要ということです。

IEではtext-strokeは使えないので注意してください。

また、text-strokeは文字の内側を縁取ります。

文字色を透明(color: transparemt)を指定すると背景色と同じ色になるので、より縁取られている感が出ますね。

 

text-shadowを使う方法

text-strokeを使わずに、text-shadowを使って縁取る方法もあります。

書き方は以下の通り。

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

 

指定の順番は2通りあります。

  • 右方向、下方向、ぼかし、色の順
  • 色、右方向、下方向、ぼかしの順

どちらか好きな方で指定しましょう。

 

そしてtext-shadowはカンマで区切ると複数指定できるので、上下左右に指定して文字を縁取ることができます。

text-shadow: 2px 2px 0 #000,
             -2px 2px 0 #000,
             2px -2px 0 #000,
             -2px -2px 0 #000;

 

こちらの注意点としては、test-strokeとは違いtext-shadowは文字の外側に付きます。

また、color: transparentを指定しても縁の色はtext-shadowによって決められるので効果はありません。

text-shadowはIE10以降から使用できるので、IEにも対応させたいならtext-shadowを使うのがいいと思います。

ただし、あまりに太く淵取ろうとすると文字がガタガタするので程々にするようにしましょう。

 

まとめ

CSSだけで文字を縁取る方法を紹介しました。

text-strokeは文字の内側と縁取り、text-shadowは文字の外側を縁取ります。

IEに対応させたいならtext-shadow一択ですね。

 

もちろんIllustratorやPhotoshopを使った文字の縁取りの方が定番だと思うので、できるならそれらを使った方がいいと思います。

もしくは文字をSVG形式にして貼り付けるのも選択肢に一つですね。

文字を縁取る方法はいくつかあるので、自分で一番いいと思った方法でやりましょう。