font-size 속성

font-size 속성은 텍스트의 글꼴 크기를 설정합니다. 속성값으로는 크기 단위 (일반적으로 px, em 또는 rem) 또는 특별한 키워드 (매우 드물게 사용됨)를 사용할 수 있습니다.

구문

css선택자 {
  font-size: 값;
}

키워드 값

기본값: medium.

예제

단락의 글꼴 크기를 20px로 설정해 봅시다:

html<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  font-size: 20px;
}

Результат:

예제

이 예제에서 단락의 크기는 16px로, 그 안의 span 요소의 크기는 150%로 설정됩니다. 이 경우 span 요소의 글꼴 크기는 자신의 부모(단락)의 150%가 되므로, 실제 크기는 16px * 150% = 24px가 됩니다:

html<p>
  Lorem <span>ipsum dolor</span> sit amet.
</p>

cssp {
  font-size: 16px;
}
span {
  font-size: 150%;
}

Результат:

예제

이 예제에서 단락의 크기는 16px로, 그 안의 span 요소의 크기는 larger로 설정됩니다. 이 경우 span 요소의 글꼴 크기는 부모 요소(단락)의 크기보다 커집니다:

html<p>
  Lorem <span>ipsum dolor</span> sit amet.
</p>

cssp {
  font-size: 16px;
}
span {
  font-size: larger;
}

Результат:

예제

서로 다른 font-family를 가진 글꼴들은 동일한 font-size라도 시각적으로 완전히 다른 크기로 보일 수 있습니다(이 문제를 해결하려면 font-size-adjust 속성을 참조하세요).

아래 예제에서 두 단락 모두 font-size가 16px로 설정되었지만, font-family는 서로 다릅니다:

html<p id="elem1">
  Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
  Lorem ipsum dolor sit amet.
</p>

css#elem1 {
  font-size: 16px;
  font-family: Arial;
}
#elem2 {
  font-size: 16px;
  font-family: "Times New Roman";
}

Результат: