> 
- Home Page
- > Tutorial CSS
- > Proprietà CSS dello sfondo
Consentono di cambiare la famiglia di caratteri, la dimensione, impostare lo stile dei font ed altro.
Proprietà CSS dei font
Definiscono il carattere nel testo.
CSS Fonts
Consentono di cambiare la famiglia di caratteri, la dimensione ed altro.
| Proprieta | Descrizione | Valori possibili | Esempi |
|---|---|---|---|
| font | Consente di impostare tutte le proprietà del carattere in una sola dichiarazione, è comodo ma poco leggibile. | ||
| font-family | Per specificare uno o più font per l'elemento che si vuole caratterizzare. | Nome del font | |
| font-size | Imposta la dimensione del carattere. E' possibile specificare una lunghezza oppure una classe di dimensione. | smaller xx-small x-small small medium large x-large xx-largelarger lunghezza percentuale |
|
| font-size-adjust | Preserva l’altezza del carattere. | none numero |
|
| font-stretch | Condensa o espande un font. | normal narrower wider expanded semi-expanded extra-expanded condensed ultra-expanded semi-condensed ultra-condensed extra-condensed |
|
| font-style | Imposta lo stile (corsivo, obliquo oppure noemale) | normal italic oblique |
|
| font-variant | Mostra il carattere normale o maiuscoletto | normal small-caps |
|
| font-weight | Grassetto. Possiamo dare dei valori per gradazione di grassetto utilizzando un intervallo da 100 a 900 (con incrementi di 100) | normal lighter bold bolder 100-900 |
font
Consente di impostare tutte le proprietà del carattere in una sola dichiarazione, è comodo ma poco leggibile.
Esempio
span {
font: small-caps italic bold verdana 12px ultra-condensed;
}
Vedremo in seguito il dettaglio sui valori utilizzati. ¤ Clicca qui per visualizzare la demo dell'esempio... ¤
font-family
Fornisce una lista caratteri, i cui elementi sono separati da virgole, per gli oggetti della pagina.
Possiamo iserire dei nomi di font come "verdana, "arial", etc.
Esempio
span {
font-family: verdana, courier
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ font-size
Imposta la dimensione del carattere.
Valori possibili sono:
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller
- larger
- valore in lunghezza o percentuale
Esempio
span {
font-size: 11px;
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤
font-size-adjust
La proprietà font-size-adjust, specifica un aspect value (il rapporto tra l’altezza della "x" minuscola e l’altezza del "font-size")
E' supportato solo dai browser basati su geko .
Valori possibili sono:
- none
- un numero
span {
font-size-adjust: 0.62
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤
font-stretch
Condensa o espande il font.
Valori possibili sono:
- normal
- wider
- narrower
- condensed
- ultra-condensed
- extra-condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
span {
font-stretch: ultra-condensed
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤
font-style
Imposta lo stile del carattere.
Valori possibili sono:
- normal
- italic (corsivo)
- oblique (obliquo)
Esempio
span {
font-style: italic
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ font-variant
Il testo a cui applico lo stile viene stampato in maiuscoletto.
Valori possibili sono
- normal
- small-caps (Maiuscoletto)
Esempipo
span {
font-variant: small-caps
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤ font-weight
Il testo a cui applico lo stile viene stampato in grassetto.
Valori possibili sono:
- normal
- lighter (Più grassetto)
- bold (Grassetto)
- bolder (Più grassetto)
- valori da 100-900 (Variazioni di grassetto)
Esempio
span {
font-weight: bolder
}
¤ Clicca qui per visualizzare la demo dell'esempio... ¤
