CSSのfont-weightで文字の太さを指定する方法をわかりやすく解説

2024.09.15
スポンサーリンク

font-weightプロパティは、テキストの太さ（ウェイト）を指定するために使用されます。通常の太さから極太まで、フォントの重みを調整することが可能です。太さを調整することで、コンテンツの強調やデザインのバランスを取るのに役立ちます。

スポンサーリンク

font-weightの値とその効果の一覧

  • normal: 標準の太さです。
  • bold: 太字を指定します。
  • 100 – 900: 数値でフォントのウェイトを指定します。通常、100が最も細く、900が最も太くなります。400が標準的な太さ（normal）で、700が太字（bold）に相当します。

注意点と関連情報

数値による指定は、フォントによって実際に対応しているウェイトが異なるため、指定した太さが全てのフォントで同じように適用されるわけではありません。特に、一部のフォントでは指定された太さが「normal」や「bold」にマッピングされることがあります。また、数値の100〜900は基本的には100単位で指定します。

font-weightプロパティが効かない時の原因と対策

font-familyがフォントウェイトのスタイルを持っていない

font-weightプロパティは、font-familyで指定されたフォントに適用されますが、指定されたフォントが太さのバリエーションを持っていない場合、プロパティが機能しません。
対策: 使用しているフォントが複数のウェイトをサポートしているか確認し、サポートされていない場合は、ウェイトのバリエーションを持つフォントに変更するか、フォールバックのフォントを指定しましょう。

共通するCSSコード

.css-sample-container {
  padding: 20px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  width: 400px;
  background-color: #f9f9f9;
  text-align: center;
  overflow-wrap: break-word;
}

.css-sample-text {
  font-family: 'Arial', sans-serif;
  font-size: 24px;
}

font-weight: normal

標準的なフォントの太さ（normal）を指定した例です。

HTMLコード

<div class="css-sample-container">
  <p class="css-sample-text css-sample-font-weight-normal">
    これは標準の太さのテキストです。
  </p>
</div>

CSSコード

.css-sample-font-weight-normal {
  font-weight: normal;
}

表示結果

これは標準の太さのテキストです。

font-weight: bold

太字（bold）を指定した例です。

HTMLコード

<div class="css-sample-container">
  <p class="css-sample-text css-sample-font-weight-bold">
    これは太字のテキストです。
  </p>
</div>

CSSコード

.css-sample-font-weight-bold {
  font-weight: bold;
}

表示結果

これは太字のテキストです。

font-weight: 400

数値で標準の太さ（400）を指定した例です。これはnormalと同じ太さです。

HTMLコード

<div class="css-sample-container">
  <p class="css-sample-text css-sample-font-weight-400">
    これは数値400の太さのテキストです。
  </p>
</div>

CSSコード

.css-sample-font-weight-400 {
  font-weight: 400;
}

表示結果

これは数値400の太さのテキストです。

font-weight: 700

数値で太字（700）を指定した例です。これはboldと同じ太さです。

HTMLコード

<div class="css-sample-container">
  <p class="css-sample-text css-sample-font-weight-700">
    これは数値700の太さのテキストです。
  </p>
</div>

CSSコード

.css-sample-font-weight-700 {
  font-weight: 700;
}

表示結果

これは数値700の太さのテキストです。

まとめ

  • font-weightプロパティは、テキストの太さを指定するために使用されます。
  • 通常の太さはnormal、太字はboldで指定できます。
  • 100〜900の数値を使用して、フォントのウェイトをより細かく制御することができます。ただし、すべてのフォントがこの範囲の太さをサポートしているわけではないので注意が必要です。
  • font-weight: 400はnormal、font-weight: 700はboldと同じです。
スポンサーリンク