Font Non Standard con CSS3

Spesso capita di voler utilizzare nei nostri progetti, font non standard , che ci obbligano a realizzare delle immagini oppure a utilizzare javascript e librerie affine.
Oggi invece vi introduco un metodo molto semplice per poter utilizzare font non standard con @font-face.
In realtà font-face viene supporto al 100% da tutti i browser che supportano CSS3, ma possiamo anche farlo supportare a ie con qualche tecnica particolare.
Questa è la sintassi da utilizzare:
1 2 3 4 5 6 7 8 9 10 11 | @font-face { font-family: Nome_del_font; src: url("file.eot") /* EOT per ie*/ } @font-face { font-family: Nome_del_font; src: url("file.ttf") /* TTF per tutto il resto :)*/ } p { font-family: 'Nome_del_font', sans-serif; } |
Abbiamo utilizzato il .ttf per i browser che utilizzano CSS3 mentre il file .eot per internet explorer.
Qua un semplice esempio. Ovviamente non tutti i font in nostro possesso hanno la loro versone eot, per questo vi consiglio questo simpaticcissimo servizio di conversione online da ttf a eot
.
Alla prossima
Potresti trovare interessante anche





28 ottobre 2010

Ciao Rocco ti seguo da poco, scrivo per la prima volta =P
A riguardo ti segnalo fontsquirrel.com che mette a disposizione parecchi font belli e pronti per essere inseriti nei siti.
Utilissima anche la galleria font di google (non c’è neanche bisogno di caricare il font nel proprio sito).
Poco tempo fà scrissi un’articoletto:
http://www.succodesign.it/includere-font-non-standard-nei-nostri-siti/
Posso farti una domanda: Usi un plugin per mostrare gli ultimi articoli delle diverse sezioni nella sidebar?
Un saluto