Dynamische beeldvervanging Praktische technieken en hulpmiddelen

Als het gaat om webdesign, moet creativiteit van design niet worden afgeremd door de beperkte keuzes van ondersteunde weblettertypen die we de webveilige lettertypen. Ontwerpers moeten vrijheid hebben om lettertypen te gebruiken die ze het liefst hebben op titels en inhoud.

In 2005 werd dynamische beeldvervanging populair gemaakt met een techniek genaamd Schaalbare Inman Flash Replacement (sIFR). Ontwikkeld door Shaun Inman, sIFR gebruik maken van Javascript en Adobe Flash om webontwerpers in staat te stellen aangepaste lettertypen te gebruiken die ze leuk vinden op de website en toch zichtbaarheid te behouden voor gebruikers die dat lettertype niet hebben. En terwijl het web blijft evolueren, hebben we vandaag meer alternatieve oplossingen met verschillende technologieën, voor het geval u niet echt fan bent van Flash.

Zonder verder oponthoud, laten we eens kijken naar enkele van de technieken om Dynamic Image Replacements te bereiken.

Veelgebruikte technieken

Hier zijn enkele van de meest gebruikte technieken voor dynamische beeldvervanging.

Schaalbare Inman Flash Replacement (sIFR)

sIFR is een van de meest populaire methoden om aangepaste lettertypen op websites in te sluiten. Het gebruikt Javascript en Flash om een aangepast lettertype voor uw website te genereren en maakt het mogelijk om een geconverteerd lettertype te selecteren. Afgezien daarvan blijft omgezet lettertype als tekst in broncodes, zodat de zoekmachine ze nog steeds kan crawlen.

sIFR 2 (aanbevolen) is de huidige stabiele release, maar als u op zoek bent naar het implementeren van sIFR, zou u dat ook moeten weten siFR 3 bèta is ook beschikbaar om te downloaden. Het kan een beetje buggy zijn, maar het lost in ieder geval het probleem met de uitbreiding van het lettertype op sIFR 2.

Hulpprogramma's voor sIFR die van pas kunnen komen:

sIFRvaultsIFRvault is een opslagplaats van sIFR-lettertypen die u kunt downloaden.
sIFR-generatorOnline tool waarmee u sIFR .swf-bestanden kunt maken met een paar klikken van uw muis. Upload eenvoudig het TTF-lettertype van het lettertype dat u wilt converteren, bekijken en downloaden.
Converteer lettertypen naar sIFRUpload een .TTF-lettertype en deze website laat ze omzetten naar sIFR Flash-bestand.

sIFR Lite

De oorspronkelijke sIFR is 22k, dus Dave besloten om het te herwerken met een meer objectgerichte benadering en het resultaat? 3x kleiner bij 3.7k.

PHP + CSS Dynamische tekstvervanging (P + C DTR)

Zoals de naam doet vermoeden, is dit een tekstvervangingsmethode die gebruik maakt van PHP en CSS die gebruik maken van de originele methode beschreven door Steward Rosenberger. Het is ook een uitbreiding van de vorige versie ontwikkeld door R. Marie Cox dat ondersteunt geen tekstterugloop en innerlijke tags. Een ander cool ding over P + C DTR is dat de afbeeldingstekst kan worden aangepast met CSS-tags.

typeface.js

Wat maakt typeface.js speciaal is dat ze alleen Javascript gebruiken om aangepaste lettertypen te insluiten en de stijl verder kan worden aangepast met HTML en CSS, er is geen Flash vereist. Het is open source en ondersteunt de meeste browsers die we tegenwoordig gebruiken, of het nu gaat om Safari, Firefox, IE (6 of hoger).

Persoonlijk na wat experimenten met typeface.js, denken we dat er potentieel ruimte is voor verbeteringen. Ten eerste neigen de lettertypen er enigszins anders uit te zien in verschillende browsers. Als u typeface.js gebruikt, raden we aan dat u een controle van verschillende browsers uitvoert voordat u ervan uitgaat dat wat u in Firefox ziet, is wat u in Safari ziet. Tekst kan ook niet worden geselecteerd met typeface.js.

Aangepaste lettertypen in typeface.js worden niet gecompileerd; wat betekent dat gebruikers de lettertypen kunnen downloaden. Dat kan tot auteursrechtproblemen leiden. Het is raadzaam dat u grondig hebt gecontroleerd om er zeker van te zijn dat de lettertypen die u gebruikt goed zijn voor herdistributie.

