Home » Xhtml, Css e Ajax » Xhtml e css » Esercizio di stile con css3, font-face e behaviour per explorer
Esercizio di stile con css3, font-face e behaviour per explorer
E voi direte….eh?
ahahahh ora ve lo spiego. Guardate la seguente immagine:
Ci credereste che è fatto solo con html e css?
Eheh guardate qui la pagina di esempio e scoprite da soli cosa è stato usato.
In sostanza:
- rounded corner dei css3 con correzione per explorer
- font-face, usando il convertitore per il font .eot di Windows e il seguente codice:
@font-face {
font-family: "Apantasia";
src: url("APANRG__.eot");
src: local("Apantasia"),
url("APANRG__.TTF") format("truetype");
}
Bravo il nostro Giorgio!



















Add to Google

12 Commenti
coincidenza stamattina ne parla anche Tomstardust qui: http://www.tomstardust.com/archives/personalizzare-font-typekit/
Uhm però almeno nel caso di typekit (oltre a non essere free) a quanto ho capito bisogna dipendere da un server remoto, ok se pur stabile che sia però c’è sempre un anello in più nella catena giusto?
Veramente Fantastico!
Beeeeeeeello! Come funzionano in breve questi convertitori di font?
Come non detto, ho letto il link di Lauryn thanks!
Si però c’è da valutare due cose importantissime:
- il copyright sul font
- il peso del font che farebbe aumentare drasticamente in molti casi il peso della pagina finchè non lo scarica
Si beh ovviamente l’uso di questa tecnica deve essere valutato in base alla percentuale d’uso del font nella pagina, anche se sul piatto della bilancia ci sarebbe il peso delle immagini alternative. Per quanto riguarda il copyright del font, la licenza va valutata in qualsiasi caso, sia che lo usi in immagine sia che lo usi come font vero e proprio, difatti nel mio caso ho scelto un font free.
bravo Giorgio, risposta azzeccatissima. concordo
io uso typekit ma qualche problemino lo da. Però almeno il problema delle licenze non c’è. Se ti serve solo un font poi è pure gratuito.
molto interessante
Complimenti Giorgio!
ci vorrebbe più gente come te che sperimenta!
Vi segnalo un articolo per poter implementare senza alcun bug su tutti i browser (dalla versione 5 di Internet Explorer fino ad Opera, passando per tutte le versioni di mezzo di Safari, Chrome e Firefox) la regola di @font-face. Allo stato dell’arte sono stati corretti tutti i problemi di render in IE (doppia regola) e in WebKit per il render dei caratteri di tipo bold.
http://www.hightechware.it/sharedtip.php?id=9
Buona lettura a tutti!