Membro di PiperitaLab
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

Scritto da il 16 aprile 2010 in Xhtml e css - 12 Commenti - 23 visite

E voi direte….eh?

ahahahh ora ve lo spiego. Guardate la seguente immagine:

Immagine 17 450x120 Esercizio di stile con css3, font face e behaviour per explorer

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!

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura

L'Autore

Laura Gargiulo, webdesigner freelance. Web architect senior, esperta xhtml, css, usabilità, design, cms, webmarketing e Seo, Wordpress specialist. Membro del progetto di prossima pubblicazione Piperita Lab e dell'IWA Italy Visita il mio sito personale Lauryn.it e contattami pure per un preventivo gratuito.

homeSito personale|archiveArchivio autore

12 Commenti

  1. Lauryn (4198 comments)
    Scritto il 16 aprile 2010 alle 08:37

    coincidenza stamattina ne parla anche Tomstardust qui: http://www.tomstardust.com/archives/personalizzare-font-typekit/

  2. Giorgio (7 comments)
    Scritto il 16 aprile 2010 alle 10:53

    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?

  3. Pat (2 comments)
    Scritto il 16 aprile 2010 alle 11:27

    Veramente Fantastico!

  4. Cristian (90 comments)
    Scritto il 16 aprile 2010 alle 12:01

    Beeeeeeeello! Come funzionano in breve questi convertitori di font?

  5. Cristian (90 comments)
    Scritto il 16 aprile 2010 alle 12:02

    Come non detto, ho letto il link di Lauryn thanks!

  6. Andrea Leti (93 comments)
    Scritto il 16 aprile 2010 alle 12:07

    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

  7. Giorgio (7 comments)
    Scritto il 16 aprile 2010 alle 13:03

    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.

  8. Lauryn (4198 comments)
    Scritto il 16 aprile 2010 alle 13:07

    bravo Giorgio, risposta azzeccatissima. concordo :)

  9. Paolo (91 comments)
    Scritto il 16 aprile 2010 alle 14:49

    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.

  10. vittorio (56 comments)
    Scritto il 16 aprile 2010 alle 15:36

    molto interessante

  11. Francesco Caruccio (141 comments)
    Scritto il 16 aprile 2010 alle 21:54

    Complimenti Giorgio! :) ci vorrebbe più gente come te che sperimenta!

  12. webdirector (1 comments)
    Scritto il 24 gennaio 2011 alle 22:55

    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!

Scrivi un commento!

© 2012 Italian webdesign. Diritti riservati. Ideato da Laura Gargiulo - Icone di Komodo Media - Logo di W3B.