CSS @font-face 규칙
정의와 사용법
@font-face 규칙을 사용하면 웹 디자이너는 더 이상 "안전한" 글꼴을 사용할 필요가 없습니다.
@font-face 규칙에서는 먼저 글꼴 이름(예: myFirstFont)을 정의한 후 글꼴 파일을 지정해야 합니다.
추천:글꼴의 URL은 소문자를 사용합니다. 대문자는 IE에서 예상치 못한 결과를 초래할 수 있습니다!
HTML 요소에 글꼴을 사용하려면, font-family 속성을 통해 글꼴 이름(myFirstFont)을 참조합니다:
div {
font-family: myFirstFont;
}
다른 것을 참조하세요:
CSS 강의:CSS 웹 폰트
예제
이름이 "myFirstFont"인 글꼴을 지정하고, 그 URL을 정의합니다:
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
더 많은 TIY 예제를 페이지 하단에 찾을 수 있습니다.
CSS 문법
@font-face {
font-properties
}
| 글꼴 설명자 | 값 | 설명 |
|---|---|---|
| font-family | name | 필수. 글꼴 이름을 정의합니다. |
| src | URL | 필수. 다운로드할 글꼴의 URL을 정의합니다. |
| font-stretch |
|
선택 사항. 글꼴을 어떻게 늘리거나 줄일지 정의합니다. 기본 값은 "normal"입니다. |
| font-style |
|
선택 사항. 글꼴 스타일을 정의합니다. 기본 값은 "normal"입니다. |
| font-weight |
|
선택 사항. 글꼴의 두께를 정의합니다. 기본 값은 "normal"입니다. |
| unicode-range | unicode-range | 선택 사항. 글꼴이 지원하는 Unicode 문자 범위를 정의합니다. 기본 값은 "U+0-10FFFF"입니다. |
更多实例
예제
밝은 텍스트의 설명자를 포함한 또 다른 @font-face 규칙을 추가해야 합니다:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
파일 "sansation_bold.woff"는 Sansation 글꼴의 볼드체 문자를 포함한 또 다른 글꼴 파일입니다.
문자 집합 "myFirstFont"을 사용하여 볼드체로 표시되어야 하는 텍스트의 경우, 브라우저가 그것을 사용합니다.
이렇게 하면 동일한 글꼴에 대해 여러 개의 @font-face 규칙을 설정할 수 있습니다.
브라우저 지원
Internet Explorer, Firefox, Opera, Chrome 및 Safari는 @font-face 규칙을 지원합니다.
표에서는 글꼴 형식을 완벽히 지원하는 첫 번째 브라우저 버전을 숫자로 표시했습니다.
| 글꼴 형식 | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| SVG | 지원되지 않음 | 지원되지 않음 | 지원되지 않음 | 3.2 | 지원되지 않음 |
| EOT | 6.0 | 지원되지 않음 | 지원되지 않음 | 지원되지 않음 | 지원되지 않음 |
* Edge와 IE: 글꼴 형식은 "installable"로 설정된 경우에만 유효합니다
* Firefox：기본적으로 비활성화되어 있지만 활성화할 수 있습니다. (WOFF2를 사용하려면 flag를 "true"로 설정해야 합니다).
