Dynamisk billedudskiftning Praktiske teknikker og værktøjer

Når det kommer til webdesign, bør design kreativitet ikke holdes tilbage af de begrænsede valg af understøttede web skrifttyper, vi kalder web-sikre skrifttyper. Designere bør have frihed til at bruge de skrifttyper, de foretrækker på titler og indhold.

I 2005 blev dynamisk billedudskiftning populær med en kaldet teknik Skalerbar Inman Flash Replacement (sIFR). Udviklet af Shaun Inman, sIFR drage fordel af Javascript og Adobe Flash for at give webdesignere mulighed for at bruge brugerdefinerede skrifttyper, som de kan lide på hjemmesiden og stadig bevare synligheden til dem, der ikke har den skrifttype. Og da internettet fortsætter med at udvikle sig, har vi i dag flere alternative løsninger ved hjælp af forskellige teknologier, bare hvis du ikke er en fan af Flash.

Lad os tage et kig på nogle af teknikker til at opnå dynamiske billede udskiftninger.

Almindeligt anvendte teknikker

Her er nogle af de mest almindeligt anvendte teknikker til dynamiske billedudskiftninger.

Skalerbar Inman Flash Replacement (sIFR)

sIFR er en af de mest populære metoder til at indlejre brugerdefinerede skrifttyper på websteder. Det bruger Javascript og Flash til at generere brugerdefineret skrifttype til din hjemmeside og tillader konverteret skrifttype at kunne vælges. Bortset fra det forbliver konverteret skrifttype som tekst i kildekoder, så søgemaskinen stadig kan gennemgå dem.

sIFR 2 (anbefales) er den nuværende stabile udgivelse, men hvis du ser på implementering af sIFR, bør du også vide det siFR 3 beta er også tilgængelig til download. Det kan være en lille buggy, men det løser i det mindste udvidelsesproblemet med sIFR 2.

Værktøjer til sIFR, der kan være nyttige:

sIFRvaultsIFRvault er et lager af sIFR-skrifttyper, du kan downloade.
sIFR GeneratorOnline værktøj, der giver dig mulighed for at oprette sIFR .swf filer med et par klik med musen. Du skal blot uploade TTF-skrifttyper for den skrifttype, du vil konvertere, forhåndsvise og downloade.
Konverter skrifttyper til sIFRUpload en .TTF-skrifttype, og denne hjemmeside vil få dem konverteret til sIFR Flash-fil.

sIFR Lite

Den originale sIFR er 22k, så Dave besluttet at omarbejde det med en mere objektorienteret tilgang og resultatet? 3x mindre ved 3,7k.

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

Som navnet antyder, er dette en tekstudskiftningsmetode, der bruger PHP og CSS, der benytter den oprindelige metode, der beskrives af Steward Rosenberger. Det er også en forbedring fra den tidligere version udviklet af R. Marie Cox Det understøtter ikke tekstindpakning og indvendige tags. En anden cool ting om P + C DTR er, at billedteksten kan tilpasses med CSS tags.

typeface.js

Hvad laver typeface.js specielt er, at de kun bruger Javascript til at indlejre brugerdefinerede skrifttyper og stil kan tilpasses yderligere med HTML og CSS, ingen Flash er påkrævet. Det er open source og understøtter de fleste browsere, vi bruger i disse dage, hvad enten det er Safari, Firefox, IE (6 og derover).

Personligt efter nogle eksperimenter med typeface.js, mener vi, at der kunne være nogle mulige pladser til forbedringer. For det første har skrifttyperne en tendens til at gøre lidt anderledes blandt forskellige browsere. Hvis du bruger typeface.js, foreslår vi at du foretager en cross-browser-check, før du antager, hvad du ser i Firefox, det vil du se i Safari. Tekst kan heller ikke vælges med typeface.js.

Brugerdefinerede skrifttyper i typeface.js er ikke udarbejdet; hvilket betyder, at brugerne kan downloade skrifttyperne. Det kan føre til ophavsretligt problem. Det anbefales at du kontrolleres grundigt for at sikre, at de skrifttyper, du bruger, er ok for omfordeling.

