Share
I forrige uke viste Philo deg hvordan du implementerer sIFR3. Denne gangen skal jeg vise deg hvordan du implementerer Facelift Image Replacement (eller FLIR), et alternativ til sIFR som krever ikke Flash.
Legg merke til at demoen bruker forskjellige skrifter enn de som ble brukt i opplæringen for å få kopier av rette grunner.
Det første trinnet er å laste ned FLIR. Unzip nedlastingen og legg mappen inne (facelift-1.1.1) et sted på webserveren din. Jeg har omdøpt mappen til bare "ansiktsløftning" for å gjøre tingene enklere.
Inne i ansiktsløftemappen er en Javascript-fil kalt "flir.js". Du kan velge å legge det der, eller du kan flytte den andre steder, for eksempel en sentralisert mappe for Javascript-filer. For denne opplæringen vil vi bare gjøre det og flytte det til en mappe kalt "js" i rotkatalogen på nettstedet vårt.
Åpne nå flir.js i din favoritt tekstredigerer og gå til linje 30. Det skal se slik ut:
,sti:"
Vi må legge en absolutt eller relativ vei til vår ansiktsløftekatalog mellom de to enkle sitatene. Imidlertid er relative stier i forhold til siden og ikke til flir.js-filen, noe som kan føre til problemer med nettsteder som bruker mod_rewrite til å lage vakre nettadresser. Den mest surefire måten å få alt på, er å gi en absolutt sti.
,sti: '/ path / to / facelift /'
Åpne siden du vil legge til FLIR til, og legg til følgende mellom hodetakene for å legge til flir.js:
Legg deretter til følgende rett før den avsluttende kroppsmerket:
Dette trinnet er ganske enkelt. Last ned skrifttyper du vil bruke. Jeg bruker Delicious, Tallys og Tusj. Plasser fonter i mappen "fonter" i "ansiktsløft" -mappen. Åpne config-flir.php, og du finner en blokk med kode som ser noe ut som dette:
// Hver skrift du vil bruke skal ha en oppføring i skriftfeltet. $ fonts = array (); $ fonter ['tribalbenji'] = 'Tribal_Font.ttf'; $ fonter ['antagea'] = 'Antagea.ttf'; $ fonter ['illuminating'] = 'ArtOfIlluminating.ttf'; $ fonter ['bentham'] = 'Bentham.otf'; $ fonter ['geo'] = 'Geo_Oblique.otf'; $ fonter ['puritan'] = 'Puritan_Regular.otf'; $ fonter ['konstytucyja'] = 'Konstytucyja_1.ttf'; $ skrifter ['promocyja'] = 'Promocyja.ttf'; $ fonter ['stunfilla'] = 'OPN_StunFillaWenkay.ttf'; $ fonter ['animaldings'] = 'Animal_Silhouette.ttf'; // Skriften vil standard til følgende (sett den vanligste fonten her). $ fonter ['default'] = $ fonter ['puritan'];
Som du sikkert kan fortelle fra kommentarene, er hver oppføring i $ fonts array en skrifttype i skrifter-mappen. Oppsettnøkkelen mellom parentesene er det vi bruker i våre CSS-deklarasjoner når vi vil bruke skrifttypen. La oss legge til skriftene vi lastet ned tidligere.
$ fonts ['ffftusj'] = 'FFF Tusj.ttf'; $ fonter ['deliciousheavy'] = 'Delicious-Heavy.otf'; $ fonts ['tallys'] = 'Tallys_15.otf';
Uansett hva som er tilordnet $ fonter ['default'] vil bli brukt hvis en skrift ikke er spesifisert. La oss lage Delicious Heavy som standard.
$ fonter ['default'] = $ fonter ['deliciousheavy'];
Det finnes en rekke andre innstillinger i config-flir.php-filen, men de kan stå alene. Hva hver innstilling gjør er ganske selvforklarende, og det er kommentarer om du vil finjustere dem.
Som standard vil FLIR gjøre utskiftninger av bilder for kun overskrifter. Du kan spesifisere hva som skal erstattes ved å sende en rekke CSS-selektorer til FLIR.auto () -funksjonen vi la til i trinn 1.
FLIR.auto (['h1', 'h2', 'h3.alert', 'strong # important']);
Dette vil fortelle FLIR å bruke bildeutskiftingen til h1-koder, h2-koder, h3-koder med en klasse av "varsling" og sterke koder med et id med "viktig".
Nå er alt vi trenger å gjøre, er å bruke CSS-stiler som normalt. Bruk nøklene til $ fonts array som skrifttypen i CSS-erklæringen din for å bruke denne skrifttypen. Lar oss bruke Tusj til alle h1 tas, Delicious Heavy til alle h2-koder, og Tallys til alle h3-koder med en klasse av varsel.
h1 font-family: ffftusj, Georgia, serif; h2 font-family: deliciousheavy, Arial, sans-serif; h3.alert font-family: tallys, Arial, sans-serif;
Det er det! De sterke kodene med et "viktig" id vil falle tilbake på standardfonten vi angav i config-flir.php, som i dette tilfellet er Delicious Heavy. Den genererte bildeteksten skaleres til hvilken skriftstørrelse som er spesifisert i CSS. CSS-farger vil også gjennomføre, men teksttransformasjoner vil ikke.
Selv om FLIR er en ganske fin løsning på tekstbildeutskifting, er det noen få mindre problemer. PHP GD-biblioteket gir ikke de fine detaljene veldig bra, noe som er ganske merkbart i Tusj-fonten. Toppteksten ble gjengitt i Photoshop, og den nederste teksten ble gjengitt av PHP GD-biblioteket som ble brukt av FLIR.
En annen del av FLIR er at den krever en webserver med PHP og GD-biblioteket. Imidlertid har de fleste vertene begge, så dette er ubetydelig.
En fordel ved FLIR over sIFR, dens hovedkonkurrent, er at det er enklere å implementere og krever ikke at Flash lager eller ser på.
Både FLIR og sIFR er gode løsninger, og vil tjene deg godt. De fleste besøkende vil kunne se begge uten mye trøbbel, men for de få på kanten av klokkekurven som ikke har Flash, kan FLIR være en bedre løsning.
Accentsconagua