Praktične tehnike i alati za zamjenu dinamičke slike

Kada je riječ o web dizajnu, kreativnost dizajna ne bi se trebala zadržavati ograničenim izborom podržanih web-fontova koje nazivamo web-sigurne fontove. Dizajneri bi trebali imati slobodu da koriste fontove koje preferiraju na naslovima i sadržajima.

U 2005, dinamička zamjena slika je postala popularna s tehnikom koja se zove Skalabilna zamjena Inman Flash (sIFR). Razvijen od Shaun Inman, sIFR koristi Javascript i Adobe Flash kako bi web dizajnerima omogućio korištenje bilo kojih prilagođenih fontova koje im se sviđaju na web-lokaciji i još uvijek održavaju vidljivost onima koji nemaju taj font. I dok se web nastavlja razvijati, danas imamo više alternativnih rješenja koja koriste različite tehnologije, za slučaj da niste baš ljubitelj Flash-a.

Bez daljnjih smetnji, pogledajmo neke od njih tehnike za postizanje dinamičkih zamjena slike.

Najčešće korištene tehnike

Ovdje su neke od najčešće prakticiranih tehnika za zamjenu dinamičke slike.

Skalabilna zamjena Inman Flash (sIFR)

sIFR je jedna od najpopularnijih metoda ugradnje prilagođenih fontova na web-lokacije. Koristi Javascript i Flash za stvaranje prilagođenog slova za vašu web-lokaciju i omogućuje da se pretvorena slova mogu odabrati. Osim toga, pretvoreni font ostaje kao tekst u izvornim kodovima pa ih tražilica može i dalje pretraživati.

sIFR 2 (preporučeno) je trenutačno stabilno izdanje, no ako tražite implementaciju sIFR-a, trebali biste to znati siFR 3 beta je dostupna i za preuzimanje. To bi moglo biti malo greškom, ali barem rješava problem širenja fonta sIFR 2.

Alati za sIFR koji bi dobro došli:

sIFRvaultsIFRvault je spremište sIFR fontova koje možete preuzeti.
Generator sIFROnline alat koji vam omogućuje stvaranje sIFR .swf datoteka s nekoliko klikova mišem. Jednostavno prenesite font TTF fonta koji želite pretvoriti, pregledati i preuzeti.
Pretvorite fontove u sIFRPrenesite .TTF font i ova će web-lokacija pretvoriti u sIFR Flash datoteku.

sIFR Lite

Izvorni sIFR je 22k, tako da Dave odlučio je preraditi koristeći više objektno orijentirani pristup i rezultat? 3x manji na 3.7k.

PHP + CSS zamjena dinamičkog teksta (P + C DTR)

Kao što ime sugerira, ovo je metoda zamjene teksta koja koristi PHP i CSS koji koriste izvornu metodu opisanu u Steward Rosenberger. Također je poboljšanje iz prethodne verzije koju je razvio R. Marie Cox koja ne podržava prelamanje teksta i unutarnje oznake. Još jedna dobra stvar kod P + C DTR-a je da tekstualni tekst može biti prilagodljiv s CSS oznakama.

typeface.js

Ono što čini typeface.js Posebno je da oni koriste samo Javascript ugraditi prilagođene fontove i stil se može dodatno prilagoditi s HTML i CSS, no Flash nije potreban. To je open source i podržava većinu preglednika koje koristimo ovih dana, bilo da je u pitanju Safari, Firefox, IE (6 i više).

Osobno nakon nekih eksperimenata s typeface.js, mislimo da bi moglo biti potencijalnih prostora za poboljšanja. Prvo, fontovi imaju tendenciju da se malo razlikuju među različitim preglednicima. Ako koristite typeface.js, predlažemo da napravite unakrsnu provjeru prije preuzimanja onoga što vidite u Firefoxu ono što vidite u Safariju. Tekst se također ne može odabrati s typeface.js.

Prilagođeni fontovi u typeface.js nisu kompilirani; što znači da korisnici mogu preuzeti fontove. To bi moglo dovesti do problema s autorskim pravima. Preporučuje se da temeljito provjerite jesu li fontovi koje koristite u redu za redistribuciju.