cufon

Ingen Flash kræves, cufon er et godt alternativ til sIFR, og det er ret nemt at implementere. For det første bruger du Cufon-generatoren til at generere og tilpasse den skrifttype, du ønsker, så indsætter du Cufon Javascript i din kildekode, og du fortæller scriptet, hvilke vælgere du vil have skrifttyperne til at tilpasse.

Det største problem med Cufon ville være det juridiske problem med at bruge disse brugerdefinerede skrifttyper online. Da det er indlejret i Javascript, kan det let revet af alle, der ser kildekoden. Cufon brugerdefinerede skrifttyper kan ikke vælges, det er den anden slukning.

Ansigtsløftning

Også kendt som Facelift Image Replacement (FLIR), det er en anden god metode til at sIFR, der ikke kræver nogen Flash. Det ser ud til, at meget andet alternativ rammer i sIFRs Flash-problem.

Facelift bruger PHP og PHP's GD Bibliotek. De arver det arvelige problem med brugerdefinerede skrifttypeudskiftninger - kan ikke vælge teksten. Bortset fra det, mener vi det også er fantastisk.

Flere metoder

Teknikkerne ovenfor kan bruges mere udbredt, men vi har også bemærket nogle andre måder for at give konvertering af din tekst til smukke brugerdefinerede skrifttyper.

Skriv Vælg

TypeSelect udnytter typeface.js, jQuery, lærredet, toDataURL, CSS baggrundsegenskaberne og ægte overlejret tekst for at give et brugerdefineret skrifttype på din hjemmeside. Tekstvalg virker på Firefox, Safari og endda Chrome, men ikke IE.

Swf Image Replacement (swfIR)

swfIR giver dig mulighed for at anvende et udvalg af visuelle effekter på nogen eller alle billeder på din hjemmeside. Du kan f.eks. Tilføje billeder på din hjemmeside, og swfIR vil tilføje en rounder-ramme, rotere positioneringen eller endda tilføje skygger til det.

Ni Teknikker til CSS Image Replacement

Disse er ikke dynamiske tekst udskiftninger, men Chris Coyier demonstrerer så meget som ni forskellige CSS teknikker til at erstatte tekst med billeder; hver med et rapportkort, der angiver betingelsen for - hvad hvis billeder er tændt / slukket, er CSS tændt / slukket.

Font Brænder

Font Brænder gearing på Scalable Inman Flash Replacement (sIFR) for at ændre dine titler til brugerdefineret skrifttype. Alt du skal gøre er at finde skrifttypen, markere den og indsætte koden i hovedet, og din titel bliver ændret på ingen tid.

WordPress + Dynamic Image Replacement

Hvis du er en WordPress-bruger, der leder efter dynamisk billedudskiftningsløsning til titlen eller endda indholdet af din blog, er der chancer for, at der er plugin til dem. Her er nogle tekst erstatning plugins vi kommer til at vide om.

sIFR WordPress Plugin - WP sIFRWP sIFR blev oprettet for at fjerne komplikationerne fra at få tilpassede skrifttyper på et WordPress-websted. Med WP sIFR skal du kun uploade din SWF-skrifttypefil til plugin-mappen og derefter logge ind, aktivere den og konfigurere dens stilarter alt i panelet Indstillinger.

Cufon WordPress Plugin - WP-CufonDet eneste du skal gøre er at konvertere dine fontfiles og uploade dem til plugins-mappen. Du kan aktivere de objekter, du vil udskifte, i Admin-menuen i WordPress.

Facelift Image Replacment (FLIR) Wordpress PluginFLIR for WordPress er SEO venlig og kun gør billedet i browseren, hvis JavaScript er aktiveret. Din HTML / XHTML kode forbliver uændret, så dine hovedetiketter kan læses af søgemaskiner og siden læses af dem uden JavaScript.

Font Brænder KontrolpanelDet Font Brænder Kontrolpanel plugin giver dig mulighed for nemt at tilføje nogen af de 1000 + gratis skrifttyper, der er tilgængelige på Font Burner-webstedet til dit WordPress-tema.