CSSで文字の縁取り

この文字にちょっとだけアクセントが欲しい。そんな時に「CSSで縁取り」はいかがでしょう？

袋文字【ふくろもじ＝文字の外枠線（アウトライン）をつけた白抜きの文字】も、簡単なものなら画像加工ソフトを使わずCSSだけで設定することができます。

方法は2種類。ただし、綺麗に見せるにはちょっと制限があります。

text-stroke で縁取り文字

境界線を中心に内/外に縁がつきます。例えば4pxの輪郭線は、内側2px+外側2pxになるので、画数の多い文字・幅の細い文字・小さい文字などに太い縁取りは不向きです。

Blue 180
檸檬

#fuchidori{
  color: #fff;　/*文字の色*/
  text-stroke: 1px #9400d3;　/*縁取りの幅と色*/
  -webkit-text-stroke: 1px #9400d3;
}

Blue 180
檸檬

このフォントの場合は、文字の大きさに対し2px辺りが綺麗に見える限度。3px以上にすると文字内側の細い部分がつぶれてきます。

text-shadow で縁取り文字

文字の外側に、ぼかしのない影を8方向（上下左右と斜め方向）に設定することで縁取りに見せていますが、綺麗に見えるのは1pxまでです。

text-stroke と違い外側に輪郭があるので、白抜き文字の幅がちょっとだけ太くなっています。

Blue 180
檸檬

#fuchidori{
  color: #fff;
  text-shadow:
    1px 1px 0 #9400d3, -1px -1px 0 #9400d3,
   -1px 1px 0 #9400d3, 1px -1px 0 #9400d3,
    0px 1px 0 #9400d3,  0-1px 0 #9400d3,
   -1px 0 0 #9400d3, 1px 0 0 #9400d3;
}

text-shadow で1px以上に設定するとどうなるのか？

Blue 180
檸檬

サンプル下は3pxで指定しましたが、角の部分（今回だと『l・u・e』などの細い始点・終点の部分や、漢字の斜めになる『はらい』の部分など）が綺麗につながっておらず、縁取りとしては違和感が出ます。

下のようにぼかし（4pxで設定）を入れれば少しごまかせます。

Blue 180
檸檬

#fuchidori{
  color: #fff;
  text-shadow:
    3px 3px 4px #9400d3, -3px -3px 4px #9400d3,
   -3px 3px 4px #9400d3, 3px -3px 4px #9400d3,
    0px 3px 4px #9400d3,  0 -3px 4px #9400d3,
   -3px 0 4px #9400d3, 3px 0 4px #9400d3;
}

ぼかしをかける場合はシンプルにtext-shadowで光彩（グロー）で表現しても良いような気もしますが、色の1番濃い部分は文字の真下に隠れちゃうので色が薄くなりますね。

下のように重ね掛け（3回同じ影を重ねています）や色のチョイスで濃さを調整することもできますので、お好みで使い分けてください。

Blue 180
檸檬

Blue 180
檸檬

#glow{
  color: #fff;
  text-shadow: 0px 0px 7px #9400d3,0px 0px 7px #9400d3,0px 0px 7px #9400d3;
  /* 同じ影を3回重ね掛け */
}

ちなみに、8方向も設定するなんてめんどくさい。4方向（上下左右）でどうにかならないの？という方へ。実際にやってみるとこうなりました。

Blue 180
檸檬

Blue 180
檸檬

1pxなら上下左右でもあまり問題なさそうですね。線の幅が細いので粗が目立ちません。3pxは8方向指定でも綺麗ではなかったので、まぁこんなものでしょう。

CSSだけで縁取りできるので楽なのですが「見た目を綺麗に」を第一とすると、どちらもちょっと制限がでてきてしまいます。

文字の装飾として組み合わせて使う

文字の装飾として、text-strokeとtext-shadowを組み合わせて使うこともできます。

Blue 180

#fuchi-kage{
  color: #dbedff;
  text-stroke: 2px #9400d3;
   -webkit-text-stroke: 2px #9400d3;
  text-shadow: 3px 3px 0px #de82a7;
}

いろいろ遊べそうですね。

最後に

縁取りの幅を太くしたい場合は画像加工ソフトが1番綺麗にできますが、細い縁取りならCSSでもできました。過度な装飾は文字が読みづらくなりますが、デザインのアクセントに使えそうです。