CSS @font-face 규칙

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

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

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

이 @font-face규칙에 따라 웹 디자이너는 더 이상 "웹에 안전한" 글꼴 중 하나를 사용할 필요가 없습니다.

규칙 에서 @font-face먼저 글꼴 이름(예: myFirstFont)을 정의한 다음 글꼴 파일을 가리켜야 합니다.

HTML 요소에 글꼴을 사용하려면 font-family 속성을 통해 글꼴 이름(myFirstFont)을 참조하십시오.

div {
font-family: myFirstFont;
}

이 @font-face규칙은 Edge, Chrome, Firefox, Safari 및 Opera에서 지원됩니다.

표의 숫자는 글꼴 형식을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

*글꼴 형식은 "설치 가능"으로 설정된 경우에만 작동합니다.

@font-face {
font-properties
}

Font descriptor	Values	Description
font-family	name	Required. Defines the name of the font.
src	URL	Required. Defines the URL(s) where the font should be downloaded from
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Optional. Defines how the font should be stretched. Default value is "normal"
font-style	normal italic oblique	Optional. Defines how the font should be styled. Default value is "normal"
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Optional. Defines the boldness of the font. Default value is "normal"
unicode-range	unicode-range	Optional. Defines the range of unicode characters the font supports. Default value is "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 규칙을 가질 수 있습니다.