26) CSS 속성 - webfont

폰트 관련해서 주로 사용되는 명칭으로 ' 시스템 폰트 ', ' 이미지 폰트 ', ' 웹 폰트 '가 있습니다.

시스템 폰트는 font-family로 선언한 글꼴이 사용자 시스템에 기본으로 설치가 되어 있어 사용할 수 있는 경우를 말하고,

이미지 폰트는 특정 글꼴을 사용하는 것이 아니고, 글자를 표현함에 있어 시각적인 요소를 많이 넣고 싶을 때 글꼴 대신 이미지를 이용해서 표현하는 경우를 의미합니다. 정확히 얘기하면 이미지 폰트는 폰트가 아니고 이미지 입니다.

그리고 웹 폰트는 서버에 저장해 제공하거나, 웹 경로를 통해 사용하는 폰트를 말합니다.

 

@font-face

웹에 있는 글꼴을 사용자의 로컬 환경(컴퓨터)으로 다운로드하여 적용하는 속성입니다. 

    기본 값 : 없음

@font-face { 
    font-properties 
}

< 속성 값 >

font-family(필수)	글꼴의 이름을 지정
src(필수)	다운로드 받을 글꼴의 경로(URL)
font-style(옵션)	글꼴의 스타일 지정, 기본 값은 normal
font-weight(옵션)	글꼴의 굵기 지정, 기본 값은 normal

사용 예시는 다음과 같습니다.

@font-face {
    font-family: webNanumGothic; /* 사용자 지정 웹 폰트명 */
    src: url(NanumGothic.eot); /* 적용 될 웹 폰트의 경로 */
    font-weight: bold; /* 필요에 따라 지정 */
    font-style: italic; /* 필요에 따라 지정 */
}

body {
    font-family: webNanumGothic;
}

웹폰트는 선언 시 필요에 따라 굵기나 스타일 등을 같이 지정해서 사용할 수 있습니다