CSS3 font face: non ci sono più limiti nell’utilizzo dei font in un sito web
Risolvi il cronico dilemma tipografico di ogni web designer: la scelta limitata dei fonts…
I CSS3 sono l’ultima versione delle specifiche CSS sviluppate all’interno del W3C. Non rappresentano un nuovo linguaggio, ma un gruppo di regole, proprietà e selettori che si aggiungono alle versioni precedenti (CSS1 e CSS2.1).
Come ogni nuova specifica, si presenta in uno stato non definitivo e soprattutto non ancora compatibile con tutti i browser. Per avere un’idea dello stato dell’arte, aggiungete ai preferiti questo link: HTML5 & CSS3 Support.
Ma nonostante i limiti oggettivi, ci sono molti buoni motivi per incominciare a utilizzare questa nuova specifica: non solo perchè – parafrasando Andy Clarke (www.hardboiledwebdesign) – nessun browser supporterà i CSS nello stesso identico modo e bisogna accettare le fredda verità che un sito web non si presenterà mai nello stesso modo in tutti i browser. C’è anche un altro motivo: esiste una regola dei CSS3 che può essere implementata in tutti i browser, Internet Explorer, compreso. Si tratta di font-face, una piccola goccia che produrrà a breve una vera e propria rivoluzione nel web, per come lo abbiamo conosciuto e studiato fino ad oggi.
La regola di @font-face permette di utilizzare caratteri scaricabili da un web server sul computer dell’ utente finale, risolvendo il cronico dilemma tipografico di ogni web designer: ovvero la scelta dei fonts, limitata fino a ieri a quei pochi caratteri compresi nei set di fonts più comuni e pre-installati sui pc dell’ utente. Non solo Arial e Verdana (i cosiddetti web safe fonts), ma – potenzialmente – tutti i font per cui sono stati creati set in formato .eot e .ttf (vedi questi esempi: ilovetypography.com).
Vediamo quali sono i pochi semplici passi da seguire:
- Scarica e/o acquista il tuo font preferito. Attenzione, perchè anche qui si pone il problema tipico di una composizione editoriale: non tutti i caratteri sono utilizzabili gratuitamente. Meglio accertarsi quindi di disporre di una licenza per l’utilizzo oppure scegliete font con una licenza gratuita (seguendo questo link potete trovare risorse sia gratuite che a pagamento: www.fontspring.com).
- I font sono distribuiti normalmente nel formato .eot (Embedded Open Type) e .ttf (True Type Font): per poterli usare attraverso un web server è necessario convertirli anche in formato .woff (formato comune per browser di tipo webkit, come Safari e Chrome, ma ormai di tipo standard anche per Firefox, Opera e per la versione 9 di Internet Explorer).
Per compiere questa operazione esiste una risorsa on-line gratuita ed estremamente semplice da utilizzare: font-squirrel. Qui basterà caricare il vostro formato .ttf oppure .eot per ottenere non solo la conversione in .woff, ma anche il codice CSS3 da aggiungere al vostro foglio di stile. - Implementare una regola di @font-face richiede limitate righe di codice: è indispensabile, però seguire l’ordine descritto nella figura 4 per garantire la stessa identica resa su tutte le versioni di Internet Explorer (compresa la versione 5!), di Firefox, Safari, Chrome e Opera. Attenzione a non fidarvi ciecamente del listato fornito da font-squirrel, perchè, per ovviare ad un noto bug di Internet Explorer, occorre descrivere due regole di @font-face: la prima, in ordine di sequenza, deve contenere le indicazioni per scaricare il file in formato .eot (indispensabile per tutte le versioni di Internet Explorer dalla 5 alla 8), mentre la seconda contiene le indicazioni per tutti gli altri browser. Nella seconda non è casuale l’indicazione di un carattere non comune (es. uno smiley) per forzare il download del font servito attraverso il web server, al posto di un eventuale font rintracciato sul computer locale.
Strano a dirsi ma, nella seconda regola, anche Safari e co. hanno mostrato un piccolo bug nella resa dei caratteri in grassetto: occorre infatti inizializzare le loro proprietà di spessore (font-weight) e di stile (font-style) con l’attributo normal. - Una volta impostate correttamente le due regole, basterà richiamare il font nelle successive classi, semplicemente attraverso il suo nome con la proprietà font-family e tutte le dichiarazioni di stile, case, spessore, etc. desiderate.
Per avere un’idea delle infinite possibilità che possono derivare da un’utilizzo di questa regola, consiglio un sito che, a prima vista, sembrerebbe un prodotto di pura editoria… e invece si tratta di puro testo HTML! Prendete un buon respiro e cliccate su questo link.
Per approfondire e conoscere tutti gli aspetti del web design scopri tutti i dettagli dei nostri corsi.
Tag:CSS, Web Design