I css e la gestione dei font Articolo letto: 5084 volte

di Marco Deseri

I css e la gestione dei font

I css sono uno strumento potente e versatile attraverso il quale gestire la formattazione delle pagine web. In questo articolo approfondiremo un aspetto dei css, la gestione dei font, entrando nel dettaglio delle specifiche w3c sull'argomento.

Il punto di riferimento sull'argomento sono le specifiche css2, nelle quali sono descritte proprietà e possibili valori. Vediamole insieme.

Font-family

Questa proprietà specifica i font da usare per visualizzare l'elemento.

Il suo valore può essere specificato sia ricorrendo ai cosiddetti family-name (nomi della famiglia del font), sia usando i generic-name (nomi generici, relativi alla tipologia del font).

Nel primo caso, si possono specificare direttamente i nomi dei font, ma è importante ricordare che se il nome contiene spazi bianchi sarà necessario scriverlo tra virgolette.

Nel secondo caso invece si potranno specificare i seguenti valori:

• 'serif'; per i caratteri con grazie;
• 'sans-serif': per i caratteri senza grazie;
• 'cursive': per i caratteri che emulano la scrittura a mano;
• 'fantasy'; per i caratteri decorativi;
• 'monospace': per i caratteri con larghezza fissa, dove la "i" è larga come la "m".

Inoltre, è possibile specificare più nomi di font separati da una virgola, siano essi family-name o generic-name.

Questo accorgimento è particolarmente consigliato, e in alcune circostanze può aiutare a risolvere spiacevoli situazioni.

Per esempio, quando il primo font indicato non è disponibile sul computer dell'utente, vengono tentati gli altri font nella lista: se nessuno è disponibile, lo user-agent ricorre al suo font di default.

Oppure, se il primo font indicato non possiede il glifo per un determinato carattere (per esempio, un simbolo matematico o un carattere giapponese), vengono tentati i font successivi: se uno di questi contiene i caratteri necessari, viene usato per i caratteri in questione, mentre gli altri caratteri vengono resi con il font principale.

Font-size

La dimensione del font può essere espressa con unità di misura assolute, relative, di lunghezza o in percentuale.

• Le dimensioni assolute (absolute-size) si esprimono con le seguenti etichette: "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large". Non è possibile controllare in questo modo le effettive dimensioni a schermo, perché ciascun browser ha le proprie tabelle di corrispondenza (un "xx-small" su mozilla è decisamente più piccolo che su internet explorer). È il rapporto tra i singoli indici che è uguale per tutti i browser (corrisponde ad un fattore di ingrandimento di 1,2 secondo le specifiche css2).
• Le dimensioni relative sono espresse con le etichette "larger" e "smaller" e fanno riferimento alla dimensione dell'elemento padre. Per intenderci, se usiamo la keyword "smaller" su un elemento il cui padre è definito come "large", otteniamo come risultato un elemento di dimensione "medium".
• La dimensione espressa come lunghezza viene definita secondo parametri assoluti, che non dipendono dagli user-agent: le unità di misura sono i pixel o i punti. Se da un lato questo può sembrare vantaggioso (finalmente le scritte saranno uguali su tutti i browser...), in realtà comporta notevoli problemi di accessibilità e usabilità, e non può nemmeno garantire la stessa dimensione su piattaforme diverse (a causa delle diverse risoluzioni: 96 dpi su Windows contro 72 su Mac). In particolare, gli utenti non possono ridimensionare il testo con gli strumenti offerti dal browser: un grave problema di usabilità e di accessibilità.
• La dimensione in percentuale (espressa in "em" o in punti percentuali) consente di costruire fogli di stile robusti e scalabili. La dimensione è espressa in relazione all'elemento padre: i browser possono scalare la dimensione del testo facilmente.

Font-variant

È una proprietà che può assumere solo tre valori:

Font-weight

Può assumere un valore numerico, compreso tra 100 e 900, dal più chiaro al più scuro. Sono presenti degli alias testuali come normal (corrisponde al 400), bold (700), lighter (100) e bolder (900).

Sul web

Specifiche del W3C css2 relative ai font:
http://www.w3.org/TR/REC-CSS2/fonts.html