CSS3 Web Fonts - The @font-face Rule
Czcionki internetowe pozwalają projektantom sieci użycie czcionek, które nie są zainstalowane na komputerze użytkownika.
Po znalezieniu / kupił czcionkę, której chcesz użyć, wystarczy dołączyć plik czcionki na serwerze WWW, a zostanie ona automatycznie pobrana do użytkownika w razie potrzeby.
Twoje "własne" fonty są zdefiniowane w CSS3 @font-face reguły.
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| @font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Różnych formatów czcionek
TrueType Fonts (TTF)
TrueType jest czcionka standardowa opracowane pod koniec 1980 roku przez firmę Apple i Microsoft. TrueType jest najbardziej popularny format czcionki w systemach operacyjnych Mac OS i Microsoft Windows.
OpenType Czcionki (OTF)
OpenType to format dla skalowalnych czcionek komputerowych. Został on zbudowany na TrueType i jest zarejestrowanym znakiem towarowym firmy Microsoft. OpenType czcionki są używane powszechnie dziś na głównych platform komputerowych.
Format Web Open Font (WOFF)
WOFF to format czcionki do wykorzystania na stronach internetowych. Został on opracowany w 2009 roku, a obecnie jest rekomendacją W3C. WOFF jest zasadniczo OpenType i TrueType z kompresją i dodatkowe metadane. Celem jest wsparcie dystrybucji czcionki z serwera do klienta za pośrednictwem sieci z ograniczeniami przepustowości.
Format Web Open Font (WOFF 2.0)
TrueType/OpenType font, który zapewnia lepszą kompresję niż WOFF 1.0.
SVG Czcionki / Kształty
SVG czcionek pozwalają SVG być stosowany jako glifów przy wyświetlaniu tekstu. SVG 1.1 specyfikacji zdefiniować moduł czcionek, który umożliwia tworzenie czcionek w dokumencie SVG. Można także zastosować CSS do dokumentów SVG, a @font-face regułę można zastosować do tekstu w dokumentach SVG.
Wbudowane OpenType Czcionki (EOT)
Czcionki EOT to kompaktowa forma OpenType czcionek zaprojektowane przez Microsoft do wykorzystania jako czcionek osadzonych na stronach internetowych.
Wsparcie dla formatów czcionek Przeglądarka
Liczby w tabeli określa pierwszą wersję przeglądarki, który w pełni obsługuje format czcionki.
| Format czcionki | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9,0 * | 4,0 | 3,5 | 3,1 | 10,0 |
| WOFF | 9,0 | 5,0 | 3,6 | 5,1 | 11,1 |
| WOFF2 | Nieobsługiwany | 36,0 | 35.0 * | Nieobsługiwany | 26,0 |
| SVG | Nieobsługiwany | 4,0 | Nieobsługiwany | 3,2 | 9,0 |
| EOT | 6,0 | Nieobsługiwany | Nieobsługiwany | Nieobsługiwany | Nieobsługiwany |
* IE: format czcionki działa tylko wtedy, gdy ustawiony jest "zainstalowania".
* Firefox: Nie obsługiwane domyślnie, ale można włączyć (trzeba ustawić flagę na "true", by użyć WOFF2).
Korzystanie żądaną czcionkę
W CSS3 @font-face reguły trzeba najpierw zdefiniować nazwę czcionki (np myFirstFont ), a następnie wskazać plik czcionki.
 | Wskazówka: Zawsze należy używać małych liter w adresie URL czcionki. Wielkie litery może dać nieoczekiwane rezultaty w IE. |
|---|
Aby użyć czcionki dla danego elementu HTML, odnoszą się do nazwy fontu ( myFirstFont ) poprzez font-family nieruchomości:
Przykład
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Spróbuj sam " Korzystanie pogrubioną czcionką
Należy dodać kolejną @font-face regułę zawierającą deskryptory pogrubioną czcionką:
Przykład
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Spróbuj sam " Plik "sansation_bold.woff" to kolejny plik czcionki, która zawiera pogrubienie znaków dla czcionki Sansation.
Przeglądarki użyje tego kiedy fragment tekstu z font-family " myFirstFont " należy uczynić jako pogrubione.
W ten sposób można mieć wiele @font-face zasady samej czcionki.
Sprawdź się z ćwiczeń!
CSS3 Descriptors Font
Poniższa tabela zawiera listę wszystkich deskryptorów czcionek, które mogą być zdefiniowane wewnątrz @font-face zasady:
| deskryptor | wartości | Opis |
|---|---|---|
| font-family | name | Wymagany. Określa nazwę czcionki |
| src | URL | Wymagany. Określa adres URL pliku czcionki |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | Opcjonalny. Definiuje jak czcionka powinna być rozciągnięta. Domyślnie jest to "normalne" |
| font-style | normal italic oblique | Opcjonalny. Definiuje jak czcionka powinna być stylizowany. Domyślnie jest to "normalne" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | Opcjonalny. Definiuje śmiałość czcionki. Domyślnie jest to "normalne" |
| unicode-range | unicode-range | Opcjonalny. Definiuje zakres znaków UNICODE czcionka obsługuje. Domyślnie jest "U + 0-10FFFF" |