Dynamisk bildbyte Praktiska tekniker och verktyg

När det gäller webdesign, bör kreativitet i design inte hållas kvar av de begränsade valen av stödda webbfonter vi kallar webbsäkra teckensnitt. Designers bör ha frihet att använda vilka teckensnitt de föredrar på titlar och innehåll.

År 2005 blev dynamisk bildbyte populär med en teknik som heter Skalbar Inman Flash Replacement (sIFR). Utvecklad av Shaun Inman, sIFR utnyttjar Javascript och Adobe Flash för att tillåta webbdesigners att använda anpassade teckensnitt som de gillar på webbplatsen och ändå behålla synlighet för dem som inte har samma typsnitt. Och eftersom webben fortsätter att utvecklas, idag har vi fler alternativa lösningar med olika teknologier, bara om du inte är en fan av Flash.

Utan ytterligare ado, låt oss ta en titt på några av tekniker för att uppnå dynamiska bildbyten.

Vanligtvis använda tekniker

Här är några av de vanligaste teknikerna för dynamisk bildbyte.

Skalbar Inman Flash Replacement (sIFR)

sIFR är en av de mest populära metoderna för att integrera anpassade teckensnitt på webbplatser. Det använder Javascript och Flash för att generera anpassade typsnitt för din webbplats och tillåter omvandlat typsnitt att väljas. Bortsett från detta förblir konverterad typsnitt som text i källkoder så sökmotorn kan fortfarande krypa dem.

sIFR 2 (rekommenderas) är den nuvarande stabila utgåvan, men om du tittar på implementering av SIFR, bör du också veta det siFR 3 beta är också tillgänglig för nedladdning. Det kan vara lite buggy men åtminstone löser det teckensnittstilläggsproblemet med sIFR 2.

Verktyg för sIFR som kan komma till nytta:

• sIFRvaultsIFRvault är ett förråd av sIFR-teckensnitt som du kan ladda ner.
• sIFR GeneratorOnline-verktyg som låter dig skapa sIFR .swf-filer med några få musklick. Ladda bara upp TTF-teckensnittet i teckensnittet som du vill konvertera, förhandsgranska och ladda ner.
• Konvertera teckensnitt till sIFRLadda upp en .TTF-typsnitt och den här webbplatsen kommer att få dem konverterade till sIFR Flash-fil.

sIFR Lite

Den ursprungliga sIFR är 22k, så Dave bestämde sig för att omarbeta det med ett mer objektorienterat tillvägagångssätt, och resultatet? 3x mindre vid 3,7k.

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

Som namnet antyder är detta en textbytesmetod som använder PHP och CSS som använder sig av den ursprungliga metoden som beskrivs av Steward Rosenberger. Det är också en förbättring från den tidigare versionen utvecklad av R. Marie Cox Det stöder inte textförpackning och inre taggar. En annan cool sak om P + C DTR är att bildtexten kan anpassas med CSS-taggar.

typeface.js

Vad gör typeface.js speciellt är att de bara använder Javascript för att integrera anpassade teckensnitt och stil kan anpassas ytterligare med HTML och CSS, ingen Flash krävs. Det är öppen källkod och stöder de flesta webbläsare vi använder idag, oavsett om det är Safari, Firefox, IE (6 och senare).

Personligen efter några experiment med typeface.js, tror vi att det kan finnas några möjliga utrymmen för förbättringar. För det första tenderar teckensnitt att göra lite annorlunda bland olika webbläsare. Om du använder typeface.js, föreslår vi att du gör en kryssbläddrarsökning innan du antar vad du ser i Firefox är det du ser i Safari. Text kan inte också väljas med typeface.js.

Anpassade teckensnitt i typeface.js sammanställs inte; vilket innebär att användarna kan ladda ner teckensnitt. Det kan leda till upphovsrättsproblem. Det rekommenderas att du kontrollerat noggrant för att se till att de teckensnitt du använder är okej för omfördelning.

