Dynamisk bildeutskiftning Praktiske teknikker og verktøy

Når det gjelder webdesign, bør kreativitet i design ikke holdes tilbake av de begrensede valgene av støttede webfonter vi kaller web-sikre skrifttyper. Designere bør ha frihet til å bruke noen fonter de foretrekker på titler og innhold.

I 2005 ble dynamisk bildeutskifting populær med en kalt teknikk Skalerbar Inman Flash Replacement (sIFR). Utviklet av Shaun Inman, sIFR utnytter Javascript og Adobe Flash for å tillate webdesignere å bruke egendefinerte fonter som de liker på nettstedet, og fortsatt opprettholde synlighet til de som ikke har denne skrifttypen. Og etter hvert som nettet fortsetter å utvikle seg, har vi i dag flere alternative løsninger ved hjelp av ulike teknologier, bare hvis du ikke er en fan av Flash.

Uten ytterligere ado, la oss ta en titt på noen av teknikker for å oppnå dynamiske bildeutskiftninger.

Vanligvis brukte teknikker

Her er noen av de mest brukte teknikkene for dynamisk bildeutskifting.

Skalerbar Inman Flash Replacement (sIFR)

sIFR er en av de mest populære metodene for å legge inn tilpassede fonter på nettsteder. Den bruker Javascript og Flash for å generere egendefinert skrifttype for nettstedet ditt og lar konverterte skrifttyper bli valgt. Bortsett fra det forblir konvertert skrifttype som tekst i kildekoder, slik at søkemotoren fortsatt kan krype dem.

sIFR 2 (anbefalt) er den nåværende stabile utgivelsen, men hvis du ser på implementering av sIFR, bør du også vite det siFR 3 beta er også tilgjengelig for nedlasting. Det kan være litt buggy, men det løser i det minste skriftutvidelsesproblemet med sIFR 2.

Verktøy for sIFR som kan komme til nytte:

sIFRvaultsIFRvault er et lager av sIFR-fonter du kan laste ned.
sIFR GeneratorOnline verktøy som lar deg lage sIFR .swf filer med noen få museklikk. Bare last opp TTF-skrifttypen for skrifttypen du vil konvertere, forhåndsvise og laste ned.
Konverter skrifttyper til sIFRLast opp en .TTF font og denne nettsiden vil få dem konvertert til sIFR Flash-fil.

sIFR Lite

Den opprinnelige sIFR er 22k, så Dave bestemte seg for å omarbeide den ved hjelp av en mer objektorientert tilnærming, og resultatet? 3x mindre ved 3,7k.

PHP + CSS Dynamic Text Replacement (P + C DTR)

Som navnet antyder, er dette en tekstutskriftsmetode som bruker PHP og CSS som bruker den opprinnelige metoden beskrevet av Steward Rosenberger. Det er også en forbedring fra den forrige versjonen utviklet av R. Marie Cox Det støtter ikke tekstinnpakning og indre etiketter. En annen kul ting om P + C DTR er, kan bildeteksten tilpasses med CSS-koder.

typeface.js

Hva gjør typeface.js Spesielt er at de bare bruker Javascript for å legge inn tilpassede fonter og stil kan tilpasses ytterligere med HTML og CSS, ingen Flash kreves. Det er åpen kildekode og støtter de fleste nettlesere vi bruker i disse dager, enten det er Safari, Firefox, IE (6 og høyere).

Personlig etter noen eksperimenter med typeface.js, tror vi det kan være noe potensielt rom for forbedringer. For det første har skriftene en tendens til å gjøre noe annerledes blant forskjellige nettlesere. Hvis du bruker typeface.js, foreslår vi at du gjør en kryssbrowser-sjekk før du antar det du ser i Firefox, blir det du ser i Safari. Tekst kan heller ikke velges med typeface.js.

Egendefinerte skrifter i typeface.js er ikke samlet; noe som betyr at brukerne kan laste ned skrifter. Det kan føre til opphavsrettsproblem. Det anbefales at du sjekket grundig for å kontrollere at skrifttypene du bruker, er ok for omfordeling.