Cufon

Geen Flash vereist, Cufon is een geweldig alternatief voor sIFR en het is vrij eenvoudig te implementeren. Eerst gebruik je de Cufon-generator om het gewenste lettertype te genereren en aan te passen, dan voeg je de Cufon Javascript in je broncode in en vertel je aan het script welke selectors je wilt dat de lettertypen worden aangepast.

Het grootste probleem met Cufon zou het juridische probleem zijn om deze aangepaste lettertypen online te gebruiken. Omdat het is ingesloten in Javascript, kan het eenvoudig worden geript door iedereen die de broncode bekijkt. Aangepaste lettertypen van Cufon kunnen niet worden geselecteerd, dat is de andere uitschakelen.

facelift

Ook gekend als Facelift Image Replacement (FLIR), het is een andere geweldige methode om sIFR te maken die geen vereiste Flash vereist. Het lijkt erop dat een heel ander alternatief in het Flash-probleem van sIFR terechtkomt.

Facelift gebruikt de GD-bibliotheek van PHP en PHP. Ze erven het verouderde probleem van vervanging van aangepaste lettertypen - ze kunnen de tekst niet selecteren. Afgezien daarvan vinden we het ook geweldig.

Meer methoden

De bovenstaande technieken kunnen op grotere schaal worden gebruikt, maar we hebben ook enkele andere manieren gezien om uw tekst om te zetten in prachtige aangepaste lettertypen.

Type Selecteer

TypeSelect maakt gebruik van typeface.js, jQuery, het canvas, toDataURL, CSS achtergrondeigenschappen en echte overlay-tekst om een aangepast lettertype op uw website te plaatsen. Tekstselectie werkt op Firefox, Safari en zelfs Chrome, maar niet op IE.

Swf Image Replacement (swfIR)

swfIR geeft u de mogelijkheid om een assortiment van visuele effecten toe te passen op een of alle afbeeldingen op uw website. U kunt bijvoorbeeld alle afbeeldingen op uw website toevoegen en swfIR voegt een rondere rand toe, roteert de positionering of voegt er zelfs schaduwen aan toe.

Negen technieken voor CSS Image Replacement

Dit zijn geen dynamische tekstvervangingen, maar Chris Coyier toont maar liefst negen verschillende CSS-technieken om tekst met afbeeldingen te vervangen; elk met een rapportkaart met de staat van - wat als afbeeldingen aan / uit zijn, CSS is aan / uit.

Font Burner

Font Burner gebruik maken van Scalable Inman Flash Replacement (sIFR) om uw titels in aangepast lettertype te veranderen. Het enige dat u hoeft te doen, is het lettertype zoeken, selecteren en de code in het hoofd invoegen en uw titel zal binnen de kortste keren worden gewijzigd.

WordPress + Dynamic Image Replacement

Als u een WordPress-gebruiker bent en op zoek bent naar een dynamische oplossing voor het vervangen van afbeeldingen voor de titel of zelfs de inhoud van uw blog, is de kans groot dat er een plug-in voor hen is. Hier zijn enkele plug-ins voor tekstvervanging die we leren kennen.

sIFR WordPress Plugin - WP sIFRWP sIFR is gemaakt om de complicaties van het verkrijgen van aangepaste lettertypen op een WordPress-site te verwijderen. Met WP sIFR hoeft u alleen uw SWF-lettertypebestand te uploaden naar de map met plug-ins en vervolgens in te loggen, te activeren en de stijlen ervan te configureren in het deelvenster Instellingen.

Cufon WordPress Plug-in - WP-CufonHet enige dat u hoeft te doen is uw lettertypen converteren en ze uploaden naar de map met plug-ins. U kunt de objecten die u wilt vervangen inschakelen in het beheerdersmenu van WordPress.

Facelift Image Replacment (FLIR) Wordpress-invoegtoepassingFLIR voor WordPress is SEO-vriendelijk en geeft de afbeelding alleen weer in de browser als JavaScript is ingeschakeld. Je HTML / XHTML-code blijft ongewijzigd, waardoor je head-tags leesbaar zijn voor zoekmachines en de pagina kan worden gelezen door mensen zonder JavaScript.

Font Burner ConfiguratieschermDe Font Burner Via de invoegtoepassing op het bedieningspaneel kunt u eenvoudig een van de meer dan 1000 gratis lettertypen die beschikbaar zijn op de website van Font Burner toevoegen aan uw WordPress-thema.