Czcionki internetowe CSS
Reguła CSS @font-face
Czcionki internetowe umożliwiają projektantom witryn internetowych używanie czcionek, które nie są zainstalowane na komputerze użytkownika.
Po znalezieniu/kupieniu czcionki, której chcesz użyć, po prostu dołącz plik czcionki na swoim serwerze sieciowym, a zostanie on automatycznie pobrany dla użytkownika w razie potrzeby.
@font-faceTwoje „własne” czcionki są zdefiniowane w regule CSS .
Różne formaty czcionek
Czcionki TrueType (TTF)
TrueType to standard czcionek opracowany pod koniec lat 80. przez Apple i Microsoft. TrueType to najpopularniejszy format czcionki dla systemów operacyjnych Mac OS i Microsoft Windows.
Czcionki OpenType (OTF)
OpenType to format skalowalnych czcionek komputerowych. Został zbudowany na TrueType i jest zastrzeżonym znakiem towarowym firmy Microsoft. Czcionki OpenType są obecnie powszechnie używane na głównych platformach komputerowych.
Web Open Font Format (WOFF)
WOFF to format czcionki do użytku na stronach internetowych. Został opracowany w 2009 roku i jest obecnie rekomendacją W3C. WOFF to zasadniczo OpenType lub TrueType z kompresją i dodatkowymi metadanymi. Celem jest obsługa dystrybucji czcionek z serwera do klienta przez sieć z ograniczeniami przepustowości.
Otwarty format czcionki internetowej (WOFF 2.0)
Czcionka TrueType/OpenType, która zapewnia lepszą kompresję niż WOFF 1.0.
Czcionki/kształty SVG
Czcionki SVG umożliwiają używanie SVG jako glifów podczas wyświetlania tekstu. Specyfikacja SVG 1.1 definiuje moduł czcionek, który umożliwia tworzenie czcionek w dokumencie SVG. Możesz również zastosować CSS do dokumentów SVG, a regułę @font-face można zastosować do tekstu w dokumentach SVG.
Osadzone czcionki OpenType (EOT)
Czcionki EOT to kompaktowa forma czcionek OpenType zaprojektowana przez firmę Microsoft do użytku jako czcionki osadzone na stronach internetowych.
Obsługa przeglądarek dla formatów czcionek
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje format czcionki.
| Font format | |||||
|---|---|---|---|---|---|
| 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 | Not supported | Not supported | Not supported | 3.2 | Not supported |
| EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
*IE: format czcionki działa tylko wtedy, gdy jest ustawiony jako „instalowalny”.
Korzystanie z wybranej czcionki
W @font-faceregule; najpierw zdefiniuj nazwę czcionki (np. myFirstFont), a następnie wskaż plik czcionki.
Wskazówka: w adresie URL czcionki zawsze używaj małych liter. Wielkie litery mogą dać nieoczekiwane wyniki w IE.
Aby użyć czcionki dla elementu HTML, odwołaj się do nazwy czcionki (myFirstFont) poprzez font-familywłaściwość:
Przykład
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Używanie pogrubionego tekstu
Musisz dodać kolejną @font-faceregułę zawierającą deskryptory dla pogrubionego tekstu:
Przykład
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Plik „sansation_bold.woff” to kolejny plik czcionek, który zawiera pogrubione znaki dla czcionki Sansation.
Przeglądarki będą używać tego, gdy fragment tekstu z rodziną czcionek „myFirstFont” powinien zostać wyświetlony jako pogrubiony.
W ten sposób możesz mieć wiele @font-facereguł dla tej samej czcionki.
Deskryptory czcionek CSS
W poniższej tabeli wymieniono wszystkie deskryptory czcionek, które można zdefiniować w @font-faceregule:
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |