【HTML+CSS】CSSでテキストを縁取りする（文字にボーターをつける）方法２選

CSSでテキストを縁取りする（文字にボーターをつける）方法２選

今回実装したいデザインは上記のようなテキストを縁取ってボーダーをつけたようなデザイン。

text-stroke を使う方法

サンプル画像のCSSは下記のような感じ。

  .bigTitle {
    font-family: g.$futural;
    font-size: 150px;
    font-weight: 500;
    color: #fff;
    -webkit-text-stroke: 2px #e0e2e3;
  }

font-familyやfont-sizeを通常通りにあてて

-webkit-text-stroke: 線の太さ 線の色;

を追記するだけで実装できます。

また、テキストの縁取りだけテキストを透けさせたいときは

color: transparent；

を追記。

text-shadow を使う方法

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

上下左右にtext-shadowを付けることでテキストの縁取りを実装できます。

text-shadow: 2px 2px 1px #e0e2e3,
             -2px 2px 1px #e0e2e3,
             2px -2px 1px #e0e2e3,
             -2px -2px 1px #e0e2e3;

実装してみてちょとデザインと誤差があるときは、blurを調整してみるといいかもしれない。