CSSで文字ふち

作成日:2017-12-11, 更新日:2017-12-12

欲しいヤツ

下記みたいな文字ふち付き。袋文字って言うんだっけ？。

太目の文字ふち。

丸ごとしまうま
zebra
12345

<div style="text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000;color:#fff;font-size:2rem;font-weight:bold">
丸ごとしまうま
zebra
12345
</div>

細目の文字ふち。

丸ごとしまうま
zebra
12345

<div style="text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;color:#fff;font-size:2rem;font-weight:bold">
丸ごとしまうま
zebra
12345
</div>

太目の文字ふちで、上下左右にもtext-shadowを指定。見た感じもっと指定を増やすと滑らかな文字ふちになりそう。

丸ごとしまうま
zebra
12345

<div style="text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000;color:#fff;font-size:2rem;font-weight:bold">
丸ごとしまうま
zebra
12345
</div>

CSS

文字サイズ等で微妙な感じになるので、色々試す必要あり。

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

（上の順番と違うかもしれないけど）右上、右下、左上、左下の4か所に影をつけて文字ふちを再現する感じ。

Sass

@mixin fontBorder($offset, $radius, $color) {
  text-shadow:  #{$offset}  #{$offset} #{$radius} #{$color},
               -#{$offset}  #{$offset} #{$radius} #{$color},
                #{$offset} -#{$offset} #{$radius} #{$color},
               -#{$offset} -#{$offset} #{$radius} #{$color};
}

〇〇〇 {
  @include fontBorder(2px, 0, #ff0000);
}