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