CSS、SVGで縁取り文字を作る方法

CSS

CSS、SVGで縁取り文字を作る方法

2021年10月18日 8:00　

CSS、SVGで縁取り文字を作る方法

こんにちは、hgmです。

今回はCSSで縁取り文字を作成する方法をご紹介いたします。

縁取り文字とは
作成方法
文字の縁が太い場合
簡単に縁取り文字を作成してくれるツールサイト
- CSSで縁取り文字を作成
- CSVで縁取り文字を作成

縁取り文字とは

縁取り文字とは、そのままの意味ですが文字の周りに縁（線）がついている文字になります。

縁があることで通常の文字よりもインパクトを持たせることができます。

また画像の上に文字を載せる場合などに使用すると、視認性が高くなります。

作成方法

縁取り文字はCSSプロパティのtext-shadowを使って作成できます。

指定は下記のようにすることできれいな縁取りを作ることができます。

HTML

<h2 class="title">縁取り文字を作成してみよう！</h2>

CSS

.title{
  text-shadow: 
    2px  2px 1px #003366,
    -2px  2px 1px #003366,
    2px -2px 1px #003366,
    -2px -2px 1px #003366,
    2px  0px 1px #003366,
    0px  2px 1px #003366,
    -2px  0px 1px #003366,
    0px -2px 1px #003366;
  color: #ffffff;
  text-align: center;
}

デモ

See the Pen
Untitled by Sara Higuma (@higuma)
on CodePen.0

文字の縁が太い場合

縁が1~2pxであれば先ほどの方法で問題なくきれいに表示できますが、3px以上の太い縁の場合下記のように縁の角が粗く出てしまいます。

See the Pen
Untitled by Sara Higuma (@higuma)
on CodePen.0

このような場合は、SVGを使うときれいな縁取り文字を表示させることができます。

HTML

<div class="svgSample1">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <defs>
      <text dy="0.4em" id="outTextx">SVGで縁取りをしてみよう！</text>
    </defs>
    <use x="50%" y="50%" xlink:href="#outTextx"></use>
    <use x="50%" y="50%" xlink:href="#outTextx"></use>
  </svg>
</div>

CSS

.svgSample1 text {
  font-weight       : bold;
  font-size         : 32px;
  font-family       : Meiryo UI;
  stroke            : #003366;
  fill              : #ffffff;
  letter-spacing    : 5px;
  text-anchor       : middle;
  dominant-baseline : alphabetic;
}
.svgSample1 > svg > use:nth-of-type(1) {
  stroke-width      : 10px;
  paint-order       : stroke;
  stroke-linejoin   : round ;
}
.svgSample1 > svg > use:nth-of-type(2) {
  stroke-width      : 0;
}