font-weight

この記事は翻訳が完了していません。 この記事の翻訳にご協力ください

font-weight CSS 記述子は、 @font-face ルールで指定された文字の重み(太さ、細さ)を指します。 font-weight プロパティは指定箇所の文字の太さや細さを個別に設定するために指定します。

同じフォントファミリー内で異なったスタイルに適応しているフォントフェイスを指定することができます。その場合も font-weight 記述子を指定し明示的に文字の重みを指定します。

関連する @規則@font-face
初期値normal
計算値指定値

一部のフォントファミリーには限られた重みしか利用できない場合があります。もし指定した重みを利用できない場合、近似値の重みが自動で指定されます。太字についてはユーザーエージェント側で重みを装飾される場合がよくあります。これを防ぐには、 font-synthesis プロパティを使用します。

構文

/* Single values */
font-weight: normal;
font-weight: bold;
font-weight: 400;

/* Multiple Values */
font-weight: normal bold; 
font-weight: 300 500;

The font-weight property is described using any one of the values listed below.

normal
Normal font weight. Same as 400.
bold
Bold font weight. Same as 700.
<number>
A <number> value between 1 and 1000, inclusive. Higher numbers represent weights that are bolder than (or as bold as) lower numbers. Certain commonly used values correspond to common weight names, as described in the Common weight name mapping section below.

In earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g. 451) will be translated to one of these values for non-variable fonts.

CSS Fonts Level 4 extends the syntax to accept any number between 1 and 1000, inclusive, and introduces Variable fonts, which can make use of this much finer-grained range of font weights.

Common weight name mapping

The numerical values 100 to 900 roughly correspond to the following common weight names:

Common weight name
100 Thin (Hairline)
200 Extra Light (Ultra Light)
300 Light
400 Normal
500 Medium
600 Semi Bold (Demi Bold)
700 Bold
800 Extra Bold (Ultra Bold)
900 Black (Heavy)

Variable fonts

Most fonts have a particular weight which corresponds to one of the numbers in Common weight name mapping. However some fonts, called variable fonts, can support a range of weights with more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.

For TrueType or OpenType variable fonts, the "wght" variation is used to implement varying weights.

For the example below to work, you'll need a browser that supports the CSS Fonts Level 4 syntax in which font-weight can be any number between 1 and 1000.

形式的構文

<font-weight-absolute>{1,2}

where
<font-weight-absolute> = normal | bold | <number <a href="/ja/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[1,1000]>

The following find a local Open Sans font or import it, and allow using the font for normal font weights.

@font-face {
  font-family: "Open Sans";
  src: local("Open Sans") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-weight: 400;
}

アクセシビリティへの配慮

People experiencing low vision conditions may have difficulty reading text set with a font-weight value of 100 (Thin/Hairline) or 200 (Extra Light), especially if the font has a low contrast color ratio.

仕様

仕様書 策定状況 コメント
CSS Fonts Module Level 4
font-weight の定義
草案
CSS Fonts Module Level 3
font-weight の定義
勧告候補

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
font-weightChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 4Opera 完全対応 10Safari 完全対応 3.1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 2Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

See Also