2018.01.13

CSSで簡単に縁取りされたアウトライン文字を作る

CSSでおしゃれな縁取り文字を作る方法です。モダンブラウザのみからレガシーブラウザにも対応したものまで紹介します。

text-stroke


<div class="text">縁取り</div>


.text {
  color: #fff;
  text-stroke: 1px #000;
  -webkit-text-stroke: 1px #000;
}

非常に便利ですが、 IE では対応していません。また、線は文字の内側に引かれるので太くすると文字が潰れます。

text-shadow


<div class="text">縁取り</div>


.text {
  color: #fff;
  text-shadow: 1px 1px 0 #000,
               -1px 1px 0 #000,
               1px -1px 0 #000,
               -1px -1px 0 #000;
}

text-shadow を使って上下左右に 1px ずつ影を作る方法です。角に直角が多い英語フォントだと綺麗に表示されると思いますが、日本語だと角のつなぎ目が気になりますね。

SVG

CSS…ではありませんが、HTML内に記述できて、しかも IEにも対応 しているので紹介します。


<svg viewBox="0 0 200 100">
  <text x="0" y="50%">縁取り</text>
</svg>


svg {
  display: inline-block;
  width: 250px;
  height: auto;
  overflow: visible;
}
text {
  fill: #fff;
  stroke: #000;
  stroke-width: 1;
  stroke-linejoin: round;
}

SVGの fill と stroke を使えば線を引くことができます。線は文字の内側に引かれます。


<svg viewBox="0 0 200 100">
  <text class="background" x="0" y="50%">縁取り</text>
  <text class="foreground" x="0" y="50%">縁取り</text>
</svg>


svg {
  display: inline-block;
  width: 250px;
  height: auto;
  overflow: visible;
}
.foreground {
  fill: #fff;
}
.background {
  stroke: #000;
  stroke-width: 8;
  stroke-linejoin: round;
}

線を外側に引きたいときはこのように2つの text 要素を重ねれば表現できます。