CSS3의 @ 글꼴 얼굴 규칙

라는 이름의 글꼴 지정 "myFirstFont" 하고 찾을 수있는 URL을 지정합니다

@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}

더 "Try it Yourself" 아래의 예.

정의 및 사용

@ font-face 규칙으로, 웹 디자이너는 더 이상 중 하나를 사용할 필요가 없습니다 않는다 "web-safe" 글꼴.

새 @ 글꼴 얼굴 규칙에서 먼저 글꼴의 이름을 정의해야합니다 (eg myFirstFont) 다음 글꼴 파일을 가리 킵니다.

팁 : 글꼴 URL에 소문자를 사용합니다. 대문자는 IE에서 예기치 않은 결과를 줄 수 있습니다!

HTML 요소의 글꼴을 사용하려면 글꼴의 이름을 참조 (myFirstFont) 글꼴 가족 속성을 통해 :

div {
font-family: myFirstFont;
}

@ font-face 규칙은 인터넷 익스플로러, 파이어 폭스, 오페라, 크롬, 사파리에서 지원됩니다.

표의 수치는 완전히 폰트 포맷을 지원하는 제 브라우저 버전을 지정한다.

* 에지와 IE :로 설정하면 글꼴 형식에만 작동 "installable" .

* 파이어 폭스 : 기본적으로 비활성화하지만, (하는 플래그를 설정해야 사용할 수 있습니다 "true" WOFF2를 사용하기 참조).

@font-face {
font-properties
}

글꼴 설명	값	기술
글꼴 - 가족	name	필요합니다. 글꼴의 이름을 정의합니다.
SRC	URL	필요합니다. 정의 URL(s) 글꼴을 다운로드해야합니다
글꼴 스트레칭	표준 응축 울트라 응축 - 별도의 응축 반 응축 퍼지는 반 확장 - 추가 확장 울트라 확장	선택 과목. 글꼴이 신장되는 방법을 정의합니다. 기본값은 "normal"
글꼴 스타일	표준 이탤릭체 비스듬한	선택 과목. 글꼴이 스타일되는 방법을 정의합니다. 기본값은 "normal"
글꼴 무게	표준 대담한 (100) (200) (300) (400) (500) (600) (700) (800) (900)	선택 과목. 글꼴의 담대함을 정의합니다. 기본값은 "normal"
유니 코드 범위	unicode-range	선택 과목. 폰트가 지원하는 유니 코드 문자의 범위를 정의합니다. 디폴트 값은 "U+0-10FFFF"

당신은 굵은 텍스트에 대한 설명을 포함하는 다른 @ 글꼴 얼굴 규칙을 추가해야합니다 :

@font-face {
    font-family: myFirstFont;
    src: url(sansation_bold.woff);
    font-weight: bold;
}

파일 "sansation_bold.woff" Sansation 글꼴의 굵은 문자가 포함 된 다른 글꼴 파일입니다.

글꼴 - 가족과 함께 텍스트의 조각마다 브라우저는이를 사용합니다 "myFirstFont" 굵은 렌더링해야합니다.

이 방법은 동일한 글꼴에 대한 많은 @ 글꼴 얼굴 규칙을 가질 수 있습니다.