Sifr: font personalizzabili per il tuo sito web

Sifr: font personalizzabili per il tuo sito web

1207
6
CONDIVIDI

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.

  • Miks

    Grandissimo! Io ho utilizzato spesso e volentieri Cufon però la procedura è molto laboriosa e incasinata rispetto questo Sifr……….unica cosa, al posto dei caratteri speciali mi compare un simboletto, dipende dal font vero?

  • admin

    no! quando selezioni il font dal flash devi impostare anche l’embed relativo al set dei caratteri speciali, dovresti trovare un campo testuale dove imputare le varie vocali accentate, punti interrogativi ecc…

  • Michele Damato

    Ciao, gran bel posto. E’ una tecnologia che vorrei utilizzare nel B2B della mia azienda. Ti contatterò privatamente per avere maggiori delucidazioni. A presto!

  • GuerrillaWeb

    Utilissimo, grazie!

  • Barbara

    Ciao, probabilmente sto sbagliando qualcosa nei passaggi ma a me non funziona, non funziona neanche l’esempio… posso chiederti aiuto? Grazie

  • Provate Font2Style, un sito semplice e veloce con centinaia di font pronti da usare!