Praktické techniky a nástroje pro dynamickou výměnu obrazu

Pokud jde o web design, kreativita designu by neměla být omezena omezenými možnostmi podporovaných webových fontů, které nazýváme webová písma. Designéři by měli mít svobodu používat libovolná písma, která preferují v názvech a obsahu.

V roce 2005, dynamická náhrada obrazu byla dělána populární s technikou volal Škálovatelná náhrada Inman Flash (sIFR). Vyvinut Shaun Inman, SIFR využívají Javascript a Adobe Flash, aby weboví designéři mohli používat vlastní písma, která se jim líbí na webových stránkách, a stále si zachovávají viditelnost pro ty, kteří toto písmo nemají. A jak se web neustále vyvíjí, dnes máme více alternativních řešení využívajících různé technologie, jen v případě, že nejste fanouškem Flash.

Bez dalších okolků se podívejme na některé z nich techniky pro dosažení dynamického nahrazení obrazu.

Běžně používané techniky

Zde jsou některé z nejčastěji používaných technik pro dynamické nahrazení obrazu.

Škálovatelná náhrada Inman Flash (sIFR)

sIFR je jednou z nejpopulárnějších metod vkládání vlastních písem na webové stránky. Využívá Javascript a Flash pro generování vlastního písma pro vaše webové stránky a umožňuje převedení písma na volitelné. Kromě toho, převedené písmo zůstává jako text ve zdrojových kódech, takže vyhledávač je může stále procházet.

sIFR 2 (doporučeno) je aktuální stabilní vydání, ale pokud se díváte do implementace sIFR, měli byste to vědět siFR3 beta je také k dispozici ke stažení. Mohlo by to být trochu buggy, ale alespoň to řeší font-expanze problém sIFR 2.

Nástroje pro sIFR, které se mohou hodit:

• sIFRvaultsIFRvault je repozitář sIFR fontů, které si můžete stáhnout.
• sIFR GenerátorOnline nástroj, který vám umožní vytvářet soubory sifr .swf několika kliknutími myši. Stačí nahrát písmo TTF písma, které chcete převést, zobrazit náhled a stáhnout.
• Převést fonty na sIFRNahrajte .TTF font a tyto webové stránky budou převedeny na sIFR Flash soubor.

sIFR Lite

Původní sIFR je 22k, takže Dave rozhodl se jej přepracovat objektivnějším přístupem a výsledkem? 3x menší při 3,7k.

PHP + CSS dynamická výměna textu (P + C DTR)

Jak název napovídá, jedná se o metodu nahrazení textu, která využívá PHP a CSS, které využívají původní metodu popsanou v Steward Rosenberger. Je to také vylepšení z předchozí verze vyvinuté společností R. Marie Cox nepodporuje obtékání textu a vnitřní tagy. Další skvělá věc o P + C DTR je, že obrazový text lze přizpůsobit pomocí tagů CSS.

typeface.js

Co dělá typeface.js speciální je, že používají pouze Javascript pro vložení vlastních fontů a styl lze dále přizpůsobit pomocí HTML a CSS, nevyžaduje se Flash. Je to open source a podporuje většinu prohlížečů, které používáme v těchto dnech, ať už je to Safari, Firefox, IE (6 a více).

Osobně po některých experimentech s typeface.js si myslíme, že by mohl být nějaký prostor pro zlepšení. Za prvé, fonty mají tendenci se v různých prohlížečích mírně lišit. Pokud používáte typeface.js, doporučujeme vám provést kontrolu v prohlížeči, než předpokládáte, co uvidíte ve Firefoxu. Text nelze také vybrat pomocí typeface.js.

Vlastní fonty v typeface.js nejsou kompilovány; což znamená, že uživatelé mohou stahovat fonty. To může vést k problému s autorskými právy. Doporučuje se, abyste si důkladně zkontrolovali, zda používaná písma jsou v pořádku pro další distribuci.

Cufone

