CSS의 글꼴 크기 속성은 글꼴의 높이와 크기를 지정하는 데 사용됩니다. 요소의 텍스트 크기에 영향을 미칩니다. 기본값은 중간이며 모든 요소에 적용할 수 있습니다. 이 속성의 값은 다음과 같습니다. xx-소형 , 작은 , x-소형 , 등.

통사론

 font-size: medium|large|x-large|xx-large|xx-small|x-small|small|; 

글꼴 크기는 상대적이거나 절대적일 수 있습니다.

절대 크기

텍스트를 일정한 크기로 설정하는 데 사용됩니다. 절대 크기를 사용하면 모든 브라우저에서 텍스트 크기를 변경할 수 없습니다. 출력의 물리적 크기를 알면 유리합니다.

상대 크기

인접한 요소를 기준으로 텍스트의 크기를 설정하는 데 사용됩니다. 상대 크기를 사용하면 브라우저에서 텍스트의 크기를 변경할 수 있습니다.

참고: 글꼴 크기를 정의하지 않으면 단락과 같은 일반 텍스트의 경우 기본 크기는 16px(1em과 동일)입니다.

픽셀이 포함된 글꼴 크기

텍스트 크기를 픽셀로 설정하면 텍스트 크기를 완전히 제어할 수 있습니다.

예

 #first { font-size: 40px; } #second { font-size: 20px; } <p id="first">This is a paragraph having size 40px.</p> <p id="second">This is another paragraph having size 20px.</p> 

em으로 글꼴 크기

텍스트의 크기를 조정하는 데 사용됩니다. 대부분의 개발자가 선호하는 ~에 대신에 픽셀 . 월드와이드웹 컨소시엄(W3C)에서 권장하는 방식입니다. 위에서 설명한 대로 브라우저의 기본 텍스트 크기는 16px입니다. 따라서 기본 크기는 다음과 같습니다. 오전 1시 ~이다 16px .

크기를 계산하는 공식 픽셀 에게 ~에 ~이다 em = 픽셀/16 .

예

 #first { font-size: 2.5em; /* 40px/16=2.5em */ } #second { font-size: 1.875em; /* 30px/16=1.875em */ } #third { font-size: 0.875em; /* 14px/16=0.875em */ } <p id="first">First paragraph.</p> <p id="second">Second paragraph</p> <p id="third">Third Paragraph.</p> 

반응형 글꼴 크기

다음을 사용하여 텍스트의 크기를 설정할 수 있습니다. 폭스바겐 유닛 , 이는 '를 의미합니다. 뷰포트 너비 '. 뷰포트는 브라우저 창의 크기입니다.

1vw = 뷰포트 너비의 1%.

뷰포트의 너비가 50cm이면 1vw는 0.5cm와 같습니다.

예

첫 번째 단락의 너비는 5vw입니다.

두 번째 단락의 너비는 10vw입니다.

길이 속성을 사용한 글꼴 크기

글꼴의 크기를 길이로 설정하는 데 사용됩니다. 길이는 cm, px, pt 등이 될 수 있습니다. 음수 값 길이 글꼴 크기에는 속성이 허용되지 않습니다.

통사론

 font-size: length; 

예

 .length { color:red; font-size: 5cm; } <p class="length">A paragraph having length 5cm.</p>