Bert Boscreato il 17 Jan 2001;
ultimo aggiornamento: vedi documento originale
it
Home tutorial in Italiano;
Originale di questa pagina;
Traduzione di ratoize,
consulenza lingua Inglese: English Conversation;
Ultimo aggiornamento traduzione: 30 Mag 2008;
(This page uses CSS style sheets)
Dopo il colore, il font è probabilmente la più; fondamentale delle proprietà; di una pagina. In questa pagina non mostrerò; alcun "trucco" ma mostrerò; l'intervallo di variazione dei font che il CSS permette.
Poichè non tutti i font sono disponibili su tutti i computer (ci sono migliaia di font, e la maggior parte non gratuiti), il CSS fornisce un sistema di fallback. Prima si elencano i font desiderati, poi qualunque font che potrebbe sostituire il primo quando non disponibile, e si dovrebbe finire la lista con un font generico, dei quali ce ne sono cinque: serif, sans-serif, monospace, cursive and fantasy.
La seguente tabella mostra degli esempi di vari font (il browser potrebbe non riconoscerli tutti) e si può; vedere cosa il vostro browser fa con i cinque font generici:
| '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 |
La maggior parte dei font hanno vari stili all'interno della stessa famiglia, tipicamente il grassetto e il corsivo, spesso anche il corsivo in grassetto, un po' meno spesso lo small-caps e in pochi casi gli stili extra-light/extra-bold oppure stretched/condensed.
La tabella sotto mostra un numero di stili differenti. A meno che non si abbia una ricca collezione di font, molte delle righe saranno le stesse.
| 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… | |||
Nel CSS3, c'è disponibile uno stile in piu: 'font-effect' fa sembrare le lettere incise o in rilievo.