CSS-Proprietà dei font

7/22/2019 CSS-Propriet dei font

1/8

Autore: Bocchi CinziaUltimo aggiornamento: 20/10/2013

1

Propriet dei font con i CSS

Nella tabella seguente sono indicate alcune propriet CSS che permettono di specificarele caratteristiche dei font:

Propriet Descrizione

font-family Definisce la famiglia di font.

font-size Definisce la dimensione del font.

font-style Definisce lo stile del font (es. grassetto, corsivo).

font-variant Consente di visualizzare il testo in maiuscoletto.

font-weight Specifica il peso del font, cio lo spessore dei tratti che lo compongono.

@font-face (CSS3) Consente di visualizzare font non standard.

Qual la differenza tra il testo e i font? Il testo il contenuto e i font si utilizzano per

visualizzare quel contenuto.

In tipografia e in informatica il tipo di carattereo fon t un insieme di caratteri tipograficicaratterizzati e accomunati da un certo stile grafico o intesi per svolgere una datafunzione.1

I font possono essere suddivisi in due classi ofamiglie generiche: con grazie o seri f ,senza grazie o sans seri f , a spaziatura fissa o monospaced .

(a) (b)

Fig. 1 Esempi di font con grazie (a) e senza grazie (b)2

Unulteriore classificazione riguarda la spaziatura tra i caratteri, che pu essere fissa oproporzionale. Nel primo caso lo spazio occupato dai caratteri costante (monospaced ),nel secondo caso varia in proporzione alla dimensione del carattere (proport iona l ).

I font di ogni classe sono ulteriormente suddivisi in famiglie. Una famiglia di font ungruppo di font concepiti per essere usati in combinazione e che mostrano similarit neldisegno. Le famiglie di font sono molto numerose e aumentano con il passare del tempo.Di conseguenza complicato fornirne unelencazione esaustiva. Mi limiter, pertanto, apresentarvi alcune famiglie di font tra quelle pi note.

1Wikipedia,http://it.wikipedia.org/wiki/Tipo_di_carattere

2http://www.tipografialeone.net/font-caratteri-tipografia-grafica-tipi-misure-caratteristiche.html
http://it.wikipedia.org/wiki/Tipo_di_caratterehttp://it.wikipedia.org/wiki/Tipo_di_caratterehttp://it.wikipedia.org/wiki/Tipo_di_caratterehttp://www.tipografialeone.net/font-caratteri-tipografia-grafica-tipi-misure-caratteristiche.htmlhttp://www.tipografialeone.net/font-caratteri-tipografia-grafica-tipi-misure-caratteristiche.htmlhttp://www.tipografialeone.net/font-caratteri-tipografia-grafica-tipi-misure-caratteristiche.htmlhttp://www.tipografialeone.net/font-caratteri-tipografia-grafica-tipi-misure-caratteristiche.htmlhttp://it.wikipedia.org/wiki/Tipo_di_carattere


2/8


2

Fig. 2Esempi di font monospaced e proportional3

Famiglia generica Serif

Baskerville

askervilleBaskerville

Bodoni

Bodoni

Bodoni

Garamond

Garamond

Garamond

GeorgiaGeorgiaGeorgia

Palatino

Palatino

Palatino

Times New Roman

Times New Roman

Times New Roman

Fig. 3Famiglie di font Serif

Famiglia generica Sans Serif

ArialArialArial

HelveticaHelvetica

Helvetica

Lucida Sans

Lucida SansLucida Sans

Tahoma

Tahoma

Tahoma

Trebuchet

Trebuchet

Trebuchet

Verdana

VerdanaVerdana

Fig. 4

Famiglie di font Sans Serif

Famiglia generica Monospaced

Consolas

Consolas

Consolas

Courier New

Courier New

Courier New

Lucida ConsoleLucida onsoleLucida Console

Fig. 5Famiglie di font Monospaced

3http://en.wikipedia.org/wiki/File:Proportional-vs-monospace-v4.jpg
http://en.wikipedia.org/wiki/File:Proportional-vs-monospace-v4.jpghttp://en.wikipedia.org/wiki/File:Proportional-vs-monospace-v4.jpghttp://en.wikipedia.org/wiki/File:Proportional-vs-monospace-v4.jpghttp://en.wikipedia.org/wiki/File:Proportional-vs-monospace-v4.jpg


3/8


3

Nel seguito sono descritte nel dettaglio le propriet CSS per i font.

font-family

Definisce una famiglia di font, eventualmente generica (consigliato) da utilizzare nella

visualizzazione del testo di un elemento.

selettore{font-family: font-stack;}

dove font_stackpu assumere i seguenti valori:

un elenco di font separati da virgole; il nome va riportato tra apici se costituito da 2 opi parole separate da spazi, es. Times New Roman;

inherit.

Il valore inherit specifica che la propriet viene ereditata dallelemento genitore.

