CSS | font-weight | 文字の太さ

font-weightプロパティを使って、文字の太さを指定できます。

Emmet
`fw`	`font-weight: normal;`

.sampleクラスを持つ<div>要素を準備します。

HTML


<div class="sample">
    sample
</div>

CSS


div {
    font-size: 2rem; /* 文字の大きさ */
}

実行結果初期状態

sample

font-weight: boldを指定すると太字になります。

HTML


<div class="sample">
    sample
</div>

CSS


div {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    font-weight: bold;
}

実行結果bold

sample

デフォルト値はnormalです。

HTML


<div class="sample">
    sample
</div>

CSS


div {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    font-weight: normal;
}

実行結果normal

sample

数値で指定

100から900までの数値で指定することもできます。

HTML


<div class="sample">
    sample
</div>

CSS


div {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    font-weight: 100;
}

実行結果100 一番細い

sample

HTML


<div class="sample">
    sample
</div>

CSS


div {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    font-weight: 900;
}

実行結果900 一番太い

sample

一般的にnormalは400の太さ、boldは700の太さになります。ただし、フォントファミリー(font-family)が用意しているフォントの太さの種類に依(よ)ります。通常、2種類くらいの太さしか無いので、細かく設定しても変わりません。

font-weight: lighterを指定すると(親要素の文字の太さに対して)相対的に細字になります。

HTML


<div class="sample">
    sample
</div>

CSS


div {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    font-weight: lighter;
}

実行結果lighter

sample

font-weight: bolderを指定すると(親要素の文字の太さに対して)相対的に太字になります。

HTML


<div class="sample">
    sample
</div>

CSS


div {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    font-weight: bolder;
}

実行結果bolder

sample