반응형
font-weight
글꼴의 굵기를 설정하는 속성입니다.
속성값 (기본값 normal)
1. normal : 기본값 (400)
2. bold : 글꼴을 굵게 표현(700)
3. bolder : 부모 요소보다 두껍게 표현
4. lighter : 부모 요소보다 얇게 표현
5. number : 100,200,300,400,500,600,700,800,900 (클수록 더 두껍게 표현)
실무에서는 normal과 bold를 많이 사용하고, 부모 요소에 영향이 있는 bolder와 lighter는 사용을 될 수 있으면 지양하는 편입니다. 물론 상속 관계에서 바뀌어야 하는 스펙이라면 당연히 유용하게 사용될 수 있지만, 그 외의 경우에는 사용에 있어 신중해야 합니다.
수치를 이용한 font-weight는 폰트 자체에서 지원을 해야 표현할 수 있습니다.
폰트에 따라 font-weight를 적용해도 굵기에 변화가 없을 수도 있으며,
normal과 bold만 지원하는 폰트일 경우에는 100~500까지는 normal로, 600~900까지는 bold로 표현됩니다.
폰트가 점차 다양해지면서 굵기 자체를 폰트 family-name으로 가지고 있는 경우도 있습니다.
또한, 디바이스별로 조금 다르게 표현될 수도 있습니다.
font-weight와 font-family, font-size는 서로 밀접하게 연관되어있습니다.
반응형
'Spec UP - Frontend > 부스트코스_UI 개발' 카테고리의 다른 글
CSS속성_font-variant(폰트 버라이언트) (0) | 2020.03.27 |
---|---|
CSS속성_font-style(글꼴스타일) (0) | 2020.03.27 |
CSS속성_font-size(폰트사이즈) (0) | 2020.03.27 |
CSS속성_line-height(행간) (0) | 2020.03.26 |
CSS속성_font-family & generic-family (0) | 2020.03.26 |
댓글