[CSS] 글꼴

font-style

글자의 기울기를 의미한다.

 

- 기본값: normal (기울기 없음)

- italic: 이탤릭체 (기울어진 글자)

 

font-weight

글자의 두께를 의미한다.

보통 400(일반 두께), 700(두꺼운 두께) 을 많이 사용한다.

 

- 기본값: normal, 400 (기본 두께)

- bold, 700: 두껍게

- border: 상위 요소보다 더 두껍게

- lighter: 상위 요소보다 더 얇게

- 100 ~ 900: 100 단위의 숫자 9개, normal 과 bold 이외 두께

 

font-size

글자의 크기를 의미한다.

보통 px, em, rem 등 단위로 지정하여 사용한다.

 

- 기본값: 16px (기본 크기)

- 단위: px, em, rem 등 단위로 지정

- %: 부모 요소의 폰트 크기에 대한 비율

- smaller: 상위 요소보다 작은 크기

- large: 상위 요소보다 큰 크기

- xx-small ~ xx-large: 가장 작은 크기 ~ 가장 큰 크기까지 7 단계의 크기를 지정

 

line-height

한 줄의 높이를 의미하며 행간과 유사하다.

 

- 기본값: normal (브라우저의 기본 정의를 사용)

- 숫자: 요소의 글꼴 크기의 배수로 지정

- 단위: px, em, rem 등의 단위로 지정

- %: 요소의 글꼴 크기의 비율로 지정

.text {
  font-size: 16px;
  line-height: 32px; /* 32px */
  line-height: 2; /* 글꼴 크기인 16px 의 2배: 32px */
  line-height: 200%; /* 글꼴 크기인 16px 의 200%: 32px */
}

배수(숫자) 를 사용하여 지정하면 폰트의 사이즈가 변경되더라도 같은 비율을 유지할 수 있기 때문에

단위를 사용하는 것 보다는 배수를 사용하여 지정하는 것이 좋다.

 

font-family

글꼴(서체)를 지정한다.

글자와 관련된 속성이기 때문에 하위 요소에 상속된다.

font-family: 글꼴1, "글꼴2", ... 글꼴계열;

- "글꼴2": 띄어쓰기 등 특수문자가 포함된 글꼴 이름은 큰 따옴표로 묶어야 함

- 글꼴계열: 필수로 작성해야 함 (serif 등)

 

브라우저는 글꼴 후보들이 명시된 순서대로 사용하기 위해서 시도한다.

만약 사용이 가능하면 해당 글꼴의 뒤쪽 내용은 무시된다.

 

만약 모든 글꼴 후보들을 사용할 수 없는 환경이라면

마지막에 명시되어져 있는 글꼴 계열 중에서 브라우저가 사용할 수 있는 폰트로 출력한다.

 

[ 글꼴 계열 ]

- serif: 바탕체 계열

- sans-serif: 고딕체 계열

- monospace: 고정너비(가로폭이 동일)글꼴 계열

- cursive: 필기체 계열

- fantasy: 장식 글꼴 계열