과목 추천:
- 이전 페이지 font
- 다음 페이지 font-family
CSS @font-face 규칙
정의와 사용법
@font-face 규칙을 사용하면 웹 디자이너가 "안전한" 글꼴을 사용할 필요가 없게 됩니다.
@font-face 규칙에서는 먼저 글꼴 이름(예: myFirstFont)을 정의한 후 글꼴 파일을 지정해야 합니다.힌트:
글꼴의 URL은 소문자를 사용합니다. 대문자는 IE에서 예상치 못한 결과를 초래할 수 있습니다!
HTML 요소에 글꼴을 사용하려면, font-family 속성을 통해 글꼴 이름(myFirstFont)을 호출합니다: font-family: myFirstFont; }
div {
자세히 보기:CSS 웹 폰트
예제
CSS 강의:
@font-face {
font-family: myFirstFont;
이름이 "myFirstFont"인 글꼴을 지정하고, 그 URL을 정의합니다:
}
src: url(sansation_light.woff);
页面下方에서 더 많은 TIY 예제를 찾을 수 있습니다.
@font-face {
CSS 문법
}
| 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"로 설정해야 합니다).
- 이전 페이지 font
- 다음 페이지 font-family