Cufon

Nije potreban Flash, Cufon je odlična alternativa za sIFR i vrlo je jednostavno implementirati. Prvo, pomoću Cufon generatora generirate i prilagodite željeni font, a zatim u svoj izvorni kôd umetnete Cufon Javascript, a skripti koju odabirete želite da fontove prilagodite.

Najveći problem s Cufonom bio bi pravni problem korištenja ovih prilagođenih fontova na mreži. Budući da je ugrađen unutar Javascripta, može ga lako kopirati svatko tko pogleda izvorni kod. Cufon prilagođeni fontovi se ne mogu odabrati, a drugi je isključen.

facelift

Također poznat kao Zamjena slike lica lica (FLIR), to je još jedan odličan način za sIFR koji ne zahtijevaju Flash. Izgleda da je vrlo druga alternativa udaranje u sIFR-ovom Flash izdanju.

Facelift koristi PHP i PHP GD knjižnicu. Naslijedili su naslijeđeni problem prilagođenih zamjena fonta - ne mogu odabrati tekst. Osim toga, mislimo da je i to sjajno.

Više metoda

Tehnike gore navedene mogu biti šire korištene, ali primijetili smo i neke druge načine kako bismo pretvorili vaš tekst u prelijepe prilagođene tipove.

Upišite Odaberi

TypeSelect iskorištava na typeface.js, jQuery, platnu, toDataURL, svojstva pozadine CSS-a i stvarni tekst prekriven da bi dao prilagođenu vrstu slova na Vašoj web stranici. Odabir teksta radi na preglednicima Firefox, Safari, pa čak i Chromeu, ali ne i na IE.

Zamjena swf slike (swfIR)

swfIR daje vam mogućnost primjene asortimana vizualnih efekata na bilo koju ili sve slike na vašoj web-lokaciji. Na primjer, možete dodati bilo koju sliku na svoju web-lokaciju i swfIR će dodati okrugliju granicu, rotirati položaj ili joj čak dodati sjene.

Devet tehnika za zamjenu CSS slika

To nisu zamjene dinamičkog teksta, nego Chris Coyier demonstrira čak devet različitih CSS tehnika za zamjenu teksta slikama; svaka s karticom izvješća koja navodi stanje - što ako su slike uključene / isključene, CSS je uključen / isključen.

Snimač fontova

Snimač fontova utjecati na Scalable Inman Flash Zamjena (sIFR) promijeniti svoje naslove u prilagođeni font. Sve što trebate učiniti je pronaći font, odabrati ga i umetnuti kod u glavu i vaš će naslov biti promijenjen u tren oka.

WordPress + zamjena dinamičke slike

Ako ste korisnik programa WordPress koji traži rješenje za zamjenu dinamičke slike za naslov ili čak sadržaj vašeg bloga, šanse su da postoje dodatci za njih. Evo nekih dodataka za zamjenu teksta o kojima smo saznali.

sIFR dodatak za WordPress - WP sIFRWP sIFR stvoren je kako bi uklonio komplikacije iz dobivanja prilagođenih fontova na web-lokaciji WordPress. S WP sIFR-om morate samo prenijeti SWF datoteku fonta u direktorij dodataka, a zatim se prijaviti, aktivirati i konfigurirati sve stilove na ploči Postavke.

Cufon dodatak za WordPress - WP-CufonJedino što morate učiniti je pretvoriti fontove i učitati ih u direktorij dodataka. Možete omogućiti objekte koje želite zamijeniti u Admin izborniku programa WordPress.

Facelift Image Zamjena (FLIR) Wordpress PluginFLIR za WordPress je SEO prijateljski i samo prikazuje sliku u pregledniku ako je omogućen JavaScript. HTML / XHTML kôd ostaje nepromijenjen, ostavljajući oznake za čitanje tražilicama, a stranice čitljive onima bez JavaScripta.

Upravljačka ploča s pisačem fontova Snimač fontova Upravljačka ploča plugin omogućuje jednostavno dodavanje bilo kojeg od 1000 + slobodnih fontova dostupnih na web-mjestu Font Burner u WordPress temu.