font-weight:文字フォントの太さを指定する
初期値 | normal |
適用対象 | 全ての要素、::first-letter および::first-line |
継承 | する |
アニメーション | フォントの太さ |
対応ブラウザ | caniuseで確認 |
font-weightプロパティの説明
font-weight
は、文字フォントの太さを指定します。画面に表示されるフォントの太さは、font-family
で指定されている文字セットの種類に依存します。
指定できる値は、あらかじめ用意されているキーワードや文字の重みの段階を表す数値です。しかし、全てのフォントファミリーが多様な文字の太さを持っているわけではないため、理想的な太さを提案する意味に留まります。
font-weightに指定できる値
- normal
- 通常のフォントの太さを表します。数値では
400
に該当します。 - bold
- 太字を表します。数値では
700
に該当します。 - lighter
- 親要素よりも一段階細いフォントであることを表します。基準となる太さに対して、thin(100)、normal(400)、bold(700)のいずれかの太さになります。
- bolder
- 親要素よりも一段階太いフォントであることを表します。基準となる太さに対して、normal(400)、bold(700)、heavy(900)のいずれかの太さになります。
- <number>
- 1から1000の数字を使って文字の太さを表します。任意の数値を使用できますが、一般的には伝統的なキーワードと関連性のある数値を採用します。フォントファミリーが指定された値に対応していない場合は、以下の規則に従って太さの代替が行われます。
400
から500
の間でフォントの太さが指定された場合、利用できる太さを指定値から順に500
へ昇順で探します。見つからなければ降順で探し、400
に至っても該当するものがなければ、500
以上で利用可能な太さを探します400
未満の値でフォントの太さが指定された場合、指定値から降順で利用可能なものを探します。一致するものがなければ、指定値よりも大きい太さを昇順で探します。500
以上の値でフォントの太さが指定された場合、指定値から昇順で利用可能なものを探します。一致するものがなければ、指定値よりも小さい太さを降順で探します。
一般的なフォントの太さと数値の対応表
<number>
で示す値は、OpenTypeの仕様書により以下の名称に対応しています。
値 | 太さ |
---|---|
100 | Thin |
200 | ExtraLight UltraLight |
300 | Light |
400 | Normal Regular |
500 | Medium |
600 | DemiBold SemiBold |
700 | Bold |
800 | ExtraBold UltraBold |
900 | Black |
950 | ExtraBlack UltraBlack |
相対的なフォントの太さを示す対応表
lighter
やbolder
を使ってフォントの太さを相対的に指定する場合、以下の内容で算出されます。
値 | lighter | bolder |
---|---|---|
100 | 100 | 400 |
200 | 100 | 400 |
300 | 100 | 400 |
400 | 100 | 700 |
500 | 100 | 700 |
600 | 400 | 900 |
700 | 400 | 900 |
800 | 700 | 900 |
900 | 700 | 900 |
font-weightの使い方とサンプル
font-weight
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
font-weight: normal;
font-weight: bold;
font-weight: lighter;
font-weight: bolder;
/* <number>値 */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
/* グローバル値 */
font-weight: inherit;
font-weight: initial;
font-weight: revert;
font-weight: unset;
font-weightの実例
それでは実際にfont-weight
プロパティの書き方を見ていきましょう。以下の例は、単純なキーワード指定による文字の太さの比較です。
表示確認
CSS
.samp_box {
overflow: auto;
width: 100%;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box p {
margin: 1rem 0 0;
padding: .3rem;
background: #fff;
}
#fw_n {
font-weight: normal;
}
#fw_b {
font-weight: bold;
}
#fw_ler {
font-weight: lighter;
}
#fw_ber {
font-weight: bolder;
}
HTML
<section class="samp_box">
<p id="fw_n">font-weight: normal;</p>
<p id="fw_b">font-weight: bold;</p>
<p id="fw_ler">font-weight: lighter;</p>
<p id="fw_ber">font-weight: bolder;</p>
</section>
続いて、数値による指定で文字の太さの比較をします。採用される太さはフォントファミリーが持つ文字セットの種類に依存します。可変フォント(Variable fonts)を使用する祭には、より細かな指定が可能です。
表示確認
font-weightに関連するCSSプロパティ
フォント・文字色 | |
---|---|
color | 文字の色を指定する |
font | フォントに関する様々な機能を一括で指定する |
font-family | 文字フォントの種類を指定する |
font-feature-settings | OpenTypeフォントの拡張書体の特性を制御する |
font-kerning | フォントの文字詰め(カーニング)を制御する |
font-language-override | 文字を表示する祭に使用する言語情報を一時的に変更する |
font-size | 文字フォントの大きさを指定する |
font-size-adjust | 現在のフォントサイズを基準に小文字の大きさを相対的に調整する |
font-stretch | 表示させるフォントの幅広や幅狭のフェイスを指定する |
font-style | フォントを筆記体や斜体で表示するかどうかを指定する |
font-synthesis | 太字や斜体に対応していないフォントの加工を制御する |
font-variant | フォントの表示形式やブラウザの合成規則を一括で指定する |
font-variant-alternates | 文字フォントの代替字体(グリフ)の選定を制御する |
font-variant-caps | 文字列に適用されるキャピタライゼーションルールを制御する |
font-variant-east-asian | 東アジアの言語で使われる字体を制御する |
font-variant-ligatures | 隣り合った文字フォントの合字(リガチャ)を制御する |
font-variant-numeric | 数値に関する文字表記を制御する |
font-variant-position | 上付き文字や下付き文字として配置されるべき字体の使用を制御する |
font-weight | 文字フォントの太さを指定する |