Języki

Niniejszy dokument jest tłumaczeniem, które może zawierać błędy, lub który mógł się zdeaktualizować w stosunku do wersji angielskiej. Wykonane przez: Emil Sierżęga

Web Style Sheets CSS tips & tricks

Zobacz także indeks wszystkich porad.

Na tej stronie:

Rodziny czcionek

Czcionka, zaraz po kolorze, jest prawdopodobnie najbardziej podstawową właściwością strony. W tym artykule nie pokażę żadnych "sztuczek", ale przedstawię jaki zakres wykorzystania czcionek umożliwia CSS.

Ponieważ nie wszystkie czcionki są dostępne na każdym komputerze (istnieją setki tysięcy czcionek i spora część z nich nie jest darmowa), CSS zapewnia system "awaryjny" (ang. fallback). Na początku wymieniasz czcionki, których chcesz używać, a później czcionki, których chciałbyś/chciałabyś użyć zamiast nich, jeśli te pierwsze nie są dostępne. Taka lista powinna być zakończona tzw. czcionką rodzajową (albo generyczną, ang. generic font), których jest pięć: serif, sans-serif, monospace, cursive oraz fantasy.

Poniższa tabela pokazuje przykłady różnych czcionek (Twoja przeglądarka może nie posiadać niektórych z nich). Możesz sprawdzić jak Twoja przeglądarka obsługuje każdy z typów rodzajowych.

Font family Your browser Sample image
'sans-serif': normalne czcionki szeryfowe
Arial, sans-serif Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
Helvetica, sans-serif Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
Verdana, sans-serif Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
Trebuchet MS, sans-serif Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
Gill Sans, sans-serif Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
Noto Sans, sans-serif Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
Arial Narrow, sans-serif Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
sans-serif Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
'serif': normalne czcionki bezszeryfowe
Times, Times New Roman, serif Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
Didot, serif Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
Georgia, serif Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
Palatino, URW Palladio L, serif Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
Bookman, URW Bookman L, serif Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
New Century Schoolbook, TeX Gyre Schola, serif Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
American Typewriter, serif Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
serif Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
'monospace': czcionki o stałej szerokości
Andale Mono, monospace Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
Courier New, monospace Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
Courier, monospace Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
FreeMono, monospace Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
OCR A Std, monospace Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
DejaVu Sans Mono, monospace Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
monospace Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
'cursive': czcionki, który symulują pismo odręczne
Comic Sans MS, Comic Sans, cursive Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
Apple Chancery, cursive Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
Bradley Hand, cursive Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
Brush Script MT, Brush Script Std, cursive Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
Snell Roundhand, cursive Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
URW Chancery L, cursive Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
cursive Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
'fantasy': ozdobne czcionki, dobre dla tytułów, itd.
Impact, fantasy Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
Luminari, fantasy Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
Jazz LET, fantasy Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
Marker Felt, fantasy Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
Trattatello, fantasy Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem
fantasy Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem

Style czcionek

Większość czcionek posiada zróżnicowane style pośród tej samej rodziny, zazwyczaj pogrubioną i pochyłą, często również połączenie tych dwóch rodzajów, trochę rzadziej spotkać można małe kapitaliki i w niektórych przypadkach także wersje supercienkie/superpogrubione oraz rozciągnięte i zagęszczone.

Tabela przedstawiona poniżej pokazuje wiele różnych stylów. Jeśli nie posiadasz bardzo bogatej kolekcji czcionek, to wiele z tych wierszy będzie wyglądać tak samo.

Reguła serif sans-serif
Style
font-style: normal Szybki… Szybki…
font-style: italic Szybki… Szybki…
font-style: oblique Szybki… Szybki…
Wagi
font-weight: 100 Szybki… Szybki…
font-weight: 200 Szybki… Szybki…
font-weight: 300 Szybki… Szybki…
font-weight: normal Szybki… Szybki…
font-weight: 500 Szybki… Szybki…
font-weight: 600 Szybki… Szybki…
font-weight: bold Szybki… Szybki…
font-weight: 800 Szybki… Szybki…
font-weight: 900 Szybki… Szybki…
Odmiany
font-variant: normal Szybki… Szybki…
font-variant: small-caps Szybki… Szybki…
Rozciągnięcie
font-stretch: ultra-condensed Szybki… Szybki…
font-stretch: extra-condensed Szybki… Szybki…
font-stretch: condensed Szybki… Szybki…
font-stretch: semi-condensed Szybki… Szybki…
font-stretch: normal Szybki… Szybki…
font-stretch: semi-expanded Szybki… Szybki…
font-stretch: expanded Szybki… Szybki…
font-stretch: extra-expanded Szybki… Szybki…
font-stretch: ultra-expanded Szybki… Szybki…
Bert Bos, Prowadzący dział CSS
Prawa autorskie © 1994–2017 W3C®

Utworzono 17 Sty 2001;
Ostatnia aktualizacja czw, 9 lis 2017, 04:40:59

Języki

O tłumaczeniach