Tehnici și instrumente practice de înlocuire a imaginilor dinamice

Când vine vorba de designul web, creativitatea designului nu trebuie să fie oprită de opțiunile limitate ale fonturilor web acceptate pe care le numim fonturi sigură pentru web. Designerii ar trebui să aibă libertatea de a folosi orice fonturi pe care le preferă pe titluri și conținut.

În 2005, înlocuirea dinamică a imaginii a fost făcută populară cu o tehnică numită Scalable Inman Flash replacement (sIFR). Dezvoltat de Shaun Inman, sIFR profita de Javascript și Adobe Flash pentru a permite designerilor web să utilizeze orice fonturi personalizate pe care le plac pe site și să mențină vizibilitatea celor care nu au acel font. Și pe măsură ce webul continuă să evolueze, astăzi avem mai multe soluții alternative folosind diferite tehnologii, doar în cazul în care nu sunteți chiar un fan al Flash.

Fără să mai vorbim, să aruncăm o privire la unele dintre ele tehnici pentru a realiza înlocuirea imaginilor dinamice.

Tehnici utilizate frecvent

Iată câteva dintre cele mai frecvent utilizate tehnici pentru înlocuirea imaginilor dinamice.

Scalable Inman Flash replacement (sIFR)

sIFR este una dintre metodele cele mai populare pentru a încorpora fonturi personalizate pe site-uri web. Acesta utilizează Javascript și Flash pentru a genera personalizat text pentru site-ul dvs. și permite fontului convertit pentru a fi selectabile. În afară de aceasta, textul tipărit rămâne ca text în codurile sursă, astfel încât motorul de căutare le poate accesa cu crawlere.

sIFR 2 (recomandat) este versiunea curentă stabilă, totuși, dacă sunteți în căutarea de a implementa sIFR, ar trebui să știți asta siFR 3 beta este, de asemenea, disponibil pentru descărcare. Ar putea fi un buggy, dar cel puțin rezolvă problema de expansiune a fontului sIFR 2.

Instrumente pentru sIFR care ar putea fi utile:

sIFRvaultsIFRvault este un depozit de fonturi sIFR pe care le puteți descărca.
sIFR GeneratorUn instrument online care vă permite să creați fișiere .swf sIFR cu câteva clicuri ale mouse-ului. Pur și simplu încărcați fontul TTF al fontului pe care doriți să îl convertiți, previzualizați și descărcați.
Convertiți fonturile în sIFRÎncărcați un font .TTF și acest site web le va fi convertit în fișierul sIFR Flash.

sIFR Lite

SIFR original este de 22k, deci Dave a decis să-l reface folosind o abordare mai orientată spre obiect, iar rezultatul? 3x mai mică la 3,7k.

Înlocuirea textului dinamic al PHP + CSS (P + C DTR)

După cum sugerează și numele, aceasta este o metodă de înlocuire a textului care utilizează PHP și CSS care utilizează metoda originală descrisă de Steward Rosenberger. Este, de asemenea, o îmbunătățire față de versiunea anterioară dezvoltată de R. Marie Cox care nu acceptă învelișul textului și etichetele interioare. Un alt lucru interesant despre PTR D + D este că textul imaginii poate fi personalizat cu ajutorul etichetelor CSS.

typeface.js

Ceea ce face ca typeface.js special este că folosesc doar Javascript pentru a încorpora fonturi personalizate și stilul poate fi personalizat în continuare cu HTML și CSS, nu este nevoie de Flash. Este open source și suportă majoritatea browserelor pe care le folosim în aceste zile, fie că este vorba despre Safari, Firefox, IE (6 și mai sus).

Personal, după câteva experimente cu typeface.js, credem că ar putea exista un posibil spațiu pentru îmbunătățiri. În primul rând, fonturile tind să difere ușor între diferite browsere. Dacă utilizați typeface.js, vă sugerăm să efectuați o verificare încrucișată înainte de a vă asuma ceea ce vedeți în Firefox va fi ceea ce vedeți în Safari. De asemenea, textul nu poate fi selectat cu typeface.js.

Fonturile personalizate în typeface.js nu sunt compilate; utilizatorii pot descărca fonturile. Asta ar putea duce la problema drepturilor de autor. Este recomandat să vă verificați temeinic pentru a vă asigura că fonturile pe care le utilizați sunt bune pentru redistribuire.

