5-3. CSS 글꼴 스타일 , 그리고 웹 폰트 사용하는 법

1. font-family

웹 문서에 사용할 글꼴은 font-family 속성으로 지정한다. 

font-family : <글꼴 이름> 

2. font-size

글자 크기는 font-size 속성을 사용하여 조절한다. 

px, pt, 백분율 등 사용할 수 있다. 

 

1️⃣ 키워드를 사용하여 글자 크기 지정하기 

xx-small -> x-small -> small -> medium -> large -> x-large -> xx-large

 

2️⃣ 단위를 사용하여 글자 크기 지정하기 

em : 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준으로 한 후 비율값을 지정한다. 

rem : 문서 시작 부분에서 지정한 크기를 기준으로 한 후 비율값을 지정한다. 

ex : 해당 글꼴의 소문자 x의 높이를 기준으로 한 후 비율값을 지정한다. 

px : 모니터의 1픽셀을 기준으로 한 후 비율값을 지정한다. 

pt : 포인트라고 하며, 일반 문서에서 가장 많이 사용한다. 

 

요즘은 모바일 기기까지 고려해야 해서 상대크기 단위인 em이나 rem을 많이 사용하며, 1em은 16px, 12pt와 같다. 

 

 

3️⃣ 백분율을 사용하여 글자 크기 지정하기 

백분율은 부모 요소의 글자 크기를 기준으로 계산하여 지정하는 방법인데 부모 요소의 글꼴 크기가 16px 처럼 단위로 표시되어 있어야 한다. 

 

3. font-style

글자를 이탤릭체로 표시할 때 font-style속성으로 사용한다. 

italic과 oblique가 있는데 보통은 italic을 사용한다. 

font-style : normal | italic | oblique 

 

4. font-weight

글자 굴기를 지정하는 속성은 font-weight 으로 웹 문서를 작성할 때 자주 사용한다. 

normal, bold, bolder 등이 있다, 

 

 

* 웹 폰트 사용하기 

https://fonts.google.com/

Google Fonts

이런 곳에서 폰트를 제공해주는 곳에서는 링크를 사용하고 아니면 ttf 폰트를 변환해서 사용해야한다. 

 

❕ 컴퓨터에서 사용하는 글꼴은 트루타입이고 , 파일 확장자는 *.tff 이다. 

근데 트루타입 글꼴은 크기가 커서 웹에 사용하기에는 부적절하기 때문에 EOT(embedded open type) , WOFF (web open font format) , WOFF2가 있는데 최근에는 WOFF2를 많이 사용한다고 한다. 

 

@font-face 

@font-face 속성을 사용하여 웹 폰트를 정의한다. 

 

@font-face {

   font-family : <글꼴이름); 

   src : <글꼴 파일> ; 

}

1️⃣ 가장 먼저 font-family 속성을 사용해 글꼴 이름을 만든다.

2️⃣ src 속성에서는 사용할 글꼴 파일의 경로를지정해준다. 

local()을 사용하여 사용자 시스템에 해당 글꼴이 있는지 먼저 확인하고, 사용자 시스템에 글꼴이 있다면 그 글꼴을 사용하지만 없다면 WOFF ㅁ포맷으로 된 글꼴을 내려 받아야한다. 

 

 

구글 폰트에서 

 

이 폰트를 적용해봤다. 

 

여기 있는 거 복붙하면 된다.