dev/HTML5 CSS

[CSS] 폰트 스택 설정

포부리 2020. 4. 29. 10:44

엘리먼트에 대한 폰트 패밀리 정의

font-family: Helverica, "Times New Roan", Serif;
  • 사용할 주요 폰트명을 정의하고 콤마로 구분한다.
  • 폰트명은 대소문자를 구분하지 않는다.
  • 폰트명에 공백이 있는 경우, "", ''로 감싸야한다.

폰트 vs 폰트패밀리

폰트패밀리는 'Times' 처럼 외관을 담당하고, 폰트는 italic, bold, normal, bold italic 등 특정 버전을 가리킨다.

폰트의 높이

디센더 ~ 아센더까지 측정한 값.
x-height는 소문자 글자의 높이를 말한다.

⚠️디센더?
g,j,p,y 대문자+소문자, q 소문자(대문자 제외) 처럼 글자의 구조상 그 아랫 부분이 기준선 아래로 내려 오게 되는 글자

⚠️아센더?
b,d,f,h,k,l,t처럼 선이나 스트로크가 x-height보다 높은 경우

엘리먼트의 폰트 크기 정의

font-size: 100%;

폰트 크기 속성을 입력하고 크기를 정한다.
이떄 크기는 다음 항목 중 하나를 사용한다.

  • 상대 또는 절대값
  • 기본 페이지 크기에 대한 상대값을 갖는 절대 크기 키워드: xx-small, x-small, small, medium, large, x-large, xx-large
  • 부모 엘리먼트와 관련해 폰트 크기를 지저아는 smaller, larger 상대 크기 키워드