Web font: nuova sintassi

This is an old article, from a time I thought I’d be writing this blog in Italian. Now I’ve changed my mind and everything new is supposed to be in English. Since there is nothing particularly interesting or original in these old posts, I’ll just leave them here in Italian. If you can’t read Italian, you’re not missing much.

Uno dei problemi di cui si sente spesso molta gente lamentarsi è che “non passa giorno senza che cambi qualche sintassi”.

Naturalmente non è vero, ma effettivamente ogni tanto qualcosa cambia e tenersi aggiornati è una buona idea… come in questo caso.

La sintassi “a prova di proiettile” per l’inclusione dei web font che vi avevo riportato qualche tempo fa… non ha resistito ai proiettili di Android e di Internet Explorer 9 in modalità compatibile 7 e 8, ecco quindi la nuova sintassi!

Questa volta dobbiamo ringraziare Fontspring che in una serie di due articoli ha aggiornato la sintassi di Paul Irish in una che a oggi funziona davvero ovunque.

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot'); 
	src: url('myfont-webfont.eot?iefix') format('eot'), 
	     url('myfont-webfont.woff') format('woff'),
	     url('myfont-webfont.ttf')  format('truetype'), 
	     url('myfont-webfont.svg#svgFontName') format('svg'); 
}

Vediamo in breve le modifiche.

IE cerca di leggere tutti i formati (fallendo) e a questo si rimedia aggiungendo un “?” nella dichiarazione del suo formato (.eot). La doppia dichiarazione .eot serve per la modalità compatibile 7 e 8 di Internet Explorer 9. Inoltre, il formato corretto dell’.eot sarebbe “embedded-opentype”, ma cambiandolo in qualsiasi altra cosa (per esempio proprio “eot”) Internet Explorer 9 lo salta… giungendo quindi al .woff che supporta (e che è indubbiamente migliore dell’.eot). Tutto sistemato per IE.

Per Android il problema era la “faccina” (o meglio, il “local”) che è quindi stato rimosso. Chi preferisse non far caricare i web-font ad Android (per motivi di banda) può tranquillamente reintrodurla.

Lo stesso discorso vale per iPhone/iPad/iPod: l’ultima riga, quella con l’svg, serve per i dispositivi Apple con vecchie versioni del software (l’ultima versione supporta .ttf) e molti preferiscono rimuoverla sia per motivi di banda, sia per la scarsezza dell’svg come formato di font.

1 Comment

  1. Gastos . Pero ha tryiong no obstante. He estado usando WordPress del varios varias páginas web desde hace
    un año y estoy nervioso ansiosa acerca de cambiar a otra plataforma.
    He oído buenas cosas sobre blogengine.net . ¿Hay una manera que puedo importación toda mi wordpress Mensajes
    en él ? Cualquier tipo de Cualquier ayuda sería muy grandemente apreciada!

Leave a Reply

Required fields are marked *.