{"id":1346,"date":"2011-04-06T11:30:42","date_gmt":"2011-04-06T10:30:42","guid":{"rendered":"http:\/\/www.simonedesign.it\/blog\/?p=1346"},"modified":"2011-04-07T21:17:20","modified_gmt":"2011-04-07T20:17:20","slug":"css3-font-face-compatibilita-cross-browser","status":"publish","type":"post","link":"https:\/\/www.simonedesign.it\/blog\/css3-font-face-compatibilita-cross-browser\/","title":{"rendered":"CSS3 @font-face: compatibilit\u00e0 cross-browser"},"content":{"rendered":"
\n<\/div>

\"CSS3<\/a><\/p>\n

Continua la rubrica mensile Propriet\u00e0 CSS3<\/a><\/strong>, contenente tutte le novit\u00e0 dei CSS nel Web 2.0.<\/p>\n

La propriet\u00e0 CSS3 di oggi \u00e8: @font-face<\/strong>, che permette di utilizzare font non standard. Fin’ora infatti mediante la propriet\u00e0 css font-family si poteva specificare un carattere tra quelli standard o installati nella maggior parte dei sistemi operativi (es. verdana, tahoma, arial, serif…).<\/p>\n

<\/p>\n

@Font-face \u00e8 compatibile con tutti i browser?<\/h4>\n

La propriet\u00e0 @font-face \u00e8 stata introdotta gi\u00e0 dal CSS 2.0 nel quale bastava specificare l’url del font da scaricare nel caso in cui non fosse installato gi\u00e0 nel computer del visitatore, senza per\u00f2 un supporto totale da parte dei browser e perci\u00f2 rimossa gi\u00e0 dalla versione CSS 2.1. Ora che tutti i browser la supportano<\/strong>, la regola @font-face \u00e8 stata reintrodotta nei CSS3.<\/p>\n

A questo punto la domanda sorge spontanea: Internet Explorer come si comporta davanti a @font-face? Incredibile ma vero, tale propriet\u00e0 \u00e8 compatibile con IE si dalla versione 4, tuttavia non si tratta di una compatibilit\u00e0 cross-browser totale, infatti i caratteri pi\u00f9 diffusi, quelli con estenzione TrueType<\/strong> (.ttf) non vengono considerati dal browser della Microsoft, che possiede un formato di propriet\u00e0 l’Embedded OpenType<\/strong> (.eot) derivato dallo standard OpenType.<\/p>\n

 <\/p>\n

Supporto dei browser<\/h4>\n

\"tabella<\/p>\n

Come si pu\u00f2 fare se il font che intendiamo inserire nel nostro sito \u00e8 stato rilasciato solo nel formato .ttf? Si pu\u00f2 usare il @font-face kit generator di Font Squirrel<\/strong><\/a>.<\/p>\n

 <\/p>\n

Sintassi e definizione di @font-face<\/h4>\n

La regola per attivare la propriet\u00e0 \u00e8 molto semplice, \u00e8 composta da due parametri obbligatori e due omissibili:<\/p>\n

font-family<\/strong>: con cui si definisce il nome del font (necessario);
\nsrc<\/strong>: contenente il path del font (necessario);
\nfont-weight<\/strong>: con cui si stabilisce lo spessore del carattere, predefinito “normal”;
\nfont-style<\/strong>: con cui si definisce lo stile del carattere (normal, italic, oblique, inherit)<\/em>.<\/p>\n