font-weight
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
font-weight
は CSS のプロパティで、フォントの太さ(あるいは重み)を指定します。実際に表示されるフォントの太さは、現在設定されている font-family
に依存する場合があります。
試してみましょう
構文
/* <font-weight-absolute> キーワード値 */
font-weight: normal;
font-weight: bold;
/* <font-weight-absolute> 数値のキーワード値 [1,1000] */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; /* normal */
font-weight: 500;
font-weight: 600;
font-weight: 700; /* bold */
font-weight: 800;
font-weight: 900;
/* 親要素に対して相対的なキーワード値 */
font-weight: lighter;
font-weight: bolder;
/* グローバル値 */
font-weight: inherit;
font-weight: initial;
font-weight: revert;
font-weight: revert-layer;
font-weight: unset;
font-weight
プロパティは、<font-weight-absolute>
値または以下の一覧にある相対的な太さの値で指定します。
値
normal
-
通常のフォントの太さです。
400
と同じです。 bold
-
太字のフォントの太さです。
700
と同じです。 <number>
-
1 以上 1000 以下の
<number>
値です。数値が大きいと、数値が小さいものより太さが太い(または等しい)ことを表します。これにより、可変フォントをきめ細かく制御することができます。可変フォントではない場合、指定した通りの太さが利用できない場合は、太さの代替アルゴリズムが使用されます。100 で割り切れる数値は、下記の一般的な太さ名との対応の節で説明されている一般的な太さ名に対応しています。 lighter
-
フォントの太さが親要素よりも相対的に 1 つ細くなります。相対的な太さの計算に考慮されるフォントの太さは 4 つのみであることに注意してください。下記の相対的な太さの意味を参照してください。
bolder
-
フォントの太さが親要素よりも相対的に1つ太くなります。相対的な太さの計算に考慮されるフォントの太さは 4 つのみであることに注意してください。下記の相対的な太さの意味を参照してください。
太さの代替
正確に一致する太さが利用できない場合、実際に表示される太さを定めるために以下の規則が使用されます。
-
対象となる太さがが
400
~500
で指定された場合- 利用できる太さを、対象値から
500
までの間で昇順で探します。 - 一致するものがなければ、対象値未満の利用できる太さを降順で探します。
- 一致するものがなければ、
500
より大きい太さを昇順で探します。
- 利用できる太さを、対象値から
-
太さが
400
未満で指定された場合、対象値以下の太さを降順で探します。一致するものがなければ、対象値より大きい太さを昇順で探します。 -
太さが
500
より大きく指定された場合、対象値以上の太さを昇順で探します。一致するものがなければ、対象値より小さい太さを降順で探します。
メモ: 代替のウェイトアルゴリズムはレンダリングだけに使用されます。プロパティの計算値は指定値のままです。
相対的な太さの意味
以下の表は、 lighter
または bolder
を指定する場合に要素の絶対的な太さを算出する方法を示しています。
なお、相対的な太さを使用した場合、 thin (100), normal (400), bold (700), heavy (900) の 4 つの太さのみが考慮されます。フォントファミリーでもっと多くの太さが利用できる場合であっても、相対的な太さの計算の用途では無視されます。
継承値 | bolder |
lighter |
---|---|---|
100 | 400 | 100 |
200 | 400 | 100 |
300 | 400 | 100 |
400 | 700 | 100 |
500 | 700 | 100 |
600 | 900 | 400 |
700 | 900 | 400 |
800 | 900 | 700 |
900 | 900 | 700 |
一般的な太さ名との対応
100
から 900
の数値は、おおよそ以下の太さ名に対応します (OpenType 仕様書を参照してください)。
値 | 太さ名 |
---|---|
100 | Thin (Hairline) |
200 | Extra Light (Ultra Light) |
300 | Light |
400 | Normal (Regular) |
500 | Medium |
600 | Semi Bold (Demi Bold) |
700 | Bold |
800 | Extra Bold (Ultra Bold) |
900 | Black (Heavy) |
950 | Extra Black (Ultra Black) |
可変フォント
ほとんどのフォントは、一般的な太さ名との対応のいずれかの数値に対応する特定の太さを持っています。しかし、可変フォントと呼ばれる一部のフォントは、より細かい粒度でさまざまな太さの範囲に対応でき、デザイナーは選択した太さをより詳細に制御できます。
TrueType や OpenType の可変フォントでは、 "wght" バリエーションが様々な幅を実装するために使用されます。
このデモでは、font-weight: 500;
を設定して読み込みます。 .sample
セレクター内にある font-weight
プロパティの値を変更すると、テキストの太さが変わります(200、700、など)。下記のコードブロック内の "Play" をクリックするとこの例を MDN Playground で編集できます。
<p class="sample">
...it would not be wonderful to meet a Megalosaurus, forty feet long or so,
waddling like an elephantine lizard up Holborn Hill.
</p>
@font-face {
src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/MutatorSans.ttf");
font-family: "MutatorSans";
font-style: normal;
font-weight: 1 1000;
}
.sample {
text-transform: uppercase;
font-weight: 500;
font:
1.5rem "MutatorSans",
sans-serif;
}
アクセシビリティ
弱視の人は、 font-weight
の値が 100
(Thin/Hairline) または 200
(Extra Light) の場合、特にフォントのコントラスト比が低い場合は、テキストを読むのが難しくなることがあります。
公式定義
初期値 | normal |
---|---|
適用対象 | すべての要素とテキスト。 ::first-letter および::first-line にも適用されます。 |
継承 | あり |
計算値 | 指定された通りのキーワードまたは数値であり、 bolder および lighter は実数に変換される |
アニメーションの種類 | フォントの太さ |
形式定義
font-weight =
<font-weight-absolute> |
bolder |
lighter
<font-weight-absolute> =
normal |
bold |
<number [1,1000]>
例
フォントの太さの設定
HTML
<p>
Alice was beginning to get very tired of sitting by her sister on the bank,
and of having nothing to do: once or twice she had peeped into the book her
sister was reading, but it had no pictures or conversations in it, "and what
is the use of a book," thought Alice "without pictures or conversations?"
</p>
<div>
I'm heavy<br />
<span>I'm lighter</span>
</div>
CSS
/* 段落のテキストを太字にします */
p {
font-weight: bold;
}
/* div 要素のテキストの太さを normal より 2 段階太くしますが、
標準的な bold より細くします */
div {
font-weight: 600;
}
/* span 要素のテキストの太さを親要素より
1 段階細くします */
span {
font-weight: lighter;
}
結果
仕様書
Specification |
---|
CSS Fonts Module Level 4 # font-weight-prop |
ブラウザーの互換性
BCD tables only load in the browser