Není vyžadován blesk, Cufone je skvělou alternativou k sIFR a je poměrně jednoduché jej implementovat. Nejprve použijete generátor Cufon pro generování a přizpůsobení požadovaného fontu, poté vložíte Cufon Javascript do svého zdrojového kódu a řeknete skriptu, které selektory chcete upravit..

Největší problém s Cufonem by byl právní problém používání těchto vlastních písem online. Vzhledem k tomu, že je vložen do Javascriptu, může být snadno roztržen kýmkoli, kdo si prohlíží zdrojový kód. Cufon vlastní fonty nejsou volitelné, to je druhé vypnutí.

Facelift

Také známý jako Výměna obrazu Facelift (FLIR), je to další skvělá metoda sIFR, která nevyžaduje žádný Flash. Vypadá to, že je to jiná alternativa, která zasáhne problém sIFR Flash.

Facelift používá PHP a PHP knihovnu GD. Dědí starší problém vlastních nahrazení fontů - text nelze vybrat. Kromě toho si myslíme, že je to taky skvělé.

Další metody

Výše uvedené techniky by mohly být více rozšířeny, ale všimli jsme si i jiných způsobů, jak převést text na krásné vlastní písma.

Typ Vyberte

VyberteSelect využívá vlastnosti typeface.js, jQuery, plátno, vlastnosti toDataURL, vlastnosti pozadí CSS a skutečný překrytý text, aby bylo možné na vašem webu vytvořit vlastní písmo. Výběr textu funguje ve Firefoxu, Safari a dokonce Chrome, ale ne v IE.

Výměna obrázku Swf (swfIR)

swfIR vám dává možnost aplikovat sortiment vizuálních efektů na všechny nebo všechny obrázky na vašich webových stránkách. Můžete například přidat libovolné obrázky na své webové stránky a swfIR přidá kulatější ohraničení, otočí umístění nebo k němu přidá i stíny..

Devět technik pro výměnu obrazu CSS

Nejedná se o dynamické nahrazení textu, ale Chris Coyier demonstruje až devět různých CSS technik pro nahrazení textu obrazy; každá se zprávou s výpisem stavu - co když jsou obrázky zapnuté / vypnuté, CSS je zapnuto / vypnuto.

Font Burner

Font Burner pákový efekt na Scalable Inman Flash Replacement (sIFR) pro změnu vašich titulů na vlastní písmo. Vše, co musíte udělat, je najít písmo, vybrat jej a vložit kód do hlavy a váš titul se změní v žádném okamžiku.

WordPress + Dynamická výměna obrazu

Pokud jste uživatel WordPress hledá dynamické řešení pro nahrazení obrazu pro titul nebo dokonce obsah vašeho blogu, šance jsou tam pro ně plugin. Zde jsou některé pluginy pro výměnu textu, o kterých jsme se dozvěděli.

sIFR WordPress Plugin - WP sIFRWP sIFR byl vytvořen k odstranění komplikací od získání vlastních písem na stránkách WordPress. S WP sIFR stačí nahrát soubor SWF do adresáře pluginů a pak se přihlásit, aktivovat a nakonfigurovat všechny styly v panelu Nastavení..

Cufon WordPress Plugin - WP-CufonJediné, co musíte udělat, je převod fontů a jejich nahrání do adresáře plugins. Můžete povolit objekty, které chcete nahradit, v nabídce Správce aplikace WordPress.

Facelift Image Replacment (FLIR) Wordpress PluginFLIR pro WordPress je SEO přátelský a pouze vykreslí obrázek v prohlížeči, pokud je povolen JavaScript. HTML / XHTML kód zůstane nezměněn, takže vaše hlavičky budou čitelné pro vyhledávače a stránky čitelné pro ty, kteří nemají JavaScript.

Ovládací panel Font Burner Font Burner Ovládací panel plugin umožňuje snadno přidat některý z 1000 + zdarma písma k dispozici na webových stránkách Font Burner na téma WordPress.