La variante standard per la definizione dei caratteri appare approssimativamente come segue:
body {
font-family: Arial, Helvetica, sans-serif;
}In questo modo, il font Arial viene assegnato all'elemento body. Se questo non fosse disponibile sul sistema del visualizzatore, viene utilizzato Helvetica. Nel caso in cui anche Helvetica non fosse disponibile, il browser è istruito a utilizzare almeno un font senza grazie. Questo naturalmente non può essere controllato veramente. Alla fine, quindi, non avrete un controllo reale sul risultato. Quello che avete preparato così bene in GIMP o Photoshop potrebbe quindi scomparire nella giungla dei font. Più avanti vedremo come risolvere questo problema, ma per ora continuiamo con il classico approccio. Di seguito troverete una tipica definizione per modificare l'aspetto di base del sito web. Con la definizione di body, è possibile impostare inizialmente le impostazioni di base del font.
body {
font-family: Georgia, Times, "Times New Roman", serif;
color: #000;
font-size: 1.1em;
line-height: 150%;
}
p {
font-size: 1.1em;
}
Ovviamente è possibile stilizzare separatamente gli elementi della pagina. Questo include, ad esempio, i titoli, i passaggi in corsivo, ecc. Tuttavia, tenete presente il principio di ereditarietà di CSS.
h1 {
font-size: 1.6em;
}Il risultato potrebbe apparire nel browser come segue:
Utilizzare i Webfonts
Il problema con le definizioni di font tradizionali è evidente: alla fine non si può essere davvero sicuri che il font da voi specificato sia effettivamente disponibile al visualizzatore. I browser - nel caso non trovino il font - sceglieranno un font simile a quello desiderato. Quindi, naturalmente, non avete un controllo reale sul risultato. Proprio a questo punto entra in gioco @font-face. Questo consente di specificare esplicitamente il font da utilizzare. In pratica è esattamente come per le immagini. È necessario quindi specificare il percorso del file del font.
In browser moderni vengono utilizzati i cosiddetti font WOFF per @font-face. Questi font sono molto più leggeri rispetto ai formati di font web utilizzati in passato come EOT e TTF.
Una tipica definizione di @font-face appare come segue:
@font-face {
font-family: "Bitstream Vera Serif Grassetto";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
Si inserisce il nome del font da utilizzare in font-family. Fino a questo punto non ci sono quindi particolarità sintattiche. Con src:url() viene specificato l'URL in cui si trova il file del font web. Teoricamente, se esiste la possibilità che il font sia disponibile sui computer degli utenti, è consigliabile specificare anche local. A questo local si assegna il nome del font.
@font-face {
font-family: "Bitstream Vera Serif Grassetto";
local: "Bitstream Vera Serif Grassetto";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
Dopo la definizione di @font-face, i font web possono essere utilizzati normalmente.
h1 {
font-family: "Bitstream Vera Serif Grassetto";
font-size: 1.2em;
color: #3399FF;
}Ecco dove trovare i Webfonts
Resta ovviamente la domanda su come ottenere i file del font web desiderato. Ad esempio, Google ospita numerosi di questi font web sulla pagina http://www.google.com/fonts.
Questi font possono essere inclusi direttamente tramite la pagina menzionata.
Un chiamata corrispondente assomiglia a quanto segue:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
Viene specificato il font web desiderato dietro font-family. Sulla pagina Google menzionata troverete questi nomi e chiamate. Una volta incluso il font web desiderato, potrà essere utilizzato come qualsiasi altro font.
body {
font-family: 'Tangerine', serif;
font-size: 1.2em;
}Se si desidera, è possibile utilizzare più font web sulla propria pagina. Per farlo, basta cliccare su http://www.google.com/fonts sui font web desiderati e selezionare Aggiungi alla raccolta. Una volta che tutti i font web sono nella propria raccolta, si fa clic su Utilizza nella parte inferiore della pagina. Qui viene visualizzato direttamente una sorta di "contachilometri".
Tramite questa immagine è possibile osservare gli effetti che l'inclusione dei font web ha sulla velocità di caricamento della pagina. Questi effetti sono effettivamente misurabili e aumentano con ciascun ulteriore font web.
Come è semplice utilizzare più di un webfont che sono stati precedentemente inseriti nella propria raccolta, lo mostra il seguente esempio:
<link href="http://fonts.googleapis.com/css? family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette" rel="stylesheet" type="text/css">
I singoli webfont sono quindi elencati uno di seguito all'altro, separati da una barra verticale. La chiamata completa che corrisponde alla collezione scelta viene visualizzata sulla pagina Use- già menzionata.
Molti dei webfont offrono sottoinsiemi come Latino o Cirillico. Per includerli esplicitamente, si specifica il subset desiderato come valore del parametro.
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic
Se si desidera utilizzare più di uno di questi sottoinsiemi, si elencano separati da una virgola.
http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic
Tuttavia, l'uso di questi webfont è oggetto di controversie per un motivo completamente diverso. Innanzitutto, al caricare la pagina deve essere stabilita una connessione con un server Google. Questo può essere evitato scaricando il file del webfont e caricandolo sul proprio server. Tuttavia, in ogni caso prestate attenzione alle condizioni di utilizzo dei webfont che desiderate utilizzare in questo modo.
La definizione del tipo di carattere della pagina di esempio
Di seguito troverete le definizioni dei caratteri che utilizzerò per la pagina di esempio attuale:
body {
font-family: 'Crimson Text', Helvetica, sans-serif;
color: #444;
text-decoration: none;
line-height: 1.5em;
font-size: 1.2em;
}
p {
font-size: 1.1em;
}
h1 {
font-size: 1.6em;
color: #3399FF;
}
Ovviamente potete includere ulteriori elementi. Nel caso attuale, però, questa sintassi è più che sufficiente.
