이 문서는 아직 자원 봉사자들이 한국어로 번역하지 않았습니다. 참여해서 번역을 마치도록 도와 주세요!
English (US)의 문서도 읽어보세요.

The font-weight CSS descriptor allows authors to specify font weights for the fonts specified in the @font-face rule. The font-weight property can separately be used to set how thick or thin characters in text should be displayed.

For a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the font-weight descriptor to explicitly specify the font face's weights. The values for the CSS descriptor is same as that of its corresponding font property.

Related at-rule@font-face
Initial valuenormal
Mediaall
Computed valueas specified
Canonical orderthe unique non-ambiguous order defined by the formal grammar

There are generally limited weights available for a particular font family. When a specified weight doesn't exist, a nearby weight is used. Fonts lacking bold are often synthesized by the user agent. To prevent this, use font-synthesis property.

Syntax

/* 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.

Values

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:

Value 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.

Formal syntax

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

where
<font-weight-absolute> = normal | bold | <number>

Examples

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

Accessibility concerns

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.

Specifications

Specification Status Comment
CSS Fonts Module Level 4
The definition of 'font-weight' in that specification.
Working Draft
CSS Fonts Module Level 3
The definition of 'font-weight' in that specification.
Candidate Recommendation

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
font-weightChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 4Opera Full support 10Safari Full support 3.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 2Samsung Internet Android Full support Yes

Legend

Full support  
Full support

See Also

문서 태그 및 공헌자

이 페이지의 공헌자: chrisdavidmills, SphinxKnight, shan-shaji, estelle, pereiraryan
최종 변경자: chrisdavidmills,