logo-tworzenie-stron-legnica

config

Style CSS

Spis alfabetyczny stylów CSS.

Ściąga CSS - przykłady, style CSS alfabetycznie, spis stylów CSS, właściwości CSS, skorowidz stylów CSS.


 

Strona w trakcie modernizacji

Zapraszamy wkrótce

Właściwość CSS @font-face

Definicja stylu, przeznaczenie i użycie @font-face

Dzięki zasadzie @font-face projektanci stron internetowych nie muszą już używać jedynie tzw. bezpiecznych czcionek web.

W regule @font-face trzeba najpierw zdefiniować nazwę czcionki, a następnie wskazać adres pliku czcionki.

Aby użyć własnej czcionki na stronie dla elementu HTML, odnieś się do tej czcionki za pomocą właściwości font-family:

font-family: NazwaCzcionki;

Wartości właściwości @font-face

Deskryptor czcionki Wartość Opis
font-family name Wymagany. Określa nazwę czcionki.
src URL Wymagany. Określa adresy URL, z których powinna zostać pobrana czcionka.
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
Opcjonalnie. Określa, w jaki sposób należy rozciągnąć czcionkę. Wartość domyślna to normal.
font-style normal
italic
oblique
Opcjonalnie. Określa styl czcionki. Wartość domyślna to normal.
font-weight normal
bold
100
200
300
400
500
600
700
800
900
Opcjonalnie. Określa pogrubienie czcionki. Wartość domyślna to normal.
unicode-range unicode-range (zakres unicode) Opcjonalnie. Określa zakres znaków Unicode obsługiwanych przez czcionkę. Wartość domyślna to U+0-10FFFF

Składnia CSS @font-face

@font-face {
font-properties (właściwości czcionek)
}

Wsparcie przeglądarek dla właściwości @font-face

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Format czcionki chrome edge firefox safari opera
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 Nieobsługiwany Nieobsługiwany Nieobsługiwany 3.2 Nieobsługiwany
EOT 6.0 Nieobsługiwany Nieobsługiwany Nieobsługiwany Nieobsługiwany

* Format czcionki działa tylko wtedy, gdy jest ustawiony jako installable.

Przykładowe zastosowania właściwości @font-face

@font-face {
font-family: NazwaCzionki;
src: url(AdresCzcionki.woff);
font-weight: bold;
}

 

Witold Czuba Tworzenie stron Warszawa, Wrocław i Legnica | Grafik | Strony , , Marynarska 54, 59-220, Legnica, dolnośląskie, Polska, tel. +48 780 060 995, Pon. - pt. 8:00 - 17:00

 

 

Witold Czuba

Tworzenie stron Warszawa, Wrocław i Legnica | Grafik | Strony

Marynarska 54
59-220, Legnica,
dolnośląskie, Polska,
tel. +48 780 060 995,
Pon. - pt. 8:00 - 17:00