【初心者でもわかる】太文字をさらに太く表示するCSSの裏技

どうも7noteです。太字を更に太く見せる技。

「太字効果の、font-weight: bold;よりももっと太く見せたい。」

そんなときに使える、ちょっとした裏技を紹介します。

文字に縁取りをつけて太く見せる方法（あまり綺麗でない）

style.css

.big {
  text-shadow:  /* 縁取り1pxを同じ色でつける */
    1px 0 0 black,
    0 1px 0 black,
    -1px 0 0 black,
    0 -1px 0 black;
}

結果

上側がただの50pxの太文字です。これに同じ色の1px分の縁取り（輪郭）をつけたものが下になります。
太くはなるのですが、この方法では輪郭と輪郭のつなぎ目がカクカクしてしまうのと、もともとの文字サイズがそれなりの大きさがないと使いにくいという難点があります。

text-strokeを使えばつなぎ目も綺麗に！（※IE非対応）

style.css

.big {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
}

結果

いかがでしょうか？50pxの文字に2pxの黒縁をいれたものになります。
縁の部分だけ見るとこのように角の部分も綺麗に色がついているのがわかります。

縁だけ色を変えて見てみるとこんな感じ。

まとめ

太文字を更に太く見せたい時はtext-strokeを使うのが良いでしょう。
ただし、IEには非対応なので注意が必要なのと、見本の画像でも「超」の文字のように太くしすぎると線と線がくっついてしまうので、ほどほどの大きさに調整する必要があると思います。
font-weight: bold;だけでは物足りなくなったときに役立ててください。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