【CSS】font-weightで文字の太さを変える方法：効かないときは？

CSSのfont-weightの使い方

CSSで文字の太さはfont-weightというプロパティを使うことで、簡単に変えることができます。指定方法にはいくつかのパターンがありますが、まずはbold、lighter、normalの3つから確認します。覚えておくべき指定には星マークをつけておきます。参考にしてください。

1. 太字にする

{font-weight: bold;}

<p>これは例文です</p>
<p>This is Example.</p>

p {
  font-weight: bold;
}

指定したいタグやclass名、id名をセレクタに指定してfont-weight: bold;と書けば文字を太字にすることができます。この例ではpタグ内の文字の太さを変えています。「セレクタって何？」「class名って何？」という方は『初心者向けCSS入門：基本的な書き方』にざっと目を通してみると良いでしょう。

2. 細字にする

{font-weight: lighter;}

<p>これは例文です</p>
<p>This is Example.</p>

p {
  font-weight: lighter;
}

font-weight: lighter;は、親要素から継承した太さを基準に、相対的に細い太さを選びます。見本の親要素は400なので、この例では100になります。

文字が細字にならない？

指定された太さのフォントが用意されていない場合、利用できる別の太さが選ばれるため、見た目が変わらないことがあります。日本語フォントにも複数の太さや可変フォントがあります。見本の英字にはRaleway可変フォントを読み込んでいますが、日本語は端末のフォントで表示されます。

3. 通常の太さにする

{font-weight: normal;}

<p>これは例文です</p>
<p>This is Example.</p>

p {
  font-weight: normal;
}

font-weight: normal;は文字を通常の太さにするものです。normalは数値の400に相当し、font-weightの初期値です。ただし、このプロパティは親要素から継承され、ブラウザや別のCSSの指定も適用されます。もし文字が太くなっていたり、細くなっていたりして、通常の太さに戻したいときにfont-weight: normal;を指定しましょう。

4. 太さの詳細設定

ここからは文字の太さをより細かく指定する方法を解説します。利用できる太さは、言語ではなくフォントと読み込んだフォントファイルによって異なります。複数の太さのファイルを持つフォントや、範囲内の太さを連続的に変えられる可変フォントがあります。

親要素より相対的に太くする

{font-weight: bolder;}

bolderは親要素から継承した太さを基準に、相対的に太い太さを選びます。boldとnormalの中間という意味ではありません。見本の親要素は400なので、この例では700になります。

<p>This is Example.</p>

p {
  font-weight: bolder;
}

太さを数値で指定する

文字の太さは1〜1000の数値で指定でき、小数も使えます。上は代表的な100刻みの9段階です。normalは400、boldは700に相当します。実際に描ける太さはフォントが対応する範囲と読み込んだファイルによります。このRaleway見本は100〜900に対応しています。

このように文字の太さ指定には様々な方法があります。とはいえ、Webサイトをつくるうえでは、bold、lighter、normalの役割に加えて、数値指定と親要素からの継承も確認しましょう。

5. font-weightが効かないのは何で？

ここまで説明してきた通り、そもそも指定しているフォントに細字が用意されてなかったり、太さ具合が1段階しか用意されていなかったりするために「font-weightが効いてない？」と思ってしまうかもしれません。