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

こんにちは、hgmです。

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

縁取り文字とは

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

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

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

作成方法

縁取り文字は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;
}

デモ

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

簡単に縁取り文字を作成してくれるツールサイト

ここまでCSS、SVGで縁取り文字を作る方法をお伝えしましたが、結構手間が掛かります‥CSSはまだしもSVGはなんのこっちゃ！という感じです。

なんと下記サイトで簡単にどちらも作成できます！
とても便利で簡単、時間もかからないのでとてもおすすめです。

CSSで縁取り文字を作成

webparts.cman.jp

 

6 Users

7 Pockets

https://webparts.cman.jp/string/outline/

https://webparts.cman.jp/string/outline/

CSVで縁取り文字を作成

webparts.cman.jp

 

5 Pockets

https://webparts.cman.jp/string/svg_outline/

https://webparts.cman.jp/string/svg_outline/