Sostituzione dinamica dell'immagine Tecniche e strumenti pratici

Quando si parla di web design, la creatività del design non deve essere frenata dalle scelte limitate di font web supportati che chiamiamo caratteri sicuri per il Web. I designer dovrebbero avere la libertà di utilizzare qualsiasi carattere preferito su titoli e contenuti.

Nel 2005, la sostituzione dinamica dell'immagine è stata resa popolare con una tecnica chiamata Sostituzione Flash Inman scalabile (sIFR). Sviluppato da Shaun Inman, SIFR si avvantaggia di Javascript e Adobe Flash per consentire ai web designer di utilizzare qualsiasi carattere personalizzato che preferiscono sul sito Web e mantenere comunque la visibilità a coloro che non hanno quel tipo di carattere. E mentre il web continua ad evolversi, oggi abbiamo più soluzioni alternative che utilizzano varie tecnologie, nel caso in cui non sei un fan di Flash.

Senza ulteriori indugi, diamo un'occhiata ad alcuni dei tecniche per ottenere sostituzioni di immagini dinamiche.

Tecniche comunemente usate

Ecco alcune delle tecniche più comunemente praticate per le sostituzioni di immagini dinamiche.

Sostituzione Flash Inman scalabile (sIFR)

sIFR è uno dei metodi più popolari per incorporare caratteri personalizzati sui siti web. Utilizza Javascript e Flash per generare caratteri tipografici personalizzati per il tuo sito Web e consente di selezionare il carattere tipografico convertito. A parte questo, il carattere tipografico convertito rimane come testo nei codici sorgente in modo che il motore di ricerca possa ancora eseguirne la scansione.

sIFR 2 (raccomandato) è l'attuale versione stabile, tuttavia se stai cercando di implementare sIFR, dovresti anche saperlo siFR 3 la beta è anche disponibile per il download. Potrebbe essere un po 'buggy, ma almeno risolve il problema di espansione dei font di sIFR 2.

Strumenti per SIFR che potrebbero rivelarsi utili:

sIFRvaultsIFRvault è un repository di font sIFR che puoi scaricare.
generatore sIFRStrumento online che ti consente di creare file .swf sIFR con pochi clic del mouse. Carica semplicemente il font TTF del font che desideri convertire, visualizzare in anteprima e scaricare.
Converti i caratteri in sIFRCarica un carattere .TTF e questo sito web li convertirà in file Flash sIFR.

sIFR Lite

Il sIFR originale è 22k, quindi Dave ha deciso di rielaborarlo usando un approccio più orientato agli oggetti e il risultato? 3 volte più piccolo a 3,7k.

Sostituzione di testo dinamico PHP + CSS (P + C DTR)

Come suggerisce il nome, questo è un metodo di sostituzione del testo che utilizza PHP e CSS che fanno uso del metodo originale descritto da Steward Rosenberger. È anche un miglioramento rispetto alla versione precedente sviluppata da R. Marie Cox che non supporta il text wrapping e i tag interni. Un'altra cosa interessante di P + C DTR è che il testo dell'immagine può essere personalizzato con i tag CSS.

typeface.js

Ciò che rende typeface.js speciale è che usano solo Javascript per incorporare caratteri personalizzati e lo stile può essere ulteriormente personalizzato con HTML e CSS, non è richiesto Flash. È open source e supporta la maggior parte dei browser che stiamo usando in questi giorni, che si tratti di Safari, Firefox, IE (6 e successivi).

Personalmente, dopo alcuni esperimenti con typeface.js, pensiamo che potrebbero esserci dei potenziali margini di miglioramento. In primo luogo, i caratteri tendono a essere leggermente diversi tra i diversi browser. Se utilizzi typeface.js, ti suggeriamo di eseguire un controllo cross-browser prima di assumere che ciò che vedi in Firefox sarà ciò che vedi in Safari. Anche il testo non è selezionabile con typeface.js.

I caratteri personalizzati in typeface.js non sono compilati; il che significa che gli utenti sono in grado di scaricare i caratteri. Ciò potrebbe portare a problemi di copyright. Si consiglia di controllare attentamente per assicurarsi che i caratteri che si stanno utilizzando siano corretti per la ridistribuzione.

