Уеб Стыле Схеетс
CSS типс & Трицкс

Фонт породице

Након што је боја, фонт је вероватно најосновнијих власништво страници. На овој страници нећу показивати никакве "трикова", али показаћемо ћу распон варијације које фонт CSS дозвољава.

Будући да нису сви фонтови су доступни на свим рачунарима (ту су хиљаде слова, а већина нису бесплатни), CSS пружа систем фаллбацкс. Те листе фонта који желите први, затим било које фонтове да би могли испунити за прво ако је недоступна, а требали крају листе са генеричке фонта, од којих постоји пет: serif, sans-serif, monospace, cursive и fantasy.

Следећа табела приказује примере разним фонтовима (мај ваш броусер не знам их све), а можете да видите шта ваш броусер не са сваком од пет генеричке оне:

'sans-serif': нормалне фонтове без серифс
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': нормалне фонтове са серифс
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': фиксне ширине фонтови
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': фонтове да имитирати рукопис
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': украсни фонтови, за наслове, итд
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

Фонт стилова

Већина фонтови имају различите стилове унутар исте породице, обично једном задебљано и курзив један, често и болд италиц стил, нешто ређе мали верзал а у неким случајевима екстра-лигхт/екстра-болд или притегнути / згуснута верзија.

Доња табела приказује неколико различитих стилова. Осим ако имају врло богату збирку слова, многи од реда ће бити исти.

правила	serif	sans-serif
Стилови
font-style: normal	The Quick…	The Quick…
font-style: italic	The Quick…	The Quick…
font-style: oblique	The Quick…	The Quick…
Тежине
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…
Верзије
font-variant: normal	The Quick…	The Quick…
font-variant: small-caps	The Quick…	The Quick…
Стретцх
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…	The Quick…
font-stretch: normal	The Quick…	The Quick…
font-stretch: semi-expanded	The Quick…	The Quick…
font-stretch: expanded	The Quick…	The Quick…
font-stretch: extra-expanded	The Quick…	The Quick…
font-stretch: ultra-expanded	The Quick…	The Quick…

У CSS3, постоји још један начин доступан: "фонт-ефекат 'чини словима уклесане или рељефни изглед.

CSS ресурси

• Colors Style Sheet
• CSS Page Loading Times
• CSS Navigational Headings
• CSS tutorial
• CSS Background properties
• Creating Menus with CSS
• Style sheets for handheld devices