Un font stack pu comprendere anche un solo font, ma consigliabile prevedernequalcuno in pi. Infatti, nel caso il primo carattere della lista non fosse disponibile sulcomputer dellutente, verr utilizzato il secondo e cos via.Il font-stack dovrebbe specificare famiglie di caratteri simili, in maniera da consentire unavisualizzazione di pagina simile per ogni sistema e/o browser. Le combinazioni pi usate,dette Web Safe Font Combinations, sono visibili allurlhttp://www.w3schools.com/cssref/css_websafe_fonts.asp.

font-sizeDefinisce la dimensione del font.

selettore{font-size: dimensione;}

dove dimensionepu assumere i seguenti valori:

xx-small;

x-small;

small; medium( il default);

large;

x-large;

xx-large;

smaller, dimensione pi piccola rispetto a quella del font dellelemento genitore;

larger, dimensione pi grande rispetto a quella del font dellelemento genitore;

lunghezza, specificata mediante numero e unit di misura;

valore percentuale, calcolato rispetto alla dimensione del font dellelemento genitore;

inherit.
http://www.w3schools.com/cssref/css_websafe_fonts.asphttp://www.w3schools.com/cssref/css_websafe_fonts.asphttp://www.w3schools.com/cssref/css_websafe_fonts.asp


4/8


4

Si veda lesempio allurlhttp://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=xx-small

La dimensione di un font pu essere assoluta, cio una misura specifica, o relativa, ciospecificata relativamente al font dellelemento genitore. La dimensione assoluta non

permette di modificare la dimensione del font in tutti i browser (es. le versioni di IEprecedenti alla 9) e questa caratteristica da evitare per ragioni di accessibilit. Unavalida alternativa per risolvere questo problema, utilizzare gli em. Unulteriore alternativa,che funziona in tutti i browser, consiste nel definire una dimensione di default per linterodocumento e poi specificare la dimensione dei vari elementi contenuti nel body medianteem. La dimensione di default da inserire nel body pari al 100%:

body { font-size: 100% ;}

Le unit di misura

Le unit di misura che si possono specificare con i CSS sono:

Simbolo Nome Descrizione

% percentuale

px pixel Un punto sullo schermo del computer. Equivale a 0,75 punti e circa0,03 cm.

in inch (pollice); Corrisponde a 96 pixel, 2,54 cm e circa 72 punti.

cm centimetri Corrisponde a circa 37,9 pixel e circa 28,3 punti.

mm millimetri

em em 1 em uguale alla dimensione del font predefinita nel browser.Solitamente uguale a 16px, cio 12 punti. E raccomandatadal

W3C.ex ex 1 ex uguale allaltezza del carattere x minuscolo del font scelto.

Corrisponde circa alla met della dimensione del font.

pt punti Equivale a circa 0,04 cm e circa 1,3 pixel.

Fig. 6Unit di misura esprimibili con i CSS

font-style

Imposta lo stile del font.

selettore{font-style: stile;}

dove stilepu assumere i seguenti valori:

normal( il default);

italic, italico (corsivo);

oblique, ottenuto inclinando il font normale; simile a italic ma meno supportato;

inherit.
http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=xx-smallhttp://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=xx-smallhttp://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=xx-small


5/8


5

font-variant

Trasforma il testo in maiuscoletto.

selettore{font-variant: variante;}

dove variantepu assumere i seguenti valori:


small-caps, maiuscoletto;

inherit.

Si veda lesempio allurlhttp://www.w3schools.com/cssref/playit.asp?filename=playcss_font-variant

font-weight

Consente di applicare specifici effetti al testo, come la sottolineatura.

selettore{font-weight:peso;}

dovepesopu assumere i seguenti valori:


bold bolder, peso relativo rispetto al peso del genitore.

lighter, peso relativo rispetto al peso del genitore.

numero in {100, 200, 300, 400, 500, 600, 700, 800, 900}; 400 corrisponde a normal,mentre 700 a bold;

inherit.

Si veda lesempio allurlhttp://www.w3schools.com/cssref/playit.asp?filename=playcss_font-weight.

@font-faceLa propriet @font-face in realt una @-rules (at-rules). Essa permette di utilizzare fontnon standard, che devono essere salvati nella directory del sito web. I font vengonoautomaticamente scaricati sul computer dellutente consentendo, cos, una correttavisualizzazione degli stessi. Tuttavia, non tutti i font sono visualizzabili su ciascun browser,poich ogni browser accetta solo un preciso formato di font. Tra i vari formati sidistinguono:

TTF(True Type);

OTF (Open Type);

EOT(Embedded Open Type);

