1. TOP
  2. html&CSS入門
  3. CSSで文字の太さを変える「font-weight」(フォント ウェイト)の使い方

CSSで文字の太さを変える「font-weight」(フォント ウェイト)の使い方

文字の太さを変えるには、font-weightプロパティを使います。

font-weightはフォントの太さを指定するプロパティで、文字を太くしたり、細くしたり、通常の太さに戻したりすることができます。

基本的には下記のようにして使います。

font-weight:値;

値は、「bold」などのキーワードや、「100」などの数値で指定します。

太くしたい場合

font-weight:bold;

通常の太さに戻したい場合

font-weight:normal;

font-weightの使い方

文章の強調したい部分に「bold」を指定することで、文字を太くしていくような使い方をします。

値には数値で指定する方法と、キーワードで指定する方法があります。

数値で太さを変える方法

数値で指定する方法は、「100,200.300」という風に100刻みで指定していきます。

指定できるのは100〜900で、数値が大きくなるほど太くなります。150や330などの半端な数値は無効になります。

font-weight:100;
font-weight:200;
font-weight:300;
font-weight:400;
font-weight:500;
font-weight:600;
font-weight:700;
font-weight:800;
font-weight:900;

400が通常の太さで、700で「bold」を指定しているのと同じ太さになります。

数値で指定する場合の注意点

数値を使えば9段階で指定できるのですが、ほとんどのフォントで9つの太さが準備されてません。2〜3種類くらいしか用意されていないものが多いです。

指定した数値に当てはまるの太さが用意されていない場合、近い太さのものが適用されることになります。

あまり細かく指定しても太さが変わらないので、数値で指定することは少ないです。

キーワードで太さを変える方法

キーワードで太さを変える方法は、例で紹介した「bold」の他にもいくつか種類があります。

bold

font-weight:bold;

太字を指定します。数値で700を指定した場合と同じ太さになります。

normal

font-weight:normal;

標準的な太さを指定します。数値で400を指定したときと同じ太さになります。

デフォルトの太さであり、何の指定していない場合はこの太さになっています。

bolder

font-weight:bolder;

親要素より一段階太くします。例えば親要素が200だった場合、300になります。

lighter

font-weight:lighter;

親要素より一段階細くします。例えば親要素が400だった場合、300になります。

キーワードで指定する場合の注意点

ほとんどの日本語フォントでは、細字が用意されていません。ですので、lithterを指定しても見た目は変わらないことがほとんどです。

よく使うのは「bold」と「normal」で、他のキーワードは使うことが滅多にないのでそんなものもあったなというくらいの認識くらいで問題ありません。

font-weightが効かない場合

フォントによって用意されている太さが違います。太字が用意されていなかったり、細字がなかったりします。

font-weightが効かないと思ったら、使っているフォントに太字や細字が用意されていないと考えた方が良いでしょう。

まとめ

  • 文字の太さを変えるには、font-weightプロパティを使う
  • 値には数値で指定する方法と、キーワードで指定する方法がある
  • フォントによって用意されている太さが違う
  • よく使うのは「bold」と「normal」