Dokument http://www.innerviewme.com/007/fonts.html, je prijevod i može sadržati pogreške. Originalni službeni dokument može se vidjeti na https://www.w3.org/Style/Examples/007/fonts.html. Pogreške možete prijaviti na moj e-mail matthewjon75@yahoo.com. |
(This page uses CSS style sheets)
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 |
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… | 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… |
U CSS3 na raspolaganju je još jedan stil: «font-effect» daje slovima reljefni ili gravirani izgled.