[CSS] FONT - 글꼴

 

font-family : 글꼴 지정

- 두 개 이상의 글꼴 이름윽ㄹ 지정할 때에는 쉼표(,)로 구분

body { font-family : "맑은 고딕", 돋움, 굴림 }

위와 같을 때, 맑은 고딕이 없으면 돋움을, 돋움이 없으면 굴림을 적용하란 의미

 

@font-face : 웹 폰트 사용

- 웹 폰트 : 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드 시키는 방식

- 구글에서 제공하는 무료 웹 포트를 사용하면 따로 다운로드 하지 않고 직접 링크해서 사용 가능

  (다운로드 링크 : https://fonts.google.com/)

 

@import url(https://fonts.googleapis.com/css?family=Nanum+Gothic);
body {
    font-family: 'Nanum Gothic', sans-serif;
}

위와 같은 방법으로 링크를 붙여 넣어서 사용하면 된다

 

font-size : 글자 크기 조절

font-size : <절대 크기> | <상대 크기> | <크기> | <백분율>

- 절대 크기 : 브라우저에서 지정한 글자 크기

- 상대 크기 : 부모 요소의 글자 크기를 기준으로 더 크게 표시하거나 더 작게 표시

- 크기 : 브라우저와 상관없이 글자 크기를 직접 지정

- 백분율 : 부모 요소의 글자 크기를 기준으로 해당하는 %를 계산해서 표시 (%를 무조건 표시해야함)

단위

- em : 해당 글꼴의 대문자 M의 너비를 기준으로 크기를 조절

- ex : 해당 글꼴의 소문자 x의 높이를 기준으로 크기를 조절

- px : 픽셀 - 모니터에 따라 상대적 크기가 됨

- pt : 포인트 - 일반 문서에 많이 사용하는 단위

 

font-weight : 글자 굵기 지정

- normal : 일반적인 형태 (기본값)

- bold / lighter / bolder : 굵게 / 원래 굵기보다 더 가늘게 / 원래 굵기보다 더 굵게

- 100 ~ 900 수치 : 400은 normal, 700은 bold에 해당하며, 더 세밀히 두께를 조절

 

font-variant : 작은 대문자로 표시

- 대문자를 소문자 크기에 맞줘 작게 표시

- normal : 일반적인 형태로 표시

- small-caps : 작은 대문자로 표시

 

font-style : 글자 스타일 지정

- normal : 일반적인 형태로 표시

- italic : 이탤릭체로 표시 - 기울어진 글꼴이 처음부터 디자인되어 있는 형태

- oblique : 이탤릭체로 표시 - 원래 글꼴을 단지 기울어지게 표시

 

font : 글꼴 속성을 한꺼번에 묶어 표현

- font- : font-로 시작하는 글꼴 관련 속성을 한꺼번에 나열

- caption / icon / menu / message-box / small-caption / status-bar