font-weightプロパティ

値

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

• 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;
}

表示例：

パターン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;
}

表示例：

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

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