Cufon

Ingen blixt krävs, Cufon är ett bra alternativ till sIFR och det är ganska enkelt att implementera. Först använder du Cufon-generatorn för att skapa och anpassa det teckensnitt du vill ha, då lägger du in Cufon Javascript i din källkod och du berättar manuset vilka väljare du vill att tecknen ska anpassas till.

Det största problemet med Cufon skulle vara den juridiska frågan om att använda dessa anpassade teckensnitt online. Eftersom det är inbäddat i Javascript, kan det enkelt rippas av alla som ser källkoden. Cufon anpassade teckensnitt kan inte väljas, det är den andra avstängningen.

facelift

Också känd som Facelift Image Replacement (FLIR), Det är en annan bra metod att sIFR som inte kräver någon Flash. Det verkar som om ett annat alternativ är att slå i sIFRs Flash-problem.

Facelift använder PHP och PHP: s GD-bibliotek. De ärva arvet problemet med anpassade typsnitt ersättningar - kan inte välja texten. Bortsett från det tycker vi att det är bra också.

Fler metoder

Teknikerna ovan kan användas mer, men vi har också märkt några andra sätt att konvertera din text till vackra anpassade teckensnitt.

Skriv Välj

TypeSelect utnyttjar typeface.js, jQuery, kanfas, toDataURL, CSS-bakgrundsegenskaper och verklig överlagrad text för att ge ett anpassat typsnitt på din webbplats. Textval fungerar på Firefox, Safari och även Chrome men inte IE.

Swf Image Replacement (swfIR)

swfIR ger dig möjlighet att tillämpa ett sortiment av visuella effekter på någon eller alla bilder på din webbplats. Du kan till exempel lägga till några bilder på din webbplats och swfIR kommer att lägga till en ruttgräns, rotera positioneringen eller till och med lägga till skuggor till den.

Nio tekniker för CSS-bildbyte

Dessa är inte dynamiska textbyte, men Chris Coyier demonstrerar lika mycket som nio olika CSS-tekniker för att ersätta text med bilder; var och en med ett rapportkort som anger tillståndet för - vad om bilder är på / av är CSS på / av.

Fontbrännare

Fontbrännare hävstångseffekt på Scalable Inman Flash Replacement (sIFR) för att ändra dina titlar till anpassad typsnitt. Allt du behöver göra är att hitta teckensnittet, markera det och sätt in koden i huvudet och din titel kommer att ändras på nolltid.

WordPress + Dynamic Image Replacement

Om du är en WordPress-användare som söker en dynamisk bildbyteslösning för titeln eller till och med innehållet i din blogg, är chansen att det finns plugin för dem. Här är några textbyte plugins vi kommer att veta om.

sIFR WordPress Plugin - WP sIFRWP sIFR skapades för att ta bort komplikationerna från att få anpassade teckensnitt på en WordPress-webbplats. Med WP sIFR behöver du bara ladda upp din SWF-typsnittfil till plugin-katalogen och sedan logga in, aktivera den och konfigurera dess format alla på inställningspanelen.

Cufon WordPress Plugin - WP-CufonDet enda du behöver göra är att konvertera dina fontfiles och ladda dem till plugins katalogen. Du kan aktivera objekten du vill ersätta i Admin-menyn i WordPress.

Facelift Image Replacment (FLIR) Wordpress PluginFLIR för WordPress är SEO vänlig och gör bara bilden i webbläsaren om JavaScript är aktiverat. Din HTML / XHTML-kod förblir oförändrad vilket gör att dina huvudetiketter kan läsas av sökmotorer och sidan kan läsas av dem utan JavaScript.

Font Brännare KontrollpanelenDe Fontbrännare I kontrollpanelens plugin kan du enkelt lägga till några av de 1000 + fria tecknen som finns på Font Burner-webbplatsen till ditt WordPress-tema.