Cufon

Non è richiesto Flash, Cufon è un'ottima alternativa al sIFR ed è abbastanza semplice da implementare. Innanzitutto, usi il generatore Cufon per generare e personalizzare il font che desideri, quindi inserisci il codice JavaScript di Cufon nel codice sorgente e dici allo script quali selettori vuoi che i caratteri siano personalizzati.

Il problema più grande con Cufon sarebbe la questione legale dell'uso di questi caratteri personalizzati online. Poiché è incorporato in Javascript, può essere facilmente rimosso da chiunque visiti il codice sorgente. I caratteri personalizzati Cufon non sono selezionabili, quello è l'altro spegni.

Facelift

Conosciuto anche come Facelift Image Replacement (FLIR), è un altro ottimo metodo per sIFR che non richiede Flash. Sembra che un'altra alternativa stia colpendo il problema Flash di sIFR.

Facelift utilizza PHP e la libreria GD di PHP. Essi ereditano il problema legacy delle sostituzioni personalizzate dei font - impossibile selezionare il testo. A parte questo, pensiamo che sia anche bello.

Più metodi

Le tecniche di cui sopra potrebbero essere più ampiamente utilizzate, ma abbiamo notato anche altri modi per convertire il tuo testo in caratteri tipografici personalizzati.

Tipo Seleziona

TypeSelect sfrutta le proprietà di sfondo typeface.js, jQuery, canvas, toDataURL, CSS e il testo reale sovrapposto per dare un carattere tipografico personalizzato sul tuo sito web. La selezione del testo funziona su Firefox, Safari e persino su Chrome, ma non su IE.

Swf Image Replacement (swfIR)

swfIR ti dà la possibilità di applicare un assortimento di effetti visivi a qualsiasi o tutte le immagini sul tuo sito web. Ad esempio, puoi aggiungere qualsiasi immagine sul tuo sito web e swfIR aggiungerà un bordo più arrotondato, ruoterà il posizionamento o aggiungerà ombre ad esso.

Nove tecniche per la sostituzione delle immagini CSS

Queste non sono sostituzioni di testo dinamiche, ma Chris Coyier dimostra fino a nove diverse tecniche CSS per sostituire il testo con le immagini; ognuno con una pagella che elenca le condizioni di - cosa succede se le immagini sono on / off, il CSS è acceso / spento.

Font Burner

Font Burner sfruttare la sostituzione di Inman Flash scalabile (sIFR) per modificare i titoli in caratteri personalizzati. Tutto quello che devi fare è trovare il carattere, selezionarlo e inserire il codice nella testa e il tuo titolo sarà cambiato in pochissimo tempo.

WordPress + Sostituzione dell'immagine dinamica

Se sei un utente di WordPress alla ricerca di una soluzione di sostituzione delle immagini dinamica per il titolo o anche il contenuto del tuo blog, è probabile che ci siano dei plugin per loro. Ecco alcuni plugin per la sostituzione del testo di cui veniamo a conoscenza.

sIFR WordPress Plugin - WP sIFRWP SIFR è stato creato per rimuovere le complicazioni ottenendo caratteri personalizzati su un sito WordPress. Con sIFR di WP, devi solo caricare il tuo file di font SWF nella directory del plugin e quindi effettuare il login, attivarlo e configurarne gli stili nel pannello Impostazioni.

Cufon WordPress Plugin - WP-CufonL'unica cosa che devi fare è convertire i tuoi font e caricarli nella directory dei plugin. È possibile abilitare gli oggetti che si desidera vengano sostituiti nel menu di amministrazione di WordPress.

Plugin Wordpress Facelift Image Replacment (FLIR)FLIR per WordPress è SEO friendly e restituisce l'immagine nel browser solo se JavaScript è abilitato. Il codice HTML / XHTML rimane invariato lasciando i tag head leggibili dai motori di ricerca e la pagina leggibile da chi non ha JavaScript.

Pannello di controllo di Font BurnerIl Font Burner Il plug-in del Pannello di controllo ti consente di aggiungere facilmente uno qualsiasi dei 1000 font gratuiti disponibili sul sito Web di Font Burner al tuo tema WordPress.