font-weight

요약

font-weight CSS 속성은 폰트(font)의 가중치(weight)나 굵기(boldness)를 명시한다. 몇몇 폰트들은 normal 나 bold 일 때만 가능하다.

초기값	`normal`
적용대상	all elements and text. It also applies to `::first-letter` (en-US) and `::first-line` (en-US).
상속	yes
계산 값	the keyword or the numerical value as specified, with `bolder` and `lighter` transformed to the real value
Animation type	a 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

상속된 값	`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

상속된 값	`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

상속된 값	`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