Parlando di Dive into HTML 5, abbiamo anche tessuto le lodi delle scelte tipografiche adottate sul sito grazie all'uso nei CSS di font particolari e incorporati nella pagina tramite @font-face.

In effetti, la possibilità  di far scaricare un font specifico, senza quindi doversi preoccupare che esso sia presente sul PC dell'utente, apre vie straordinariamente interessanti, soprattutto ora che tale funzionalità  è supportata da tutti i principali browser.

Come molti sanno, uno dei problemi nell'adottare questa soluzione deriva dal fatto che Internet Explorer supporta come formato il solo EOT. Cià rende necessario, ogni volta, avere a disposizione o creare la versione EOT di un font TrueType. Il tutto deve poi avere corrispondenza nelle regole CSS:

/* IE6/7/8 - Questa dichiarazione deve essere all'inizio */  
@font-face {  
  font-family: nomeDelFont;  
  src: url( /nomeDelFont.eot );  
}  
 
/* Firefox 3.5/Safari/Opera 10 */  
@font-face {  
  font-family: nomeDelFont ;  
  src: url( nomeDelFont.ttf );  
} 

Sul sito Font Squirrel è possibile scaricare dei veri e propri kit per l'uso di @font-face. In un singolo pacchetto si trovano le versioni EOT e TTF del font prescelto e un CSS di esempio. Comodo. Ampia la scelta dei font gratuiti messi a disposizione.

11 CommentiDi' la tua

Il tuo indirizzo email non sarà mostrato pubblicamente. I campi obbligatori sono contrassegnati da *

... in effetti questa notizia apre molti orizzonti!!! ma siamo sicuri che funziona con tutti i browser??

Gianluca
Gianluca

[...] Sull'ennesima morte di RSS... (23)Tutto ha un prezzo (19)Uso quel linguaggio... e sono felice (17)Storie di interfacce (12)Voi vi sentite "adatti ad ogni esigenza"? (10)Una collezione di font gratuiti per usare @font-face nei CSS (9)Un tuffo in HTML 5 (7)Effetto Polaroid con i CSS (7)Immagini 'fluide' con jQuery (6)Ispezionare i colori con CSS Prism (4) [...]

Il modo migliore per usare @font-face | Edit - Il blog di HTML.it
Il modo migliore per usare @font-face | Edit - Il blog di HTML.it

Per chi volesse evitare di sprecare banda, ogni font pesa fino a 100Kb o più, o poplare il server di errori, IE non capisce un accidente di niente, questo é il risultato di almeno 4 persone, me compreso, che si sonmessi giù a capire cosa c'era che non andava, e cosa si poteva fare per risolvere. L'update per la soluzione, post più commenti per approfondire: http://webreflection.blogspot.com/2009/09/font-face-we-are-already-doing-wrong.html

andr3a
andr3a

Volevo utilizzare font-face e il post di Cesare mi ha dato lo spunto con l'ottimo kit di squirrel. Orrore! Contrariamente alle mie aspettative con IE si visualizza correttamente e con Firefox NO! Firefox non supporta la funzionalità  font-face se il font non é presente nello stesso dominio. Su Blogger non é possibile farlo. Quindi? Qualcuno ha una soluzione "pulita"?

ester
ester

Un altra modifica dell'esempio, in termini di performance, potrebbe essere questa: se il font é particolarmente completo di caratteri e simboli ma a noi serve ad esempio il solo set di caratteri Latin-A é possibile definire la proprietà  unicode-range : U+00??, U+01??; Questa regola permetterà  di scaricare i soli caratteri che fanno match con il set richiesto, diminuendo pertanto i tempi di caricamento e di rendering (di default il valore di questa proprietà  dovrebbe essere U+07FF). E' possibile definire valori singoli o intervalli di valori ed é consentito l'uso di wildcards (* e ?)

Fabrizio Calderan
Fabrizio Calderan

Tutto ciò quando in rete impazza la polemica per l'IKEA che é passata al Verdana persino per il catalogo cartaceo :)

Gennaro
Gennaro

Grazie ad Andr3a per l'appunto e a Troglos per la precisazione :) Sono un po' pigro ultimamente e ho ancora la beta di Safari 4, non ricordo di aver mai visto quel messaggio a dire il vero, forse lo hanno aggiunto per motivi di sicurezza nella release finale... approfondirò ;)

Cesare Lamanna
Cesare Lamanna

Cesare grazie per il link, molto utile. Unico appunto, il tuo esempio non e' dei piu' corretti (anche se dei piu' usati online) perche' in quel modo IE fara' 2 richieste invece che una, ergo pagine lente a caricare se si usano piu' fonts o se ne usano di pesanti poiche' IE scarica prima l'eot, poi l'altro anche se non lo utilizza (FF e gli altri invece ignorano la prima e la sovrascrivono, troppo difficile da fare per IE ... eh?) Ci sono controversie sulla tecnica migliore per evitare doppia richiesta al server, per ora posso dirti che commenti condizionali per i CSS sul layout (classico .. ) per la sola definizione o inclusione dei fonts sono i piu' "sicuri".

andr3a
andr3a

@Cesare: Safari 4.0.2 su Mac Quando ho accettato ho cliccato sul flag "non chiedermelo in futuro", quindi magari l'hai fatto in passato...? boh comunque ora che ricordo mi é gia capitata sta cosa parecchio tempo fa

Troglos
Troglos

Troglos, per quanto ne so (link), i web fonts sono supportati da Chrome in quanto basato su webkit, ma la funzionalità  é stata disabilitata per motivi di sicurezza. Curiosità : che versione di Safari usi e su quale sistema operativo? Suppongo Windows, perché su Mac non mi é mai capitata una situazione del genere...

Cesare Lamanna
Cesare Lamanna