Vai ai contenuti

LAU

Home > Proprietà CSS2 > Proprietà per i caratteri

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.

  • NN: indica da quale versione di Netscape Navigator viene supportata la proprietà.
  • IE: indica da quale versione di Internet Explorer viene supportata la proprietà.
  • MF: indica da quale versione di Mozilla Firefox viene supportata la proprietà.
Proprietà Valori IE NN MF
font font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar 		4.0 4.0 1.0
font-family <famiglia-caratteri>
<famiglia-generica>		 3.0 4.0 1.0
font-size x-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
<lunghezza>
% 		3.0 4.0 1.0
font-style normal
italic
oblique 		4.0 4.0 1.0
font-variant normal
small-caps 		4.0 6.0 1.0
font-weight normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900 		4.0 4.0 1.0

Esempi dimostrativi delle funzionalità di alcune proprietà per i caratteri:

torna alla lista completa delle proprietà

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.

torna alla tabella

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;
}

torna alla tabella

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);
  • <lunghezza> (imposta una dimensione fissa del carattere);
  • % (imposta la dimensione del carattere in percentuale rispetto a quella dell'elemento padre).
p{
font-size: 10px;
}

In questo esempio la dimensione del carattere relativa all'elemento p è impostata a 10 pixel.

torna alla tabella

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).

torna alla tabella

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.

torna alla tabella

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 alla tabella

[ Torna all’inizio della pagina ]

Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Privacy, cookies e accessibilità

[ Torna all’inizio della pagina ]