sIFR Flash Replacement

Questo post vuole essere una miniguida su come includere font particolari nelle vostre pagine html senza l’utilizzo di tecniche di image replacement o attraverso l’inclusione di files flash.

Poniamo anche noi di avere il problema dell’utilizzo di un font particolare per il tag h1 e sapendo come questo sia importante per l’indicizzazione non vorremmo utilizzare immagini o filmati flash.
Per far questo utilizzeremo sIFR reperibile al sito mikeindustries. Una volta scaricati i files quelli che ci serviranno sono:

• customize_me.as
• dont_customize_me.as
• sifr.js
• sifr-screen.css
• sifr-print.css
• sifr.fla

Per prima cosa apriamo il file sifr.fla un doppio click sul rettangolo bianco nel centro dello stage entreremo nel textbox, rendendo visibile una scritta “do not remove this text” un ulteriore click e potremmo accedere alle proprietà del font.

Ora possiamo scegliere il font che vogliamo utilizzare ad es. “Balke” . Una volta selezionato generiamo .swf e lo salviamo chiamandolo blake.swf.

Creiamo ora un file js che chiamiamo blake.js, in questo file inseriamo le seguenti righe di codice:

if(typeof sIFR == "function"){
sIFR.replaceElement("h1","aapex.swf","#B2181A",null,null,"#FFF",0,0,0,0);
}

Questo pezzo di codice serve per utilizzare le funzioni di sIFR sul tag h1. Salviamo infine il file e lo chiudiamo. Per ultima cosa creiamo un file index.html e inseriamo tra i tag del body

<h1>DiGiness</h1>

mentre nel tag head inseriamo

<script type="text/javascript" src="sifr.js"></script>
<script type="text/javascript" src="blake.js"></script>
<link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print">

Finito! il nostro h1 apparirà magicamente con il font prescelto Blake

Fonti:

• sIRF
• html.it