[CSS] 폰트 (font) - font-size, 폰트 크기

font-size

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

font-size: keyword | length | initial | inherit ;

기본 값 미지정 시 글꼴의 기본크기는 16px (1em)

 

< 속성 값 >

keyword : medium(기본 값), xx-small, x-small, small, large, x-large, xx-large, smaller, larger

 - absolute size : 기본 값인 medium에 대한 상대적인 크기로, 브라우저마다 사이즈가 다르게 정의한다. 

 - relative size : 부모 요소의 font-size 크기에 상대적으로 적용되며, smaller는 0.8배, larger는 1.2배이다.

font-size: medium; /* 기본 사이즈 */
font-size: xx-small;
font-size: large;

font-size: smaller; /* 부모 사이즈의 약 0.8배 */
font-size: larger; /* 부모 사이즈의 약 1.2배 */

length : px, em, rem 등 고정 수치로 지정

 - em :  부모 요소의 font-size에 em 값을 곱한 크기

 - rem : 루트의 font-size에 rem 값을 곱한 크기

font-size: 12px;
font-size: 0.8em;

percent(%) : 부모 요소의 font-size를 기준으로 백분율 계산된 값을 지정할 수 있다. 

font-size: 80%;

viewport units : vw, vh 단위로 뷰포트를 기준으로 하여, 유동적인 font-size를 지정할 수 있다. vw는 뷰포트 width의 1%, vh는 뷰포트 height의 1% 값을 가진다.

font-size: 1vw; /* 1% of viewport width */
font-size: 1wh; /* 1% of viewport height */

 

www.w3schools.com/cssref/pr_font_font-size.asp

CSS font-size property