Share
La scorsa settimana, Philo ti ha mostrato come implementare sIFR3. Questa volta, vi mostrerò come implementare Facelift Image Replacement (o FLIR), un'alternativa allo sIFR che non richiede Flash.
Nota che la demo usa caratteri diversi da quelli usati nel tutorial per motivi di giusta copia.
Il primo passo è scaricare FLIR. Decomprimere il download e posizionare la cartella all'interno (facelift-1.1.1) da qualche parte sul server web. Ho rinominato la cartella semplicemente "ringiovanimento del viso" per semplificare le cose.
All'interno della cartella Facelift c'è un file Javascript denominato "flir.js". Puoi scegliere di lasciarlo lì, oppure puoi spostarlo altrove come una cartella centralizzata per i file Javascript. Per questo tutorial lo faremo e lo sposteremo in una cartella chiamata "js" nella directory principale del nostro sito.
Ora apri flir.js nel tuo editor di testo preferito e vai alla riga 30. Dovrebbe assomigliare a questo:
,sentiero:"
Dobbiamo inserire un percorso assoluto o relativo alla nostra directory di facelift tra le due virgolette singole. Tuttavia, i percorsi relativi sono relativi alla pagina e non al file flir.js, che potrebbe causare alcuni problemi con i siti che utilizzano mod_rewrite per creare URL carini. Il modo più sicuro per far funzionare tutto è fornire un percorso assoluto.
,percorso: '/ percorso / a / facelift /'
Apri la pagina a cui vuoi aggiungere FLIR e aggiungi il seguente tag tra i head tag per allegare flir.js:
Quindi aggiungi quanto segue subito prima del tag body di chiusura:
Questo passaggio è abbastanza semplice. Scarica i caratteri che desideri utilizzare. Userò Delicious, Tallys e Tusj. Inserisci i tuoi caratteri nella cartella "fonts" all'interno della cartella "facelift". Apri config-flir.php e troverai un blocco di codice simile a questo:
// Ogni carattere che si desidera utilizzare dovrebbe avere una voce nella matrice dei caratteri. $ fonts = array (); $ fonts ['tribalbenji'] = 'Tribal_Font.ttf'; $ fonts ['antagea'] = 'Antagea.ttf'; $ fonts ['illuminating'] = 'ArtOfIlluminating.ttf'; $ fonts ['bentham'] = 'Bentham.otf'; $ fonts ['geo'] = 'Geo_Oblique.otf'; $ fonts ['puritan'] = 'Puritan_Regular.otf'; $ fonts ['konstytucyja'] = 'Konstytucyja_1.ttf'; $ fonts ['promocyja'] = 'Promocyja.ttf'; $ fonts ['stunfilla'] = 'OPN_StunFillaWenkay.ttf'; $ fonts ['animaldings'] = 'Animal_Silhouette.ttf'; // Il font verrà impostato come segue (inserisci qui il tuo font più comune). $ fonts ['default'] = $ fonts ['puritan'];
Come puoi probabilmente dire dai commenti, ogni voce nell'array $ fonts è un font nella cartella fonts. La chiave dell'array tra parentesi è quella che usiamo nelle nostre dichiarazioni CSS quando vogliamo usare il carattere. Aggiungiamo i font che abbiamo scaricato in precedenza.
$ fonts ['ffftusj'] = 'FFF Tusj.ttf'; $ fonts ['deliciousheavy'] = 'Delicious-Heavy.otf'; $ fonts ['tallys'] = 'Tallys_15.otf';
Qualunque sia assegnata a $ fonts ['default'] verrà usata se non viene specificato un font. Facciamo in modo che Delicious Heavy sia l'impostazione predefinita.
$ fonts ['default'] = $ fonts ['deliciousheavy'];
Ci sono un certo numero di altre impostazioni nel file config-flir.php ma possono essere lasciate da sole. Ciò che ciascuna impostazione fa è abbastanza auto-esplicativa e ci sono commenti se vuoi modificarli.
Per impostazione predefinita, FLIR sostituirà le immagini solo per le intestazioni. Puoi specificare cosa dovrebbe essere sostituito passando una serie di selettori CSS alla funzione FLIR.auto () che abbiamo aggiunto nel passaggio 1.
FLIR.auto (['h1', 'h2', 'h3.alert', 'strong # important']);
Questo indicherà a FLIR di applicare la sostituzione dell'immagine a tag h1, tag h2, tag h3 con una classe di "avviso" e tag forti con un ID di "importante".
Ora tutto ciò che dobbiamo fare è applicare gli stili CSS come normali. Usa i tasti dell'array $ fonts come font nella dichiarazione CSS per usare quel font. Consente di applicare Tusj a tutti i tag h1, Delicious a tutti i tag h2 e Tallys a tutti i tag h3 con una classe di avviso.
h1 font-family: ffftusj, Georgia, serif; h2 font-family: deliciousheavy, Arial, sans-serif; h3.alert font-family: tallys, Arial, sans-serif;
Questo è tutto! I tag forti con un ID di "importante" ricadrà sul carattere predefinito che abbiamo specificato nel file config-flir.php, che in questo caso è Delicious Heavy. Il testo dell'immagine generata verrà ridimensionato a qualsiasi dimensione del carattere specificata nel CSS. Anche i colori CSS andranno bene, ma le trasformazioni del testo no.
Anche se FLIR è una soluzione abbastanza semplice per la sostituzione delle immagini di testo, ci sono alcuni problemi minori. La libreria GD di PHP non rende molto bene i dettagli fini, cosa abbastanza evidente nel font Tusj. Il testo in alto è stato renderizzato in Photoshop e il testo in basso è stato reso dalla libreria GD PHP utilizzata da FLIR.
Un altro con FLIR è che richiede un server web con PHP e la libreria GD. Tuttavia, la maggior parte degli host ha entrambi, quindi questo è trascurabile.
Un vantaggio di FLIR rispetto a sIFR, il suo principale concorrente, è che è più facile da implementare e non richiede Flash per creare o visualizzare.
Sia FLIR che SIFR sono soluzioni eccellenti e ti saranno utili. La maggior parte dei visitatori sarà in grado di visualizzare entrambi senza troppi problemi, ma per i pochi sul bordo della curva a campana che non hanno Flash, FLIR potrebbe essere una soluzione migliore.
Accentsconagua