CSS Rules

Draft

@font-face

CSS에서 사용할 글꼴을 정의한다.

구문

@font-face { }CSS3기본형식
글꼴에 대한 설정을 하며 font-family에 정의한 이름으로 원하는 곳에 font-family 속성을 통해 정의된 글꼴을 사용할 수 있다. 반드시 정의할 속성은 font-family, src 이다. font-family는 @font-face로 정의한 글꼴의 이름을 설정한다. 원하는 이름으로 정의할 수 있으며 이름 내에 공백이 들어간 경우에는 따옴표로 감싸줘야 한다. 이 곳에서 정의된 이름으로 다른 선택자에게 font-family 속성의 값으로 사용되어 글꼴을 적용할 수 있다. src속성은 사용할 글꼴의 경로를 설정한다. url() 함수를 통해 설정할 수 있다.

속성

<text>font-family필수
글꼴 속성의 글꼴 값으로 사용될 이름을 지정한다. 공백이 포함된 경우에는 인용 부호를 사용한다.
<constants>font-style선택
CSS 명세의 font-style 속성을 지정한다.
<text>font-weight선택
CSS 명세의 font-weight 속성을 지정한다.
<text>font-stretch선택
CSS 명세의 font-stretch 속성을 지정한다.
<url>src선택
글꼴 파일의 경로를 지정한다. 원격 위치의 URL이거나 사용자 기기에 내장된 글꼴 이름일 수 있다.

기술 문서

사용 방식 상세

@font-face로 글꼴을 정의할 때 다음 아래의 속성들을 사용할 수 있다.

@font-face {
    font-family: NanumGothic;
    font-style: italic;
    font-weight: bold;
    src: local('NanumGothic'),
	    url('/webfonts/NanumGothic.eot'), /* IE 6~8 */
	    url('/webfonts/NanumGothic.woff') format('woff'),
	    url('/webfonts/NanumGothic.otf') format(‘opentype’),
	    url('/webfonts/NanumGothic.ttf') format('truetype');
}

font-family

글꼴로 사용할 이름을 정의한다. 만일 지정할 이름에 공백이 포함되는 경우에는 지정할 이름을 따옴표로 감싼다.

font-style

글꼴의 모양을 정의한다. 설정 가능한 값의 종류는 font-style 속성을 참조하길 바란다.

font-weight

글꼴의 굵기를 지정한다. 설정 가능한 값의 종류는 font-weight 속성을 참고하길 바란다.

src

사용할 글꼴 파일의 경로를 설정한다. 콤마(,)로 구분하여 글꼴 파일 경로를 리스트로 설정할 수 있으며 먼저 정의되어 있는 글꼴을 우선으로 해서 반영한다. local() 함수는 사용자의 기기의 운영 체제에 있는 시스템 글꼴을 사용하도록 한다. 시스템 글꼴이 아닌 경우에 사용할 수 있는 글꼴의 종류는 대표적으로 'woff','otf' 가 있다. 이 글꼴 파일들을 서버 계정 내에 올려 url() 함수를 이용해서 경로를 설정한다. 이렇게 설정된 글꼴을 사용해서 콘텐츠를 작성하는 경우 사용자의 웹브라우저는 서버로 부터 글꼴을 내려받아 사용한다. 따라서 사용자의 기기에 직접 글꼴을 가지고 있지 않아도 어느 기기이든 일관성이 있는 글꼴로 콘텐츠를 출력할 수 있다.

웹폰트

확장자가 '*.woff', '*.otf'같은 글꼴들을 웹폰트라 부른다. 보통 글꼴 파일은 파일 크기가 크다보니 서버에서 사용자의 기기로 내려받는 시간이 필요하다. 사실 시스템 폰트로 사용되고 있는 대표적인 트루타입 폰트인 '*.ttf'도 웹폰트로 사용할 수 있다. 그러나 파일 크기가 크다보니 웹폰트로 사용하기에는 적절치 않다. 따라서 네트워크에 최적화된 글꼴이 필요하게 되었는데 이러한 이유로 웹폰트라는 특화된 글꼴이 개발되었다.

지원 웹브라우저

외부 리소스

웹폰트 사용하기