HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

フォント ウェイト

font-weightプロパティ

フォントの太さを指定するプロパティです。

  • 初期値

    normal

  • 継承

    継承あり

  • 適用できる要素

    全要素

次のような値を設定することができます。

  • normal – 初期値です。数値「400」を指定した場合に該当します。
  • bold – 太字。数値「700」と同じ太さです。
  • bolder – 太字。引き継いだ太さよりも、1段階太く表示します。
  • lighter – 細字。引き継いだ太さよりも、1段階細く表示します。
  • 数値 – 100(Thin)、200(Extra Light)、300(Light)、400(Normal)、500(Medium)、600(Semi Bold)、700(Bold)、800(Extra Bold)、900(Black)。

数値で細かく太さを指定することも可能ですが、フォントが太さの指定に対応している必要があります。
対応していない値が指定された場合は、近い値の太さで表示されます。


パターン1

数値以外の値設定例です。

CSSコード例

.sample_css1 .text1 {
	font-weight: lighter;
}
.sample_css1 .text2 {
	font-weight: normal;
}
.sample_css1 .text3 {
	font-weight: bold;
}
.sample_css1 .text4 {
	font-weight: bolder;
}

表示例:

lighterを指定 – Cascading Style Sheet

normalを指定 – Cascading Style Sheet

boldを指定 – Cascading Style Sheet

bolderを指定 – Cascading Style Sheet


パターン2

太さを数値で指定した例です。

CSSコード例

.sample_css2 .text1 {
	font-weight: 100;
}
.sample_css2 .text2 {
	font-weight: 200;
}
.sample_css2 .text3 {
	font-weight: 300;
}
.sample_css2 .text4 {
	font-weight: 400;
}
.sample_css2 .text5 {
	font-weight: 500;
}
.sample_css2 .text6 {
	font-weight: 600;
}
.sample_css2 .text7 {
	font-weight: 700;
}
.sample_css2 .text8 {
	font-weight: 800;
}
.sample_css2 .text9 {
	font-weight: 900;
}

表示例:

100を指定 – Cascading Style Sheet

200を指定 – Cascading Style Sheet

300を指定 – Cascading Style Sheet

400(normal)を指定 – Cascading Style Sheet

500を指定 – Cascading Style Sheet

600を指定 – Cascading Style Sheet

700(bold)を指定 – Cascading Style Sheet

800を指定 – Cascading Style Sheet

900を指定 – Cascading Style Sheet

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。