cufon

Nu este nevoie de Flash, cufon este o mare alternativă la sIFR și este destul de simplu de implementat. Mai întâi, utilizați generatorul Cufon pentru a genera și personaliza fontul pe care îl doriți, apoi introduceți Javascript-ul Cufon în codul sursă și spuneți scriptului selectorii pe care doriți să-i personalizați fonturile.

Cea mai mare problemă cu Cufon ar fi problema juridică a utilizării acestor fonturi personalizate online. Deoarece este încorporat în Javascript, acesta poate fi ușor distrus de oricine care văd codul sursă. Fonturile personalizate Cufon nu pot fi selectate, altul este oprit.

faceliftul

De asemenea cunoscut ca si Înlocuirea imaginilor de tip facelift (FLIR), este o altă metodă excelentă pentru sIFR care nu necesită Flash. Se pare că o altă alternativă este lovirea în problema Flash a sIFR.

Facelift utilizează Biblioteca GD a PHP și PHP. Moștenesc problema legată de înlocuirea fonturilor personalizate - imposibilitatea de a selecta textul. În afară de asta, credem că este și grozav.

Mai multe metode

Tehnicile de mai sus ar putea fi utilizate pe scară mai largă, dar am observat și alte metode pentru a vă permite să convertiți textul în fișiere personalizate frumoase.

Selectați tipul

TypeSelect utilizează proprietățile de tipfaceface.js, jQuery, canvasul, toDataURL, CSS și textul real suprapus pentru a oferi o notă personalizată pe site-ul dvs. web. Selectarea de texte funcționează în Firefox, Safari și chiar în Chrome, dar nu în IE.

Înlocuirea imaginii Swf (swfIR)

swfIR vă oferă posibilitatea de a aplica un sortiment de efecte vizuale pe oricare sau pe toate imaginile de pe site-ul dvs. web. De exemplu, puteți adăuga orice imagini pe site-ul dvs. și swfIR va adăuga o margine rotundă, rotiți poziționarea sau chiar adăugați umbre la ea.

Nouă tehnici pentru înlocuirea imaginii CSS

Acestea nu sunt înlocuiri dinamice ale textului, dar Chris Coyier demonstrează la fel de mult ca nouă tehnici CSS diferite pentru a înlocui textul cu imagini; fiecare cu o carte de raport care precizează condiția - ce se întâmplă dacă imaginile sunt activate sau deconectate, CSS este pornit / oprit.

Arderea fonturilor

Arderea fonturilor pârghie pentru înlocuirea scalabilă Inman Flash (sIFR) pentru a vă schimba titlurile în font personalizat. Tot ce trebuie să faceți este să găsiți fontul, să-l selectați și să introduceți codul în cap și titlul dvs. va fi schimbat în cel mai scurt timp.

WordPress + Înlocuire imagine dinamică

Dacă sunteți un utilizator WordPress care caută o soluție dinamică de înlocuire a imaginii pentru titlul sau chiar conținutul blogului dvs., există șanse să existe plugin pentru ei. Iată câteva pluginuri de înlocuire a textului despre care ajungem să știm despre.

sIFR WordPress Plugin - WP sIFRWP sIFR a fost creat pentru a elimina complicațiile de a obține fonturi personalizate pe un site WordPress. Cu WIF sIFR, trebuie doar să încărcați fișierul cu font SWF în directorul plugin-ului și apoi să îl autentificați, să-l activați și să-l configurați toate stilurile în panoul Setări.

Plugin Cufon WordPress - WP-CufonSingurul lucru pe care trebuie să-l faceți este să vă convertiți fișierele de fonturi și să le încărcați în directorul de pluginuri. Puteți activa obiectele pe care doriți să le înlocuiți în meniul Admin al WordPress.

Facelift Image Replacment (FLIR) Plugin WordpressFLIR pentru WordPress este SEO prietenos și face doar imaginea în browser-ul dacă JavaScript este activat. Codul HTML / XHTML rămâne neschimbat, lăsând etichetele capului să fie citite de către motoarele de căutare și pagina care poate fi citită de cei fără JavaScript.

Burner de control al fonturilor Arderea fonturilor Panoul de control vă permite să adăugați cu ușurință oricare dintre cele 1000 de fonturi gratuite disponibile pe site-ul Font Burner pe tema WordPress.