Najnowsze tutoriale tworzenie stron internetowych
 

CSS Czcionki sieci


Z CSS3, projektanci stron internetowych nie są już zmuszeni do korzystania tylko web-safe czcionek

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.

Uwaga 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ń!

Ćwiczenie 1 » Ćwiczenie 2»


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-familyname Wymagany. Określa nazwę czcionki
srcURL Wymagany. Określa adres URL pliku czcionki
font-stretchnormal
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-stylenormal
italic
oblique
Opcjonalny. Definiuje jak czcionka powinna być stylizowany. Domyślnie jest to "normalne"
font-weightnormal
bold
100
200
300
400
500
600
700
800
900
Opcjonalny. Definiuje śmiałość czcionki. Domyślnie jest to "normalne"
unicode-rangeunicode-range Opcjonalny. Definiuje zakres znaków UNICODE czcionka obsługuje. Domyślnie jest "U + 0-10FFFF"