Sifr via javascript con Typeface

Nel fronte delle tecniche Sifr, anzichè creare immagini “al volo” oppure usare file Flash – come fa un famoso plugin per WordPress – per mostrare un testo usando un font “non convenzionale” (arial, verdana, impact, …) si può ora usare Typeface.js, usando semplicemente HTML e CSS, e l’effetto è come se i visitatori del sito avessero il font usato installato nel proprio computer!

Lo script usa le capacità di disegno vettoriale proprie del browser per disegnare il testo nelle pagine html. Il progetto comprende due componenti: il modulo Perl per la conversione dei font, e la libreria javascript per disegnare i font nel browser. Il modulo Perl estrae i dati grafici dai font True Type e li riscrive in formato JSON; il javascript usa il tag <canvas> o VML per disegnare i caratteri.
Il codice è gratuito e open source, supporta i browser moderni (a partire da IE6) e negli altri casi mostra il testo normalmente; supporta pure le proprietà CSS font-stretch, letter-spacing e altre.

L’autore è comunque conscio dei limiti della sua creazione, ed infatti ammette che c’è ancora strada da fare tra aggiornamenti ed implementazioni, come il mancato supporto per lo pseudo-selettore :hover.

link: Typeface.js

6 pensieri su “Sifr via javascript con Typeface”

  1. Ci ho fatto anch’io un post tempo fa. Domanda: sei riuscito a convertire un font nel formato di typeface?

    Io mai. Qualunque font scaricato anche da siti free mi dava un errore…

    Abbandonato comunque. Meglio flir + jQuery.

  2. Ciao Napo, dunque…
    convertire il font sì, riuscire ad usare il sistema… anche!
    All’inizio non ci riuscivo ma poi credo di aver scoperto l’inghippo: ad esempio, invece di scrivere…
    style="font-family:optimer_regular"
    …ho scritto…
    style="font-family:optimer"
    Ci sono arrivato aprendo il file JS del font che mi ero fatto e leggendo, alla fine, “full_font_name”:”[nome del font]”, ed ho pensato di usare quel nome.

  3. Usare l’ho usato, ma convertire font… Zero. Al 10° tentativo con font diversi l’ho mandato tranquillamente a quel paese. 😉

  4. Io ce l’ho fatta al 2° colpo, solamente perché il primo font che ho provato aveva i permessi ‘ristretti’.
    Scusa, una domanda… ma sei capitato qua per caso o come?

  5. Io ho provato 10 font (tra i più diffusi, presi da dafont.com e simili) e l’errore è stato sempre “permesso non valido, problema di copyright” (o simile)

    Sono arrivato qui da Friendfeed. Qualcuno mi pare l’abbia messo in delicious…

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

You can add images to your comment by clicking here.