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)의 가중치(weight)나 굵기(boldness)를 명시한다. 몇몇 폰트들은 normal 나 bold 일 때만 가능하다.

초기값normal
적용대상all elements and text. It also applies to ::first-letter and ::first-line.
상속yes
계산 값the keyword or the numerical value as specified, with bolder and lighter transformed to the real value
Animation typea font weight

구문

css
font-weight: normal;
font-weight: bold;

/* Relative to the parent */
font-weight: lighter;
font-weight: bolder;

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;

/* Global values */
font-weight: inherit;
font-weight: initial;
font-weight: unset;

값

normal

보통 폰트 가중치. 400 과 같음.

bold

굵은 폰트 가중치. 700 과 같음.

lighter

(가능한 폰트 가중치 중) 부모 요소(element) 보다 얇은 폰트 가중치.

bolder

(가능한 폰트 가중치 중) 부모 요소 보다 굵은 폰트 가중치.

100, 200, 300, 400, 500, 600, 700, 800, 900

normal 과 bold 이외를 제공하는 폰트를 위한 숫자형 폰트 가중치.

대비책(Fallback)

만약 정확히 주어진 가중치를 사용할 수없다면, 실제로 렌더링 되는 가중치를 결정하기 위해 다음과 같은 경험적 접근이 적용된다:

  • 만약 500 초과의 가중치가 주어지면, 가능한 굵은(darker) 가중치 중 가장 가까운 것이 사용된다 (만약 없다면, 얇은(lighter) 가중치 중 가장 가까운 것).
  • 만약 400 미만의 가중치가 주어지면, 가능한 얇은 가중치 중 가장 가까운 것이 사용된다 (만약 없다면, 굵은 가중치 중 가장 가까운 것).
  • 만약 가중치가 400 이 주어지면, 500 이 사용된다. 만약 500 이 불가능하면, 500 미만의 폰트 가중치를 위한 경험적 접근이 사용된다.
  • 만약 가중치가 500 이 주어지면, 400 이 사용된다. 만약 400 이 불가능하면, 400 미만의 폰트 가중치를 위한 경험적 접근이 사용된다.

이것은 normal 과 bold 만 지원하는 폰트일 경우, 100-500 은 normal, 600-900 은 bold 임을 의미한다.

상대적 가중치의 의미

lighter 나 bolder 가 주어진 경우, 요소의 절대적인 가중치를 계산하기 위해 다음 차트가 사용된다:

상속된 값 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 의 가중치 값들은 다음의 일반적인 두께 이름으로 대응된다:

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)

보간

font-weight 값은 100 단위로 보간된다. 보간은 실수 공간에서 이루어지며 100의 배수에 가까운 값으로 어림한다. 100의 배수 중간의 값들은 양의 무한대 방향의 가까운 값으로 어림한다.

형식 구문

font-weight = 
  <font-weight-absolute>  |
  bolder                  |
  lighter                 

<font-weight-absolute> = 
  normal             |
  bold               |
  <number [1,1000]>

예제

HTML

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

css
/* Set paragraph text to be bold. */
p {
  font-weight: bold;
}

/* Set div text to two steps darker than
   normal but less than a standard bold. */
div {
  font-weight: 600;
}

/* Sets text enclosed within span tag
   to be one step lighter than the parent. */
span {
  font-weight: lighter;
}

결과

명세

Specification
CSS Fonts Module Level 4
# font-weight-prop

브라우저 호환성

BCD tables only load in the browser