[CSS]フォントの太さをさらに太くする

文字の太さは、CSSのfont-weightプロパティで変更することができます。
タイトルなどには、太字を使った方が強調されて、また、本文とのメリハリもつくので、全体的に整って見えます。

本記事では、font-weightプロパティ以外に、さらに文字を太くしてみたいと思います。
これは軽く思いついたネタなだけなので簡単に行きたいと思います。

方法

今回はtext-strokeプロパティを使います。text-strokeプロパティは文字の縁取りをするもので調べるとかなり縁取りの仕方などがサイトに載っています。

// HTML
<div class="container">
    <span class="text">Hello World.</span>
</div>

// CSS
.container {
  width:  100%;
  height:  100%;
  display:  flex;
  justify-content:  center;
  align-items: center;
}
.text {
  font-size:  2rem;
  font-family: Arial;
  font-weight: bold;
  color: black;
  -webkit-text-stroke: 2px black;
}

今回は文字と縁取りをあえて同じ色にすることによって文字を少し太くしています。あんまり変わらないかもしれないですし、すごく役に立つネタでもなんでもないですが、使い方として面白いかと思いました。以上です。

補足

こんなことだってできます。文字をただ縁取る以外の使い方も面白いですね。