font-family
La prima manipolazione che puoi fare con i CSS sul testo riguarda il font, ossia il suo carattere. Attenzione però: non puoi usare qualsivoglia carattere (per ora), in quanto non tutti i sistemi operativi possono avere il font che vuoi utilizzare. Ecco, quindi, che sono stati creati dei gruppi di font utilizzabili, i cosiddetti Web Safe Fonts, di cui si ha la quasi certezza, perché disponibili nella grande maggioranza dei sistemi operativi recenti e obsoleti. Te li elenco qui sotto, divisi per tipologia, ossia Serif (con grazie), Sans-Serif (senza grazie) e Monospace (ovvero dotati di larghezza di carattere uguale per tutte le lettere).
Serif
Georgia, serif"Palatino Linotype", "Book Antiqua", Palatino, serif"Times New Roman", Times, serif
Sans-Serif
Arial, Helvetica, sans-serif"Arial Black", Gadget, sans-serif"Comic Sans MS"1, cursive, sans-serifImpact, Charcoal, sans-serif"Lucida Sans Unicode", "Lucida Grande", sans-serifTahoma, Geneva, sans-serif"Trebuchet MS", Helvetica, sans-serifVerdana, Geneva, sans-serif
Monospace
"Courier New", Courier, monospace"Lucida Console", Monaco, monospace
Nella lista soprastante puoi notare subito una cosa: sono dichiarati più font per ogni riga. Questo è un accorgimento utile e saggio da osservare ogni volta andrai a cambiare il carattere alle pagine HTML. L’idea è che, se il primo font non è installato sul computer che sta visualizzando la pagina HTML, allora verrà proposto il secondo. Se anche il secondo non fosse disponibile, allora si passerà a quello successivo; e avanti così, fintantoché non verrà trovato il carattere corrispondente alla dichiarazione. Nello sfortunatissimo caso in cui il computer non abbia nessuno dei caratteri da te inseriti (probabilmente, quindi, è un computer del giurassico e, a questo punto, non disporre del carattere è l’ultimo dei suoi problemi!), allora grazie all’ultima scelta (serif, sans-serif o monospace), gli indicherai di prendere il primo carattere disponibile appartenente alla relativa famiglia.
Fin qui abbiamo visto la teoria, ma come lo cambiamo effettivamente il carattere alle nostre pagine? Semplice
Avrai sicuramente notato anche un’altra cosa esaminando la lista dei font sicuri: alcuni fra di essi presentano dei doppi apici, come ad esempio "Arial Black" o "Trebuchet MS". I doppi apici (ma possono anche essere singoli) devono essere sempre impiegati quando il nome del carattere è composto da più parole.
Il nome del font è case sensitive: "Lucida Sans Unicode" scritto come "Lucida sans UNICODE" non produrrebbe alcun risultato.
Ma se vuoi utilizzare un carattere di tua scelta, diverso da quelli Web Safe? È possibile? Certo, grazie a CSS3!
Grazie alla direttiva @font-face, è possibile utilizzare un proprio font e renderlo disponibile per le tue pagine HTML. Quando un utente visualizzerà la tua pagina, scaricherà e abiliterà temporaneamente quel carattere. In questo modo, potrai così rendere ancor più personale il tuo sito con il carattere che più ti aggrada!
Tuttavia, il procedimento non è così semplice e immediato rispetto a quanto visto prima per i font Web Safe. La conversione, infatti, del carattere deve essere fatta da un software apposito e, inoltre, devi verificare che il carattere che vuoi utilizzare abbia la licenza per essere impiegato sul web. Infine, valuta anche il fatto che il carattere andrà a pesare molto sul caricamento delle pagine2. Tuttavia, per iniziare a “giocare” con i caratteri, ti posso consigliare una visita a Font Squirrel, sito specializzato dove potrai trovare molti font gratuiti, diversi dei quali già convertiti per essere utilizzati sul web. Ti basterà scaricarli e allegare il CSS che troverai nell’archivio, utilizzando il nome assegnato. Ad esempio, il font Aaargh presenta al suo interno questo CSS.
@font-face {
font-family: ′aaarghnormal′;
src: url(′Aaargh-webfont.eot′);
src: url(′Aaargh-webfont.eot?#iefix′) format(′embedded-opentype′),
url(′Aaargh-webfont.woff′) format(′woff′),
url(′Aaargh-webfont.ttf′) format(′truetype′),
url(′Aaargh-webfont.svg#aaarghnormal′) format(′svg′);
font-weight: normal;
font-style: normal;
}
Puoi leggerlo molto semplicemente in questo modo. Innanzitutto, nella prima riga noterai la direttiva @font-face. Questo significa che tutto ciò che sta al suo interno è una definizione per un nuovo carattere. Per questo motivo, il font-family utilizzato qui è necessario per definire il nome del carattere. Successivamente noterai alcuni src (source): sono i collegamenti ai rispettivi font che troverai all’interno della cartella scaricata. Perché ce ne sono molti? Semplice: ogni browser legge un’estensione diversa! Ad esempio, Google Chrome legge i .woff e non sa per nulla cos’è un .ttf. Viceversa, un dispositivo mobile potrebbe leggere un file .svg, e non prendere in cosiderazione i restanti formati.
Valuta bene se utilizzare tutti i formati di font o meno. Su http://caniuse.com/#search=woff puoi vedere come il formato .woff sia correttamente letto dai browser più recenti. Potresti, quindi, utilizzarlo esclusivamente tralasciando tutti gli altri formati.
Una volta allegato questo file CSS, nella definizione del carattere del tuo foglio di stile ti basterà inserire questo:
p{
font-family: ′aaarghnormal′, Arial, Helvetica, sans-serif;
}