Javascript

Sostituire il font al proprio sito web

Oggi scoprirete come sostituire un qualunque font sul vostro sito web utilizzando il font replacement in modo da poter poterlo personalizzare e rendere l'aspetto grafico ancora più gradevole.

Una delle tecniche più recenti e funzionali è il Cufon, che permette appunto la sostituzione del normale web font con un altro tramite del codice Javascript; in questa maniera il nostro testo in html sarà riscritto a video con il nostro font personalizzato.

 

Per tanto, una volta creata la nostra pagina web con testi e quant'altro procediamo in tal senso:

Step1

Scarichiamo il Cufon,  e lo salviamo in un file javascript (.js) collegandolo ovviamente alla nostra pagina web.

  1. <script type="text/javascript" src="javascript/cufon.js"></script>

Step2

A questo punto dobbiamo scegliere il font da utilizzare, ricordandoci di avere a portata di mano i file relativi al carattere, procediamo quindi a caricare tali file nel generatore di codicei Cufon .

Otterremo quindi un file .js con le istruzioni di codice per effettuare la sostituzione del nostro testo html.

Step3

Ci verrà chiesto di caricare i vari file del font in modo da avere più caratteri possibili da sostituire, ovvero: sarà richiesto il font regular, il bold, ecc..e poi ancora la punteggiatura, i simboli e sopratutto i diritti alla pubblicazione. In ogni caso una volta completato verrà generato uno o più files javascript con il nome del vostro font e il corpo che andranno scaricati e linkati alla vostra pagina html.

  1. <script type="text/javascript" src="nomefile.js"></script>

Step4

Per perfezionare ancora di più il nostro lavoro basterà  dare allo script javascript  alcune istruzioni per una miglior sostituzione del carattere. Si ordinerà quindi di sostituire, ad esempio solo i tag h1 e il testo dei paragrafi:

  1. <script type="text/javascript"> Cufon.replace(['h1','p']); </script>

Troverete comunque molte altre opzioni aggiuntive nella sezione dedicata del sito Cufon.

Nota Importante:

Possono capitare problemi di incompatibilità con Internet Explorer 9, per risolverli seguite la Soluzione ai problemi di visualizzazione di IE9

0 risposte per ['Sostituire il font al proprio sito web ']

Non preoccuparti, il tuo indirizzo email non sarà pubblicato :)

Il contenuto di questo campo è privato e non verrà mostrato pubblicamente.