Home > Proprietà CSS2 > Proprietà per i caratteri
Tabella riassuntiva e descrittiva delle funzionalità, valori e supporto dei browser relativa alla specifiche dei CSS2 per la gestione dei caratteri.
Proprietà | Valori | IE | NN | MF |
---|---|---|---|---|
font |
font-style |
4.0 | 4.0 | 1.0 |
font-family |
<famiglia-caratteri> |
3.0 | 4.0 | 1.0 |
font-size |
x-small % |
3.0 | 4.0 | 1.0 |
font-style |
normal |
4.0 | 4.0 | 1.0 |
font-variant |
normal |
4.0 | 6.0 | 1.0 |
font-weight |
normal |
4.0 | 4.0 | 1.0 |
Esempi dimostrativi delle funzionalità di alcune proprietà per i caratteri:
font
La proprietà font
è una proprietà a sintassi abbreviata con cui si può definire sinteticamente e con una sola dichiarazione:
font-style;
font-variant;
font-weight;
font-size;
font-family.
La proprietà font
permette di impostare anche l'interlinea. Tutte le proprietà che non vengono specificate assumono implicitamente il valore normal
.
body{ font: italic bold 1.5em Arial, Helvetica, Sans-serif; }
In questo esempio il carattere dell'elemento body
è impostato in Arial, Helvetica, San-serif
in corsivo (italic
) e grassetto (bold
) e con dimensione 1.5em
.
font-family
La proprietà font-family
accetta più tipi di caratteri, separati da una virgola, per consentire scelte alternative qualora il carattere scelto non fosse disponibile per il programma utente.
L'ultimo valore dovrebbe essere sempre una famiglia generica, così da ottenere comunque un carattere il più possibile simile a quello prescelto.
Le principali famiglie generiche sono:
serif
sans-serif;
monospaced
.body{ font-family: courier, serif; }
font-size
La proprietà font-size
consente di impostare la dimensione del carattere.
La proprietà font-size
può assumere i seguenti valori:
x-small, x-small, small, medium, large, x-large, xx-large
(impostano la dimensione del carattere a partire dalla più piccola alla più grande);smaller
(imposta la dimensione del carattere inferiore a quella dell'elemento padre); larger
(imposta la dimensione del carattere superiore a quella dell'elemento padre); p{ font-size: 10px; }
In questo esempio la dimensione del carattere relativa all'elemento p
è impostata a 10 pixel.
font-style
La proprietà font-style
consente di impostare lo stile del carattere.
La proprietà font-style
può assumere i seguenti valori:
normal
(valore predefinito);italic
(corsivo);oblique
(obliquo); p{ font-style: italic; }
In questo esempio lo stile del carattere associato all'elemento p
è corsivo (italic
).
font-variant
La proprietà font-variant
consente di impostare il formato del carattere.
La proprietà font-variant
può assumere i seguenti valori:
normal
(valore predefinito);small-caps
(maiuscolo);div{ font-variant: small-caps; }
In questo esempio lo stile del carattere associato all'elemento div
è maiuscolo.
font-weight
La proprietà font-weight
consente di impostare la formattazione del carattere.
La proprietà font-weight
può assumere i seguenti valori:
normal
(valore predefinito);bold
(grassetto);bolder
(più grassetto);lighter
(sottile);100, 200, 300, 400, 500, 600, 700, 800, 900
(dal più sottile al più grassetto).div{ font-weight: bold; }
In questo esempio lo stile del carattere associato all'elemento div
è grassetto.
[ Torna all’inizio della pagina ]
[ Torna all’inizio della pagina ]
[ Torna all’inizio della pagina ]
[ Torna all’inizio della pagina ]
[ Torna all’inizio della pagina ]
[ Torna all’inizio della pagina ]
[ Torna all’inizio della pagina ]
[ Torna all’inizio della pagina ]
Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Privacy, cookies e accessibilità