Altro la proprietà css text che gestisce l’aspetto visuale del testo stesso e delle parole, possiamo anche specificare lo stile proprio dei caratteri con la proprietà css ‘font’ come la sua famiglia specifica e/o generica (font-family), la sua misura assoluta o relativa (font-size), il suo stile italico o no (font-style), la sua ‘pesantezza’ tipo il grassetto (font-weight) e le sue varianti (font-variant).
1. Proprietà css ‘font’
La proprietà css font permette di raggruppare tutte le proprietà del testo in una unica dichiarazione nel seguente ordine, separate da un spazio o da una virgola tra le differente valore per la famiglia del font:
font-style font-variant font-weight font-size font-family
Esempio di regola css per il css font:
Sono un paragrafo con font: italic bold 20px georgia, serif;
Se una delle proprietà non viene specificata in ‘font’, il suo valore prenderà automaticamente quello iniziale di default.
Nota bene che nella stessa dichiarazione, può essere aggiunto la proprietà css del testo line-height (lo spazio tra le righe del testo) dopo il valore del ‘font-size’ separati da un /.
font-style font-variant font-weight/line-height font-size font-family
Esempio di regola css per il css font con line-height:
Sono un paragrafo con font:italic 14px/30px arial, sans-serif;
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
La proprietà css ‘font’ può anche permetterci di impostare i caratteri della nostra pagina basato sui font del sistema operativo usato dal utente con:
- caption: carattere dei nomi dei pulsanti e menu a discesa
Un paragrafo con font:caption;
- icon: carattere dei nomi descrittivi delle icone
Un paragrafo con font:icon;
- menu: carattere delle voce nei menu delle finestre
Un paragrafo con font:menu;
- message-box: carattere nei riquadri di dialogo (es:un messaggio d’errore del sistema)
Un paragrafo con font:message-box;
- small-caption: carattere dei nomi dei piccoli controlli
Un paragrafo con font:small-caption;
- status-bar: carattere delle barre di stato
Un paragrafo con font:status-bar;
2. Il ‘font-family’
La proprietà css ‘font-family’ specifica la famiglia del carattere da usare per il nostro testo. Può contenere come valore più nomi specifici (es:arial) e/o nomi di famiglia generica (es:serif).
Di buona regola, meglio specificare più valori, separati da una virgola e in ordine di preferenza, aggiungendo per ultimo, un nome generico.
Nel caso il primo font impostato non è installato sul sistema del utente, il browser passerà al secondo valore e cosi via per tutti i valori, fino a trovare uno giusto da utilizzare o usando un font di default appartenendo alla famiglia generica specificata.
Esempio di regola css:
font-family:Times, "Times New Roman", Palatino, serif;
Un paragrafo con font-family:Times, “Times New Roman”, Palatino, serif;
Nota bene che i nomi di font composti da più parole, come nel caso di Times New Roman, vengono inseriti tra quote. Es:"Times New Roman"
I nomi di famiglia generica sono 5:
- serif: caratteri con grazie come Times, “Times New Roman”, Georgia, Palatino, Bookman…
Un paragrafo con font-family:serif;
- sans-serif: caratteri senza grazie come Arial, Verdana, Helvetica, Lucida…
Un paragrafo con font-family:sans-serif;
- monospace: caratteri a larghezza fissa come Courier, “Courrier New”, “Andale Mono”, Lucidatypewriter…
Un paragrafo con font-family:monospace;
- cursive: caratteri che simulano la scritta a mano come “Comic Sans”, “Comic Sans MS”, Coronetscript, Parkavenue…
Un paragrafo con font-family:cursive;
- fantasy: caratteri decorativi come Impact, “Allegro BT”, Oldtown, Brushstroke…
Un paragrafo con font-family:fantasy;
3. Il ‘font-size’
La proprietà css ‘font-size’ permette di precisare la misura dei caratteri in modo assoluto di dimensione fissa con parole chiave (da xx-small a xx-large) ed unità di misura (le più diffuse essendo in pixel/px per l’uso online e point/pt per l’uso in stampa) o in modo relativo alle dimensione del testo dell’elemento genitore con parole chiave (smaller, larger) ed in percentuale (% o em, utile per avere un font ridimensionabile alle preferenze del utente).
- Valore assoluto con parole chiave, in ordine di grandezza dal più piccolo (xx-small) al più grande (xx-large):
font-size:xx-small;
font-size:x-small;
font-size:small;
font-size:medium;
font-size:large;
font-size:x-large;
font-size:xx-large;
- Valore assoluto in unità di misura pixel:
font-size:24px;
- Valore relativo con parole chiave smaller (più piccolo) e larger (più grande):
font-size:smaller;
font-size:larger;
- Valore relativo in percentuale con % e em (Nota che 100%=1em):
font-size:2em;
font-size:200%;
3. Il ‘font-style’
La proprietà css font-style permette di impostare lo stile del carattere in modo italico o no.
- normal: il valore di default, utile per azzerare un altro valore preimpostato
- italic: per un carattere in italico
Un paragrafo con font-style:italic;
- oblique: simile ad italico
Un paragrafo con font-style:oblique;
4. Il ‘font-weight’
La proprietà css font-weight permette di specificare la consistenza visiva del carattere in modo assoluto con parole chiave (bold) o valori numerici definiti (da 100 a 900) o in modo relativo al testo del suo elemento genitore con parole chiave (bolder e lighter).
- normal: il valore di default, utile per azzerare un altro valore preimpostato. Nota che il valore normale è pare al valore numerico 400.
- Valore assoluto con parole chiave ‘bold’. Nota che il valore bold è pare al valore numerico 700.
Un paragrafo con font-weight:bold;
- Valori assoluti numerici da 100 a 900:
Un paragrafo con font-weight:100;
Un paragrafo con font-weight:200;
Un paragrafo con font-weight:300;
Un paragrafo con font-weight:400; pare al valore ‘normal’
Un paragrafo con font-weight:500;
Un paragrafo con font-weight:600;
Un paragrafo con font-weight:700; pare al valore ‘bold’
Un paragrafo con font-weight:800;
Un paragrafo con font-weight:900;
- Valori relativi con parole chiave ‘bolder’ (più pesante) e ‘lighter’ (meno pesante):
Un paragrafo con font-weight:bolder;
Un paragrafo con font-weight:lighter;
5. font-variant
La proprietà css font-variant con il suo valore ’small-caps’ converte i caratteri minuscoli in caratteri maiuscoli ma conservando la loro altezza originale.
Nota: per rendere un testo completamente in maiuscolo, usare la proprietà del testo
title="text-transform uppercase">text-transform
con il valore ‘uppercase’.
- normal: il valore di default, utile per azzerare un altro valore preimpostato
- small-caps
Un paragrafo con font-variant:small-caps;
Esistono altri 2 tipi di proprietà css del font nelle specifiche CSS2 della W3C il quale supporto dei browser è inesistente o quasi nulla:
- il ‘font-size-adjust’ con i valori ‘none’ o di tipo numerico permette specificare che il browser sceglie il carattere basato sul l’altezza delle minuscole invece delle maiuscole, supportato da Firefox 3+
- font-stretch con i valori dal più stretto al più largoultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded o normal come valore di default permette di selezionare la versione condensata o estesa di una familia di font, non supportata da nessun browser.
Un altra proprietà riguardo i caratteri è la proprietà css3 ‘font-face’ che permette di scaricare un font predefinito e renderlo disponibile per l’uso nella costruzione della nostra pagina.
NB: i esempi postati su questa pagina possono variare di risultati da utenti ad utenti basato sulla disponibilità dei font usati.
{ 3 comments… read them below or add one }
forse hai invertito “con grazie e senza grazie”!
Opsss…non era un ‘forse’.
L’ho corretto. Grazie per avermelo segnalato!
Molto chiaro, molto utile.. grazie! XD