Web Style Sheet
CCS savjeti i trikovi

Vrste fontova

Posle boja, fontovi su vjerojatno najosnovnije svojstvo stranice. Na ovoj stranici neću pokazati nikakve trikove, već ću pokazati opseg varijacija fontova koje CSS dozvoljava

Kako nisu svi fontovi raspoloživi na svim računalima (postoje tisuće fontova i većina ih nije besplatna), CSS obezbjedjuje sistem uzmicanja. Prvo navedete font koji prvo želite, zatim fontove koji će poslužiti kao zamjena ako prvi nije dostupan, a listu trebate završiti sa generičkim fontom, serif, sans-serif, monospace, cursive i fantasy.

Slijedeća tabela pokazuje primjere raznih fontova (vaš ih preglednik možda ne prepoznaje sve) i možete vidjeti što vaš preglednik radi sa svakim od pet generičnih fontova:

'sans-serif': normal fonts without serifs
Arial, sans-serif	The Quick Brown Fox Jumps Over The Lazy Dog
Helvetica, sans-serif	The Quick Brown Fox Jumps Over The Lazy Dog
Gill Sans, sans-serif	The Quick Brown Fox Jumps Over The Lazy Dog
Lucida, sans-serif	The Quick Brown Fox Jumps Over The Lazy Dog
Helvetica Narrow, sans-serif	The Quick Brown Fox Jumps Over The Lazy Dog
sans-serif	The Quick Brown Fox Jumps Over The Lazy Dog
'serif': normal fonts with serifs
Times, serif	The Quick Brown Fox Jumps Over The Lazy Dog
Times New Roman, serif	The Quick Brown Fox Jumps Over The Lazy Dog
Palatino, serif	The Quick Brown Fox Jumps Over The Lazy Dog
Bookman, serif	The Quick Brown Fox Jumps Over The Lazy Dog
New Century Schoolbook, serif	The Quick Brown Fox Jumps Over The Lazy Dog
serif	The Quick Brown Fox Jumps Over The Lazy Dog
'monospace': fixed-width fonts
Andale Mono, monospace	The Quick Brown Fox Jumps Over The Lazy Dog
Courier New, monospace	The Quick Brown Fox Jumps Over The Lazy Dog
Courier, monospace	The Quick Brown Fox Jumps Over The Lazy Dog
Lucidatypewriter, monospace	The Quick Brown Fox Jumps Over The Lazy Dog
Fixed, monospace	The Quick Brown Fox Jumps Over The Lazy Dog
monospace	The Quick Brown Fox Jumps Over The Lazy Dog
'cursive': fonts that emulate handwriting
Comic Sans, Comic Sans MS, cursive	The Quick Brown Fox Jumps Over The Lazy Dog
Zapf Chancery, cursive	The Quick Brown Fox Jumps Over The Lazy Dog
Coronetscript, cursive	The Quick Brown Fox Jumps Over The Lazy Dog
Florence, cursive	The Quick Brown Fox Jumps Over The Lazy Dog
Parkavenue, cursive	The Quick Brown Fox Jumps Over The Lazy Dog
cursive	The Quick Brown Fox Jumps Over The Lazy Dog
'fantasy': decorative fonts, for titles, etc.
Impact, fantasy	The Quick Brown Fox Jumps Over The Lazy Dog
Arnoldboecklin, fantasy	The Quick Brown Fox Jumps Over The Lazy Dog
Oldtown, fantasy	The Quick Brown Fox Jumps Over The Lazy Dog
Blippo, fantasy	The Quick Brown Fox Jumps Over The Lazy Dog
Brushstroke, fantasy	The Quick Brown Fox Jumps Over The Lazy Dog
fantasy	The Quick Brown Fox Jumps Over The Lazy Dog

Stilovi fontova

Većina fontova iste vrste ima različite stilove, u pravilu podebljane i kurzivne (ukošene), često i podebljane i ukošene, nešto ređe male verzalne i u nekim slučajevima dodatno tanke / dodatno podebljane ili rastegnute/zgusnute verzije.

Donja tabela pokazuje niz raznih stilova. Mnogi od redaka bit će isti, osim ako imate vrlo bogatu zbirku fontova.

rule	serif	sans-serif
Styles
font-style: normal	The Quick…	The Quick…
font-style: italic	The Quick…	The Quick…
font-style: oblique	The Quick…	The Quick…
Weights
font-weight: 100	The Quick…	The Quick…
font-weight: 200	The Quick…	The Quick…
font-weight: 300	The Quick…	The Quick…
font-weight: normal	The Quick…	The Quick…
font-weight: 500	The Quick…	The Quick…
font-weight: 600	The Quick…	The Quick…
font-weight: bold	The Quick…	The Quick…
font-weight: 800	The Quick…	The Quick…
font-weight: 900	The Quick…	The Quick…
Variants
font-variant: normal	The Quick…	The Quick…
font-variant: small-caps	The Quick…	The Quick…
Stretch
font-stretch: ultra-condensed	The Quick…	The Quick…
font-stretch: extra-condensed	The Quick…	The Quick…
font-stretch: condensed	The Quick…	The Quick…
font-stretch: semi-condensed	The Quick…