font-weight

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

요약

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

초기값normal
적용대상all elements. It also applies to ::first-letter and ::first-line.
상속yes
Mediavisual
Computed valuethe keyword or the numerical value as specified, with bolder and lighter transformed to the real value
Animatableyes, as a font weight
Canonical orderthe unique non-ambiguous order defined by the formal grammar

구문

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 미만의 폰트 가중치를 위한 경험적 접근이 사용된다.

이것은 normalbold 만 지원하는 폰트일 경우, 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의 배수 중간의 값들은 양의 무한대 방향의 가까운 값으로 어림한다.

형식 구문

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

예제

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

/* 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 Status Comment
CSS Fonts Module Level 3
The definition of 'font-weight' in that specification.
Candidate Recommendation 변경사항 없음
CSS Transitions
The definition of 'font-weight' in that specification.
Working Draft font-weight 이 animatable 로 정의됨
CSS Level 2 (Revision 1)
The definition of 'font-weight' in that specification.
Recommendation 변경사항 없음
CSS Level 1
The definition of 'font-weight' in that specification.
Recommendation 초기 정의

브라우저 호환성

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2.0 1.0 (1.7 or earlier) 3.0 3.5 1.3
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1.0) 6.0 6.0 3.1

문서 태그 및 공헌자

 이 페이지의 공헌자: naduhy2, jisoon, maytree
 최종 변경: naduhy2,