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 2015년 7월.
요약
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 type | by computed value type |
구문
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 의 가중치 값들은 다음의 일반적인 두께 이름으로 대응된다:
보간
font-weight 값은 100 단위로 보간된다. 보간은 실수 공간에서 이루어지며 100의 배수에 가까운 값으로 어림한다. 100의 배수 중간의 값들은 양의 무한대 방향의 가까운 값으로 어림한다.
형식 구문
font-weight =
<font-weight-absolute> |
bolder |
lighter
<font-weight-absolute> =
normal |
bold |
<number [1,1000]>
예제
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 |
|---|
| CSS Fonts Module Level 4 # font-weight-prop |
브라우저 호환성
Loading…