CSS Webowe czcionki
- Poprzednia Strona Efekty tekstu CSS
- Następna Strona CSS 2D Przekształcenia
Reguła @font-face w CSS
Webowe czcionki pozwalają projektantom stron internetowych używać czcionek, które nie są zainstalowane na komputerze użytkownika.
Po znalezieniu/kupieniu czcionki, którą chcesz użyć, wystarczy, że umieścisz plik czcionki na swoim serwerze internetowym, a użytkownik automatycznie pobierze go, gdy będzie go potrzebował.
Twoje „własne” czcionki w CSS @font-face są definiowane w regułach.
Różne formaty czcionek
Czcionki TrueType (TTF)
TrueType to standard czcionek opracowany przez Apple i Microsoft w późnych latach 80. XX wieku. TrueType jest najczęściej używanym formatem czcionek w systemach operacyjnych Mac OS i Microsoft Windows.
Czcionki OpenType (OTF)
OpenType to format skalowalnych czcionek komputerowych. Jest oparty na TrueType i jest zarejestrowanym znakiem towarowym Microsoftu. Dziś, czcionki OpenType są powszechnie używane na głównych platformach komputerowych.
Web Open Font Format (WOFF)
WOFF to format czcionek dla stron internetowych. Został opracowany w 2009 roku i jest zalecanym standardem W3C. WOFF jest w istocie skompresowanym OpenType lub TrueType z dodatkowymi metadанными. Celem jest wsparcie dla dystrybucji czcionek z serwera do klienta w sieciach o ograniczonych przepustowości.
Web Open Font Format (WOFF 2.0)
Czcionki TrueType/OpenType oferują lepsze kompresję niż WOFF 1.0.
Czcionki/kształty SVG
Czcionki SVG pozwalają używać SVG jako czcionek do wyświetlania tekstu. Specyfikacja SVG 1.1 definiuje moduł czcionek, który pozwala na tworzenie czcionek w dokumentach SVG. Możesz również zastosować CSS do dokumentów SVG, a reguła @font-face może być używana do tekstu w dokumentach SVG.
Wbudowane czcionki 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 |
|
Opcjonalnie. Definiuje, jak czcionka powinna być rozciągnięta. Domyślna wartość to "normal". |
| font-style |
|
Opcjonalnie. Definiuje styl czcionki. Domyślna wartość to "normal". |
| font-weight |
|
Opcjonalnie. Definiuje grubość czcionki. Domyślna wartość to "normal". |
| unicode-range | unicode-range | Opcjonalnie. Definiuje zakres znaków UNICODE wspieranych przez czcionkę. Domyślna wartość to "U+0-10FFFF". |
- Poprzednia Strona Efekty tekstu CSS
- Następna Strona CSS 2D Przekształcenia