Cufon

Ingen Flash kreves, Cufon er et flott alternativ til sIFR, og det er ganske enkelt å implementere. Først bruker du Cufon-generatoren til å generere og tilpasse skrifttypen du vil ha, da setter du inn Cufon Javascript i kildekoden din og du forteller scriptet hvilke selektorer du vil at skrifttypene skal tilpasses.

Det største problemet med Cufon ville være det juridiske problemet med å bruke disse egendefinerte skrifter på nettet. Siden det er innebygd i Javascript, kan det enkelt bli revet av alle som ser kildekoden. Cufon tilpassede skrifttyper kan ikke velges, det er det andre slår av.

Ansiktsløft

Også kjent som Facelift Image Replacement (FLIR), Det er en annen flott metode til sIFR som ikke krever Flash. Det ser ut til at et annet alternativ treffer i sIFRs Flash-problem.

Facelift bruker PHP og PHPs GD Bibliotek. De arver arven problemet med egendefinerte font utskiftninger - kan ikke velge teksten. Bortsett fra det, tror vi det er flott også.

Flere metoder

Teknikkene ovenfor kan brukes mer, men vi har også lagt merke til noen andre måter for å konvertere teksten til vakre egendefinerte skrifttyper.

Skriv velg

TypeSelect bruker på typeface.js, jQuery, lerretet, toDataURL, CSS bakgrunnsegenskapene og ekte overlagt tekst for å gi et tilpasset skrifttype på nettstedet ditt. Tekstvalg fungerer på Firefox, Safari og til og med Chrome, men ikke IE.

Swf Image Replacement (swfIR)

swfIR gir deg muligheten til å bruke et utvalg av visuelle effekter til noen eller alle bilder på nettstedet ditt. For eksempel kan du legge til noen bilder på nettstedet ditt, og swfIR vil legge til en rundergrense, rotere posisjoneringen eller til og med legge til skygger på det.

Ni teknikker for CSS-bildeutskifting

Dette er ikke dynamiske tekstutskiftninger, men Chris Coyier demonstrerer så mye som ni forskjellige CSS teknikker for å erstatte tekst med bilder; hver med et rapportkort som viser tilstanden til - hva hvis bilder er på / av, er CSS på / av.

Font brenner

Font brenner Utnyttelse av Scalable Inman Flash Replacement (sIFR) for å endre titlene dine til tilpasset skrift. Alt du trenger å gjøre er å finne skrifttypen, velge den og sett inn koden i hodet og tittelen din vil bli endret på kort tid.

WordPress + Dynamic Image Replacement

Hvis du er en WordPress-bruker som ser etter dynamisk bildeutskiftingsløsning for tittelen eller til og med innholdet i bloggen din, er det sjansene for at det er plugin for dem. Her er noen tekst erstatning plugins vi kommer til å vite om.

sIFR WordPress Plugin - WP sIFRWP sIFR ble opprettet for å fjerne komplikasjonene fra å få egendefinerte skrifter på et WordPress-nettsted. Med WP sIFR må du bare laste opp SWF-skriftfilen din til plugin-katalogen og deretter logge inn, aktivere den og konfigurere stilene alle i Innstillinger-panelet.

Cufon WordPress Plugin - WP-CufonDet eneste du må gjøre er å konvertere fontfilene dine og laste dem opp i plugin-katalogen. Du kan aktivere objektene du vil bli erstattet i Admin-menyen i WordPress.

Facelift Image Replacment (FLIR) Wordpress PluginFLIR for WordPress er SEO vennlig og bare gjør bildet i nettleseren hvis JavaScript er aktivert. Du HTML / XHTML-koden forblir uendret, slik at hodetekstene dine kan leses av søkemotorer og siden leses av de uten JavaScript.

Font Brenner kontrollpanelDe Font brenner Kontrollpanelplugin lar deg enkelt legge til noen av de 1000 + gratis skriftene som er tilgjengelige på Font Burner-nettstedet til WordPress-temaet ditt.