CSS:font-face

CSS : font-face

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

font-face

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

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

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

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

브라우저 지원

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

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

Font format | chrome | IE | firefox | safari | opera ——— | ———| ———| ———| ———| ——— TTF/OTF | 4.0| 9.0|3.5 |3.1| 10.0 WOFF | 5.0| 9.0| 3.6| 5.1| 11.1 WOFF2 |36.0| Not supported|35.0 | Not supported| 26.0 SVG | 4.0| Not supported| Not supported| 3.2| 9.0 EOT | Not supported |6.0|Not supported| Not supported| Not supported

• edge 및 IE : 글꼴 형식은 “installable”으로 설정된 경우에만 작동합니다.

• Firefox : 기본적으로 비활성화되지만 활성화 할 수 있습니다 (WOFF2를 사용하려면 플래그를 “true”로 설정해야 함).

  속성값

• font-family : 필수의 글꼴 이름을 정의합니다.
• src : URL이 필요합니다. 글꼴을 다운로드할 URL을 정의합니다.
• font-stretch :선택적. 글꼴을 확장하는 방법을 정의합니다. 기본값은 “normal”입니다.
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
• font-style : 글꼴을 스타일을 지정합니다. 기본값은 “normal”입니다.
  • normal
  • italic
  • oblique
• font-weight : 글꼴의 굵기를 정의합니다. 기본값은 “normal”입니다.
  • normal
  • bold
  • 100~900
• unicode-range : 글꼴이 지원하는 유니코드 문자 범위를 정의합니다. 기본값은 “U+0-10FF”입니다.