CSS 웹 글꼴
- 이전 페이지 CSS 텍스트 효과
- 다음 페이지 CSS 2D 변환
CSS @font-face 규칙
웹 글꼴은 웹 디자이너가 사용자 컴퓨터에 설치되지 않은 글꼴을 사용할 수 있게 합니다.
귀하가 사용하고자 하는 글꼴을 찾았다거나 구매했을 때, 단순히 웹 서버에 글꼴 파일을 포함하면 필요할 때마다 사용자에게 자동으로 다운로드됩니다.
귀하의 '자유' 글꼴은 CSS @font-face 규칙에서 정의됩니다.
다른 글꼴 형식
TrueType 글꼴 (TTF)
TrueType는 1980년대 후반에 Apple과 Microsoft이 개발한 글꼴 표준입니다. TrueType는 Mac OS와 Microsoft Windows 운영 체제에서 가장 많이 사용되는 글꼴 형식입니다.
OpenType 글꼴 (OTF)
OpenType는 확장 가능한 컴퓨터 글꼴 형식입니다. TrueType를 기반으로 하며, Microsoft의 등록 상표입니다. 현재 OpenType 글꼴은 주요 컴퓨터 플랫폼에서 널리 사용되고 있습니다.
웹 오픈 글꼴 형식 (WOFF)
WOFF는 웹을 위한 글꼴 형식입니다. 2009년에 개발되었으며, 현재 W3C의 권장 표준이 되었습니다. WOFF는 압축과 기타 메타데이터를 포함한 OpenType 또는 TrueType입니다. 목표는 네트워크 bandwith 제한된 환경에서 서버에서 클라이언트로 글꼴 배포를 지원하는 것입니다.
웹 오픈 글꼴 형식 (WOFF 2.0)
TrueType/OpenType 글꼴은 WOFF 1.0보다 더 좋은 압축을 제공합니다.
SVG 글꼴/형상
SVG 字체는 텍스트 표시 시 SVG를 글꼴로 사용할 수 있습니다. SVG 1.1 규범은 글꼴 모듈을 정의하며, SVG 문서에서 글꼴을 생성할 수 있습니다. 또한 CSS를 SVG 문서에 적용할 수 있으며, @font-face 규칙도 SVG 문서의 텍스트에 적용할 수 있습니다.
嵌入式 OpenType 字체 (EOT)
EOT 字体是 Microsoft 设计的 OpenType 字体的紧凑形式，用作网页上的嵌入式字体。
对字体格式的浏览器支持
表格中的数字注明了完全支持该字体格式的首个浏览器版本。
| 字体格式 | |||||
| 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 | 不支持 | 不支持 | 不支持 | 不支持 |
*IE：该字体格式仅在设置为 "installable" 时有效。
*Firefox：默认情况下不支持，但可以启用（需要将标志设置为 "true" 才能使用 WOFF2）。
使用您需要的字体
在 @font-face 规则中：首先定义字体的名称（例如 myFirstFont），然后指向该字体文件。
提示：字体 URL 始终使用小写字母。大写字母可能会在 IE 中产生意外结果。
如需将字体用于 HTML 元素，请通过 font-family 属性引用字体名称（myFirstFont）：
实例
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
使用粗体文本
您必须添加另一条 @font-face 规则，其中包含粗体文本的描述符：
实例
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
文件 "sansation_bold.woff" 是另一个字体文件，其中包含 Sansation 字体的粗体字符。
每当带有 "myFirstFont" 字体族的一段文本应呈现粗体时，浏览器都会使用它。
这样，您就可以为同一字体设置许多 @font-face 规则。
CSS 字体描述
下表列出了能够在 @font-face 规则内定义的所有字体描述符（font descriptor）：
| 描述符 | 值 | 描述 |
|---|---|---|
| font-family | name | 必需。定义字体名称。 |
| src | URL | 必需。定义字体文件的 URL。 |
| font-stretch |
|
선택 사항입니다. 글꼴을 어떻게 늘리는지 정의합니다. 기본 값은 "normal"입니다. |
| font-style |
|
선택 사항입니다. 글꼴의 스타일을 정의합니다. 기본 값은 "normal"입니다. |
| font-weight |
|
선택 사항입니다. 글꼴의 두께를 정의합니다. 기본 값은 "normal"입니다. |
| unicode-range | unicode-range | 선택 사항입니다. 글꼴이 지원하는 UNICODE 문자 범위를 정의합니다. 기본 값은 "U+0-10FFFF"입니다. |
- 이전 페이지 CSS 텍스트 효과
- 다음 페이지 CSS 2D 변환
