Gestione tipografica - HTML5 con CSS e JavaScript - page 123

per dispositivi mobile. Infine WOFF, che costituisce indubbiamente l'opzione migliore ed
è supportato da tutti i browser moderni.
Per ottenere i diversi formati di un stesso font, dato per esempio un file .ttf, possiamo
usare programmi specifici oppure, più semplicemente, utilizzare servizi online come Font
Squirrel, che mette a disposizione un generatore completo e gratuito. È sufficiente accedere
all'indirizzo http://aspit.co/a06 , caricare il file (o i file se desideriamo incorpora-
re più font personalizzati all'interno del nostro sito), selezionare le opzioni di esportazione
e scaricare il kit generato che, oltre al font nei diversi formati richiesti, contiene anche una
pagina dimostrativa e il file CSS con le dichiarazioni necessarie.
nota
Per maggiori informazioni sull'uso dei font nelle pagine web, è possibile vedere
la pagina “CSS Fonts Module Level 3” all'indirizzo http://aspit.co/
a07 .
È importante notare che, prima di incorporare un font nelle nostre pagine, ci dobbiamo as-
sicurare di avere i diritti di licenza per l'utilizzo e la ridistribuzione.
Online ci sono numerosi siti e risorse dedicati ai font che, tra l'altro, consentono anche
di effettuare ricerche in base al tipo di licenza (Free, Free for personal use, Shareware ecc.)
come, per esempio, dafont, http://aspit.co/a08 .
Dopo aver visto come definire il carattere da usare per la visualizzazione del testo, ve-
diamo come impostarne la dimensione.
Impostazione della dimensione del carattere
Una volta selezionato il font, vogliamo controllare la dimensione con cui verrà visualizzato
all'interno della pagina. Normalmente i browser assegnano una grandezza predefinita al
testo, tipicamente di 12pt per il testo in paragrafi (è maggiore, per esempio, per elementi
come i titoli H1, H2, H3 ecc.).
Possiamo impostare la dimensione del testo attraverso lo stile, specificando la proprietà
font-size . La grandezza del carattere può essere espressa come assoluta attraverso le
costanti xx-small , x-small , small , medium , large , x-large e xx-large op-
pure come relativa con larger e smaller . In questo modo, la misura viene impostata
in proporzione rispetto alle impostazioni del browser.
In alternativa, possiamo specificare un valore preciso per la dimensione del testo, usan-
do una delle unità di misura di lunghezza tra quelle disponibili ed elencate nella tabella 6.2 .