[코딩 공부_21] CSS, 폰트 적용 3가지 방법

①  font-family  : 기본 설정

<style>
body {
       font-family: Arial, “test Helvetica”, sans-serif;
}
</style>

- 하나의 글씨체 이름이 길다면 ""(쌍따옴표)로 묶어준다.

- 폰트가 없다면 순서대로 적용된다

- 최종적으로 snas-serif, cursive, monospace 중 자동 선택된다.

 

 

②  font를 다운로드받아 설정하기 

<style>
@font-face {
 font-family: NanumSquare;
 src: url(NanumSquareR.eot);           			/* IE 호환성 보기 */
 src: url(NanumSquareR.eot#iefix) format('embedded-opentype'), /* IE 6 ~ 8 */
      url(NanumSquareR.woff2) format('woff2'), /* WOFF2 지원 브라우저 */
      url(NanumSquareR.woff) format('woff'), /* 모던 브라우저 */
      url(NanumSquareR.ttf) format('truetype'); /* 전체 */
}
</style>

- EOT(embedded Open Type), 마이크로소프트 IE 6~8지원이 되며, 크롬에선 지원 되지 않는다.

- OTF(OpenType font)와 TTF(TrueType Font)는 불법 복제 위험이 있어 WOFF 형식 만들어진다.

 * WOFF(Web Open Font Format) 다른 글꼴보다 빠르게 로드됨

 * 지원 현황 보기 : https://caniuse.com/?search=woff

 

③ 구글 또는 눈누 등  웹폰트 이용  : 안전하고 항상 폰트를 제공 가능하다

<style>
@import    url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap');

p {
font-family: 'Noto Sans KR', sans-serif;
}
</style>

- 눈누 : noonnu.cc/

- 구글 폰트 : fonts.google.com/

 * 웹 폰트를 찾아 코드를 입력해주면 적용된다!!