Sifr: font personalizzabili per il tuo sito web

Quante volte il layout da voi disegnato non trasmette l’effetto desiderato anche sul web per via di piccoli dettagli come ad esempio il lettering dei font? In questo tutorial fornirò un diversivo interessante ed assolutamente accessibile: si chiama Sifr ed effettua un text replacement Flash in collaborazione con Javascript.

Cosa fa esattamente il text replacement?

Mettiamo il caso che ho l’esigenza di abbellire un titolo o una serie di titoli dinamici generati tramite query con un font particolare, anzi il più strano, quello che nessuno ha. Utilizzando Sifr qualsiasi utente sarà in grado di visualizzare il font da voi impostato anche se sul suo computer fisicamente non esiste.

Come si utilizza Sifr?

Scaricato il pacchetto completo noterete 5 file:

• font.fla;
• font.swf;
• sifr-config.js
• sifr.css;
• sifr.js

Ciò che andremo a modificare saranno solo i file di estensione .fla e il sifr-config.js, il resto va incluso nell’header della pagina web ma procediamo passo dopo passo:

1. Creazione del font

1. Aprire il file “font.fla”:

2 Con lo strumento Text Tool evidenziare tutto il testo d’esempio:

3. Selezionare il font, nella foto sottostante ho scelto “Bauhaus 93”, un carattere che non è installato di default su tutti i sistemi operativi.

4. Esportare il filmato (Ctrl + Enter per pc, Mela o Cmd + Invio per Mac).

5. Appena esportato il filmato abbiamo creato il nuovo file “font.swf” che utilizzeremo come campione per il replacement.

Intestazioni

Prima di eseguire il replace vero e proprio ricordiamoci di inserire le chiamate ai Javascript come nella foto sottostante:

Oltre le tre chiamate ai javascript ed al css ho incluso la chiamata al font che ho memorizzato in una variabile di nome “bauhaus93” che configuro nel sifr-config.js.

Text replacement

Il cuore dello scripta risiede nel file sifr-config.js, è li che si imposta il carattere, la dimensione, il letter spaccino, colore e qualsiasi altro parametro css.

1. Apriamo sifr-config.js

Intuendo dal codice possiamo modificare il css del carattere a nostro piacimento e creare più classi per lo stesso font, in questo caso nell’esempio tutti gli h2 di class “replace” assumeranno le caratteristiche css da noi dettate.

Lanciate la pagina ed il gioco è fatto!

Scarica sifr

Clicca qui per scaricare sifr compreso di esempio già funzionante.

Parametri aggiuntivi

Oltre alle varie proprietà css possiamo abbellire ulteriormente il nostro carattere con delle ombre, i parametri ammessi sono i seguenti:

• distance – distanza dell’ombra dal carattere;
• color – colore dell’ombra;
• alpha – opacità;
• blurY e blurX – sfocatura

Conclusioni

Con un metodo semplice ed efficace si può ovviare alla solita scelta di font Arial, Verdana, Sans-serif e mettere in gioco un tocco di creatività in più nel vostro layout.