@font-face

정의 및 사용

기존에는 웹페이지에 나타낼 수 있는 폰트가 사용자의 컴퓨터에 설치된 것만 가능했지만 css3 에서 @font-face 라는 속성이 생기면서 원하는 폰트를 무엇이든 쓸 수 있게 되었다. 이 속성을 사용하여 폰트 파일이 위치된 곳을 연결시키면 언제든지 사용자가 필요할 때 자동적으로 브라우저가 다운 받아 표현할 수 있게 된다.

@font-face 에서 font-family 를 정의하고 폰트 파일이 위치한 url 을 지정하면 된다. 만약 해당 폰트 파일이 css 와 다른 도메인에 위치한다면 연결 url 에서 다른 도메인의 full URL 을 적어주면 된다.

브라우저 지원

IE6 지원IE7 지원IE8 지원Chrome 지원Firefox 지원Opera 지원Safari 지원

주요 브라우저 모두 지원

각 브라우저별로 주의할 점은 폰트 확장자에 관한 것이다. IE 브라우저 계열은 .eot(embeded open type) 만 지원하며 Firefox, Chrome, Safari, Opera 는 .ttf(true type font) 와 .otf(open type font) 를 지원한다.

구문

속성 값 설명
설명
font-family 필수. 폰트의 이름을 정의
src 필수. 폰트를 어디에서 다운 받을 것인지 URL 경로를 지정
font-stretch normal(기본값), condensed, ultra-condensed, extra-condensed, semi-condensed, expanded, semi-expanded, extra-expanded, ultra-expanded 값이 있으며 글자의 장평(폭)을 지정하지만 대부분의 브라우저에서 아직 미지원함
font-style normal(기본값), italic, oblique 값이 있으며 폰트의 스타일(기울임)을 지정함
font-weight 폰트의 굵기를 지정함
unicode-range ..

예제

버그 및 이슈

소제목

목록 으로

댓글