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> 지금 테스트해보세요