본문 바로가기

CSS

[CSS] font(3) - font-weight

728x90
반응형

 

 

▶ 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를 의미.

 

 

 

 

 

728x90
반응형

'CSS' 카테고리의 다른 글

[CSS] font(5) - line-height  (0) 2020.09.09
[CSS] font(4) - font-size  (0) 2020.09.09
[CSS] font(2) - font-style  (0) 2020.09.09
[CSS] font(1)  (0) 2020.09.09
[CSS] opacity  (0) 2020.09.09