[CSS] font(3) - font-weight

 

 

▶ font-weight
  - 글자의 두께(가중치)를 지정.

 

[속성 값]
- normal: 기본 글자 두께. font-weight: 400;과 동일. 기본값.
- bold: 두껍게. font-weight: 700;과 동일.
- border: 부모(상위) 요소보다 더 두껍게(bold보다 두껍다는 개념이 아님에 유의).
- lighter: 부모(상위) 요소보다 더 얇게.
- 숫자: 100부터 900까지 100단위의 숫자 값 9가지.

        normal과 bold 이외에 글자의 두께를 제공하는 글꼴(서체)을 위한 설정.

 

 

[일반적인 두께의 이름]
  - font-weight의 각 값은 일반적으로 다음과 같은 글꼴의 이름으로 표현됨.

 

값	일반적인 두께 이름
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

 

[상대적 두께]
  - bolder나 lighter를 사용할 경우 부모(상위) 요소에게 상속 받은 값에서 다음과 같이 계산됨.

 

값	border	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

 

※ 숫자 값과 두께의 불일치
  - font-weight에 어떤 값을 넣었는데 그 값에 해당하는 두께가 확인되지 않는 경우.
    - 지정한 숫자값과 일치하는 두께가 없거나 글꼴(서체)의 정확한 두께를 숫자로 표현할 수 없는 경우.

 

1. 400이 주어지면 500을 사용하고, 500이 불가하면 500 미만의 다른 두께 사용.

2. 500이 주어지면 400을 사용하고, 400이 불가하면 400 미만의 다른 두께 사용.

3. 400 미만 값이 주어지면 가장 가까운 숫자의 얇은 두께 사용.

4. 500 초과 값이 주어지면 가장 가까운 숫자의 두꺼운 두께 사용.

 

  예) normal과 bold만 지원하는 글꼴일 경우,
     100~500은 normal을 의미하고 600~900은 bold를 의미.