Dynaamisten kuvien korvaaminen käytännön tekniikoilla ja työkaluilla

Kun kyse on web-suunnittelusta, suunnittelun luovuutta ei pidä estää tukemien web-fonttien rajoitetuilla valinnoilla web-turvallisia fontteja. Suunnittelijoilla pitäisi olla vapaus käyttää fontteja, joita he suosivat otsikoihin ja sisältöön.

Vuonna 2005 dynaaminen kuvien korvaaminen oli suosittu tekniikan avulla Skaalautuva Inmanin Flash-korvaaminen (sIFR). Kehittänyt Shaun Inman, SIFR hyödyntää Javascriptia ja Adobe Flashia, jotta web-suunnittelijat voivat käyttää mitä tahansa mukautettuja kirjasimia, joita he haluavat sivustolla, ja silti säilyttää näkyvyyden niille, joilla ei ole kyseistä fonttia. Ja kun verkko kehittyy edelleen, meillä on nykyisin enemmän vaihtoehtoisia ratkaisuja eri teknologioiden avulla, mikäli et ole aivan fani Flashista.

Tarkastellaan vielä joitakin niistä tekniikoita dynaamisten kuvien korvaamiseksi.

Yleisesti käytetyt tekniikat

Seuraavassa on joitakin yleisimmin käytettyjä tekniikoita dynaamisten kuvien korvaamiseen.

Skaalautuva Inmanin Flash-korvaaminen (sIFR)

sIFR on yksi suosituimmista tavoista upottaa mukautettuja fontteja verkkosivuilla. Se käyttää Javascript- ja Flash-ohjelmia luomaan sivustollesi mukautettuja kirjasimia ja mahdollistaa muunnetun kirjasimen valinnan. Sen lisäksi muunnettu kirjasin pysyy tekstinä lähdekoodissa, joten hakukone voi indeksoida niitä edelleen.

sIFR 2 (suositeltava) on nykyinen vakaa julkaisu, mutta jos etsit SIFR: n käyttöönottoa, sinun pitäisi myös tietää se siFR 3 beta on myös ladattavissa. Se voi olla hieman buginen, mutta ainakin se ratkaisee fontin laajennuksen ongelman sIFR 2.

SIFR-työkalut, jotka saattavat olla käteviä:

• sIFRvaultsIFRvault on ladattavien sIFR-fonttien arkisto.
• sIFR-generaattoriOnline-työkalu, jonka avulla voit luoda sIFR .swf-tiedostoja muutamalla hiiren napsautuksella. Lataa vain fontin fontti, jonka haluat muuntaa, esikatsella ja ladata.
• Muunna fontit sIFR-muotoonLataa .TTF-fontti ja tämä sivusto muuntaa ne sIFR-Flash-tiedostoon.

sIFR Lite

Alkuperäinen sIFR on 22k, joten Dave päätti uudistaa sen käyttämällä objektiivisempaa lähestymistapaa ja tulosta? 3x pienempi 3,7 k: ssa.

PHP + CSS: n dynaamisen tekstin korvaaminen (P + C DTR)

Kuten nimestä voi päätellä, tämä on tekstin korvausmenetelmä, joka käyttää PHP: tä ja CSS: ää, jotka käyttävät alkuperäistä menetelmää, jota on kuvattu Steward Rosenberger. Se on myös edellisen version kehittämä parannus R. Marie Cox joka ei tue tekstin käärimistä ja sisäisiä tunnisteita. Toinen hieno asia P + C DTR: stä on, että kuvan teksti voidaan muokata CSS-tunnisteilla.

typeface.js

Mikä tekee typeface.js erityistä on, että he käyttävät Javascriptin upottamaan mukautettuja fontteja ja tyyliä voidaan edelleen muokata HTML: n ja CSS: n avulla, eikä Flashiä tarvita. Se on avoimen lähdekoodin ja tukee useimpia selaimia, joita käytämme näinä päivinä riippumatta siitä, onko se Safari, Firefox, IE (6 ja uudempi).

Henkilökohtaisesti joidenkin typeface.js-kokeiden jälkeen mielestämme voisi olla joitakin mahdollisia parannuksia. Ensinnäkin kirjasimet ovat yleensä erilaiset eri selaimissa. Jos käytät typeface.js-ohjelmaa, suosittelemme, että suoritat selaimen rajatarkastuksen ennen kuin olet sitä mieltä, että Firefoxissa näkee, mitä näet Safarissa. Teksti ei myöskään ole valittavissa typeface.js: n avulla.

Mukautettuja fontteja typeface.js: ssä ei koota; tarkoittaa, että käyttäjät voivat ladata fontit. Se voi johtaa tekijänoikeusongelmaan. On suositeltavaa, että tarkistat huolellisesti, että käytettävät kirjasimet ovat oikein uudelleenjakelussa.

