웹 글꼴을 사용하면 사용자의 컴퓨터에 설치되지 않은 글꼴을 사용할 수 있습니다.
사용자의 컴퓨터에 글꼴이 설치되지 않았다면 필요할 때 자동으로 다운로드하여 사용됩니다.
사용자 글꼴은 @font-face로 정의합니다.
| True Type Font (TTF) |
TrueType은 Apple과 Microsoft가 1980 년대 후반 개발 한 글꼴 표준입니다. 트루 타입은 Mac OS 및 Microsoft Windows 운영 체제 모두에서 가장 일반적인 글꼴 형식입니다. |
| Open Type Font (OTF) |
OpenType은 확장 가능한 컴퓨터 글꼴 형식입니다. TrueType으로 제작되었으며 Microsoft의 등록 상표입니다. OpenType 글꼴은 오늘날 주요 컴퓨터 플랫폼에서 일반적으로 사용됩니다. |
| Web Open Font Format (WOFF) |
WOFF는 웹 페이지에서 사용할 글꼴 형식입니다. 이것은 2009 년에 개발되었으며 현재 W3C 권장 사항입니다. WOFF는 본질적으로 압축 및 추가 메타 데이터가있는 OpenType 또는 TrueType입니다. 목표는 대역폭 제약 조건이있는 네트워크에서 서버에서 클라이언트로의 글꼴 배포를 지원하는 것입니다. (WOFF 2.0 : WOFF 1.0보다 우수한 압축을 제공) |
| SVG Fonts/Shapes | SVG 글꼴을 사용하면 텍스트를 표시 할 때 SVG를 글리프로 사용할 수 있습니다. SVG 1.1 사양은 SVG 문서 내에서 글꼴을 만들 수있는 글꼴 모듈을 정의합니다. 또한 SVG 문서에 CSS를 적용 할 수 있으며 @ font-face 규칙을 SVG 문서의 텍스트에 적용 할 수 있습니다. |
| Embedded OpenType Fonts (EOT) | EOT 글꼴은 Microsoft에서 웹 페이지의 포함 글꼴로 사용하기 위해 디자인 한 OpenType 글꼴의 간결한 형식입니다. |
웹 글꼴을 사용하기 위해서는 먼저 @font-face로 정의하고 font-family 속성을 사용하여 지정합니다.
| 속성 | 값 | 설명 |
|---|---|---|
| font-family | name | (필수) 사용자 정의 지정 글꼴 이름 |
| src | URL, local |
(필수) 글꼴의 경로와 파일명 여러값 입력시,로 구분 |
| font-weight |
|
(선택) 글꼴의 두께 기본값: normal |
| font-style |
|
(선택) 글꼴의 모양 기본값: normal |
| font-stretch |
|
(선택) 글꼴을 확장하는 방법을 정의 기본값: normal |
| unicode-range | unicode-range | (선택) 글꼴이 지원하는 유니코드 문자의 범위 기본값: U+0-10FFFF |