WOFF(Web Open Font Format).
http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-varianthttp://www.w3schools.com/cssref/playit.asp?filename=playcss_font-varianthttp://www.w3schools.com/cssref/playit.asp?filename=playcss_font-weighthttp://www.w3schools.com/cssref/playit.asp?filename=playcss_font-weighthttp://it.wikipedia.org/wiki/TrueTypehttp://it.wikipedia.org/wiki/TrueTypehttp://en.wikipedia.org/wiki/Embedded_OpenTypehttp://en.wikipedia.org/wiki/Embedded_OpenTypehttp://it.wikipedia.org/wiki/Web_Open_Font_Formathttp://it.wikipedia.org/wiki/Web_Open_Font_Formathttp://it.wikipedia.org/wiki/Web_Open_Font_Formathttp://en.wikipedia.org/wiki/Embedded_OpenTypehttp://it.wikipedia.org/wiki/TrueTypehttp://www.w3schools.com/cssref/playit.asp?filename=playcss_font-weighthttp://www.w3schools.com/cssref/playit.asp?filename=playcss_font-variant


6/8


6

Nella tabella seguente sono mostrati i principali browser e i formati supportati.

Browser TTF OTF EOT WOFF

Chrome

Firefox

Safari

Opera

IE 9+

Fig. 7Formati di font supportati dai browser

IE 8 e precedenti versioni non supportano la regola @font-face.

Per consentire una corretta visualizzazione sui vari browser necessario fornire sia un fileTTF che un file EOT. Purtroppo, per, quando si scarica un font si ottiene solo il file TTF.Grazie a questa applicazione onlinehttp://www.kirsle.net/wizards/ttf2eot.cgipossiamoconvertire il file TTF in EOT.

La regola @font-face consente di definire un nome per il font e specificare il file che locontiene, oltre ad altre propriet come lo stile, il peso e cos via.

@font-face{font-family: nome_font; src: url (nome_file); altri_descrittori}

dove

nome_font il nome assegnato al font;

nome_file il pathname del file del font;

altri descrittori opzionalisono :- font-stretch, che definisce come deve essere allungato il font e che pu

assumere uno dei seguenti valori: normal, condensed, ultra-condensed, extra-condensed, semi-condensed, expanded, semi-expanded, extra-expanded, ultra-expanded;

- font-style;- font-weight;

- unicode-range, che definisce il range di caratteri UNICODE che il font supporta;il default U+0-10FFFF.

Vi segnalo il sitoGoogle Fontsdal quale possibile scegliere tra un consistente numero difont. Se si possiede un account Google si possono creare collezioni di font, da utilizzarequando necessario. Inoltre, non necessario scaricare alcun file ma sufficiente:

copiare il codice fornito e incollarlo nella sezione del file html;

inserire nel CSS la regola font-family utilizzando il font_stack suggerito.
http://www.kirsle.net/wizards/ttf2eot.cgihttp://www.kirsle.net/wizards/ttf2eot.cgihttp://www.kirsle.net/wizards/ttf2eot.cgihttp://www.google.com/fontshttp://www.google.com/fontshttp://www.google.com/fontshttp://www.google.com/fontshttp://www.kirsle.net/wizards/ttf2eot.cgi


7/8


7

Sintassi abbreviata per la propriet font

La propriet font-family permette di definire tutte le propriet del font con ununica regola.

selettore{font:stile variante peso dimensione/altezza_linea font-family;}

Laltezza della linea specificata con la propriet line-height (propriet CSS del testo). Ladimensione e la famiglia di font devono essere obbligatoriamente indicati.

Alla propriet font possibile assegnare anche solo uno dei seguenti valori:

caption, lo stesso font delle etichette dei controlli (es. pulsanti);

icon, lo stesso font usato per etichettare le icone;

menu, lo stesso font dei menu a discesa (drop down menu);

message-box, lo stesso font usato per le finestre di dialogo;

small-caption, una versione pi piccola dei font caption;

status-bar, lo stesso font della barra di stato;

inherit.

Riferimenti

E. A. Meyer, Cascading Style Sheets- La guida completa, Hops Libri, 2007

W3schools,http://www.w3schools.com/cssref/pr_font_font.asp

W3schools,http://www.w3schools.com/css/css3_fonts.asp

Quest'opera distribuita con LicenzaCreative Commons Attribuzione - Non commerciale - Condividi allo stesso modo3.0 Italia.
http://www.w3schools.com/cssref/pr_font_font.asphttp://www.w3schools.com/cssref/pr_font_font.asphttp://www.w3schools.com/cssref/pr_font_font.asphttp://www.w3schools.com/css/css3_fonts.asphttp://www.w3schools.com/css/css3_fonts.asphttp://www.w3schools.com/css/css3_fonts.asphttp://creativecommons.org/licenses/by-nc-sa/3.0/it/http://creativecommons.org/licenses/by-nc-sa/3.0/it/http://creativecommons.org/licenses/by-nc-sa/3.0/it/http://creativecommons.org/licenses/by-nc-sa/3.0/it/http://creativecommons.org/licenses/by-nc-sa/3.0/it/http://creativecommons.org/licenses/by-nc-sa/3.0/it/http://www.w3schools.com/css/css3_fonts.asphttp://www.w3schools.com/cssref/pr_font_font.asp


8/8


8

CSS-Proprietà dei font

Documents

Transcript of CSS-Proprietà dei font