Font Non Standard con CSS3


28 ottobre 2010 5 Commenti css, 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

pie_css3_su_internet_explorer_ie
Pubblicato in css, css3 |



Iscriviti alla newsletter

Vuoi ricevere ogni articolo che pubblico direttamente sulla tua mail ? Vuoi evitare di perdere qualsiasi articolo pubblico ? Registrati alla mia newsletter in un click.

Inserisci il tuo indirizzo mail:

5 commenti per Font Non Standard con CSS3

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

@ Gabriele Malaspina

Grazie per il commento ;) e per la tua condivisione di info in più.

Non uso un plugin, ma bensi le miniature che ti offre di base wordpress attraverso questa semplice funzione the_post_thumbnail().

Spiegarlo non è facile in un commento, se vuoi domani publico un articolo progammato per giovedì dove lo spiegavo, oppure ti invio il tutto via mail :) . Fammi sapere

@ Rocco Passaro

Mi farebbe davvero piacere saperne di più, la mia idea era elencarli come hai fatto tu per categorie e magari anche con i titoli.

In ogni caso come preferisci, o per mail o lo leggerò qui ;)
Grazie mille

[...] Rispettivamente per il primo consiglio dovrai queste due righe di codice , e per il secondo dovrai usare questa regola css. [...]

[...] Font non standard con css3 ( Ebug ) – Google Font – Servizio Innovativo ( Ebug ) – Come utilizzare font non standard su un [...]

Lascia un Commento