CSS 폰트 크기

폰트 크기

font-size 속성을 사용하여 텍스트 크기를 설정합니다.

웹 디자인에서 텍스트 크기를 관리할 수 있는 것은 중요하지만, 텍스트 크기를 조정하여 구절이 제목처럼 보이거나 제목이 구절처럼 보이게 하지 않아야 합니다.

항상 올바른 HTML 태그를 사용하십시오. 예를 들어, <h1> - <h6>는 제목에 사용되고, <p>는 구절에 사용됩니다.

font-size 값은 절대적 또는 상대적 크기일 수 있습니다.

절대적 크기:

  • 텍스트를 지정된 크기로 설정합니다
  • 사용자가 모든 브라우저에서 텍스트 크기를 변경할 수 없도록 허용하지 않습니다(접근성이 좋지 않음)
  • 출력된 물리적 크기가 알려져 있을 때, 절대적 크기는 매우 유용합니다

상대적 크기:

  • 주변 요소에 대한 크기를 설정합니다
  • 사용자가 브라우저에서 텍스트 크기를 변경할 수 있도록 허용합니다

주의:字体 크기를 지정하지 않으면 일반 텍스트(예: 구절)의 기본 크기는 16px입니다(16px = 1em).

픽셀로字体 크기를 설정하십시오

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

예제

h1 {
  font-size: 40px;
}
h2 {
  font-size: 30px;
}
p {
  font-size: 14px;
}

직접 테스트해 보세요

추천:픽셀을 사용하면 여전히 전체 페이지 크기를 조정할 수 있는 확대 도구를 사용할 수 있습니다.

em으로字体 크기를 설정하십시오

사용자가 텍스트 크기를 조정할 수 있도록 하기 위해(브라우저 메뉴에서), 많은 개발자들이 픽셀 대신 em을 사용합니다.

W3C는 em 단위를 권장합니다.

1em은 현재字体 크기입니다. 브라우저의 기본 텍스트 크기는 16px입니다. 따라서 기본 크기 1em은 16px입니다.

픽셀에서 em로 크기를 계산하는 방법은 다음과 같습니다: pixels/16=em。

예제

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}
p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

직접 테스트해 보세요

위 예제에서 em 단위의 텍스트 크기는 이전 예제의 픽셀 크기와 동일합니다. 하지만 em 크기를 사용하면 모든 브라우저에서 텍스트 크기를 조정할 수 있습니다.

불운히, 구 버전의 인터넷 익스플로어러는 여전히 문제가 있습니다. 텍스트를 확대할 때는 예상보다 더 큰 크기를 가지고 있으며, 축소할 때는 더 작습니다.

사용 비율과 Em의 조합

예제

body {
  font-size: 100%;
}
h1 {
  font-size: 2.5em;
}
h2 {
  font-size: 1.875em;
}
p {
  font-size: 0.875em;
}

직접 테스트해 보세요

현재 코드는 잘 작동하고 있습니다! 모든 브라우저에서 동일한 텍스트 크기를 표시하며, 모든 브라우저에서 텍스트 크기를 확장하거나 조정할 수 있습니다!

반응형 글자 크기

사용할 수 있습니다 vw 단위로 텍스트 크기를 설정하는 것은 "뷰포트 너비"("viewport width")를 의미합니다.

이렇게 하면 텍스트 크기는 브라우저 창의 크기에 따라 변경됩니다. 브라우저 창 크기를 조정하여 글자 크기가 어떻게 조정되는지 확인하세요:

예제

<h1 style="font-size:10vw">Hello World</h1>

직접 테스트해 보세요

뷰포트(Viewport)는 브라우저 창의 크기입니다. 1vw는 뷰포트 너비의 1％。뷰포트가 50 센치미터 너비이면, 1vw는 0.5 센치미터입니다.