티스토리 뷰

728x90

font-weight

글꼴의 굵기를 지정하는 속성이다. (기본 값 : normal)

font-weight: normal | bold | bolder | lighter | number | initial | inherit ;

 

font-weight의 속성 값

normal : 기본 값 (400)

bold : 굵게 표현(700)

bolder : 부모 요소 보다 두껍게 표현

lighter : 부모 요소 보다 얇게 표현

font-weight: normal; /* 400과 같음 */
font-weight: bold;
font-weight: lighter;
font-weight: bolder;

number : 100, 200, 300, 400, 500, 600, 700, 800, 900 (클수록 더 두껍게 표현)

 - 수치를 이용한 font-weight는 폰트 자체에서 지원을 해야 표현할 수 있다. 

font-weight: 100;
font-wieght: 400;
font-wieght: 900;

 

실무에서는 normal과  bold를 많이 사용하고, 부모 요소에 영향이 있는 bolder와 lighter는 사용을 될 수 있으면 지양하는 편이다. 

폰트에 따라 font-weight를 적용해도 굵기에 변화가 없을 수도 있으며, normal과 bold만 지원하는 폰트일 경우에는 100~500까지는 normal로, 600~900까지는 bold로 표현된다.

폰트가 점차 다양해지면서 굵기 자체를 폰트 family-name으로 가지고 있는 경우도 있으며, 디바이스별로 조금 다르게 표현될 수도 있음에 주의하자!

 

www.w3schools.com/cssref/pr_font_weight.asp

 

CSS font-weight property

CSS font-weight Property Example Set different font weight for three paragraphs: p.normal {   font-weight: normal; } p.thick {   font-weight: bold; } p.thicker {   font-weight: 900; } Try it Yourself » Definition and Usage The font-weight property se

www.w3schools.com

 

 

 

 

 

728x90
댓글
공지사항
최근에 올라온 글