Cufon

Salamaa ei tarvita, Cufon on erinomainen vaihtoehto sIFR: lle ja se on melko helppo toteuttaa. Ensinnäkin käytät Cufon-generaattoria luomaan ja mukauttamaan haluamaasi fonttia, sitten lisäät Cufon-Javascriptin lähdekoodiin ja kerrot komentosarjalle, mitkä valitsimet haluat, että fontit mukautetaan.

Suurin ongelma Cufonin kanssa olisi oikeudellinen kysymys näiden mukautettujen fonttien käytöstä verkossa. Koska se on upotettu Javascriptiin, kuka tahansa voi tarkastella lähdekoodia helposti. Cufonin mukautetut kirjasimet eivät ole valittavissa.

facelift

Tunnetaan myös Facelift-kuvan korvaaminen (FLIR), se on toinen suuri menetelmä sIFR: lle, jossa ei tarvita Flashia. Näyttää siltä, ​​että toinen vaihtoehto on lyömällä SIFR: n Flash-numeroon.

Facelift käyttää PHP: tä ja PHP: n GD-kirjastoa. Ne perivät muokatun fontin korvaamisen perinnöllisen ongelman, joka ei pysty valitsemaan tekstiä. Sen lisäksi mielestämme on myös hienoa.

Lisää menetelmiä

Edellä mainitut tekniikat saattavat olla laajemmin käytössä, mutta olemme huomanneet myös muita tapoja antaa tekstin muuntamiseksi kauniiksi mukautetuiksi kirjasinlajeiksi.

Tyyppi Valitse

TypeSelect vipua typeface.js, jQuery, kankaalle, toDataURL: lle, CSS-taustaominaisuuksille ja todelliselle päällekkäiselle tekstille, jotta saat mukautetun kirjasimen sivustossasi. Tekstin valinta toimii Firefoxissa, Safarissa ja jopa Chromeissa, mutta ei IE: ssä.

Swf-kuvan korvaaminen (swfIR)

swfIR antaa sinulle mahdollisuuden soveltaa valikoimaa visuaalisia tehosteita mihin tahansa tai kaikkiin verkkosivustosi kuviin. Voit esimerkiksi lisätä Web-sivustoon kuvia ja swfIR lisää pyöreämmän reunan, kiertää paikannuksen tai jopa lisätä varjoja siihen.

Yhdeksän tekniikkaa CSS-kuvan korvaamiseksi

Nämä eivät ole dynaamisia tekstin korvauksia, vaan Chris Coyier osoittaa jopa yhdeksän eri CSS-tekniikkaa tekstin korvaamiseksi kuvilla; jokaisella on raporttikortti, jossa luetellaan ehto - mitä jos kuvat ovat päällä / pois, CSS on päällä / pois päältä.

Fontin poltin

Fontin poltin Korjaa Scalable Inman Flash Replacement (sIFR) -toimintoa vaihtaaksesi nimikkeitä mukautettuun fonttiin. Sinun tarvitsee vain etsiä fontti, valita sen ja lisätä koodin päähän ja otsikko muuttuu.

WordPress + Dynamic Image Replacement

Jos olet WordPress-käyttäjä, joka etsii dynaamista kuvankorvausratkaisua blogisi otsikon tai sisällön suhteen, on todennäköistä, että niitä on laajennettu. Seuraavassa on joitakin tekstin korvaavia laajennuksia, joista tiedämme.

sIFR WordPress Plugin - WP sIFRWP sIFR luotiin poistamaan monimutkaisia ​​ongelmia, jotka aiheutuvat mukautettujen fonttien hankkimisesta WordPress-sivustolla. WP sIFR: n avulla sinun on ladattava SWF-fonttitiedosto vain plugin-hakemistoon ja kirjauduttava sisään, aktivoitava se ja konfiguroit sen tyylit Asetukset-paneelissa.

Cufon WordPress Plugin - WP-CufonAinoa asia, joka sinun täytyy tehdä, on fontfileiden muuntaminen ja lataaminen plugins-hakemistoon. Voit ottaa käyttöön muutettavat objektit WordPressin Admin-valikossa.

Facelift Image Replacment (FLIR) Wordpress-laajennusFLIR WordPress on SEO-ystävällinen ja tekee vain kuvan selaimessa, jos JavaScript on käytössä. HTML / XHTML-koodi säilyy muuttumattomana, jolloin hakukoneet näkyvät luettavina ja hakukoneiden lukematon sivu.

Fontin poltinohjauspaneeli Fontin poltin Ohjauspaneelin pluginin avulla voit helposti lisätä minkä tahansa 1000: n ilmaisen fontin, joka on käytettävissä Font Burner -sivustossa, WordPress-teemaan.