Share
I förra veckan visade Philo dig hur du implementerar sIFR3. Den här gången ska jag visa dig hur man implementerar Facelift Image Replacement (eller FLIR), ett alternativ till sIFR som kräver inte Flash.
Observera att demon använder olika teckensnitt än de som används i handledningen för att kopiera rätt orsaker.
Det första steget är att ladda ner FLIR. Unzip hämtningen och placera mappen inuti (facelift-1.1.1) någonstans på din webbserver. Jag har bytt namn till mappen för att bara "ansiktslyftning" för att göra det enklare.
Inne i facelift-mappen är en Javascript-fil med namnet "flir.js". Du kan välja att lämna den där, eller du kan flytta den på annat håll, till exempel en central mapp för Javascript-filer. För denna handledning gör vi just det och flyttar det till en mapp som heter "js" i rotkatalogen på vår webbplats.
Öppna nu flir.js i din favorit textredigerare och gå till rad 30. Det ska se ut så här:
,väg:"
Vi behöver lägga en absolut eller relativ sökväg till vår ansiktslyftkatalog mellan de två enkla citat. Relativa sökvägar är emellertid relativa till sidan och inte till filen flir.js, vilket kan orsaka vissa problem med webbplatser som använder mod_rewrite för att skapa vackra webbadresser. Det mest surefire sättet att få allt att fungera är att ge en absolut väg.
,sökväg: '/ path / to / facelift /'
Öppna den sida du vill lägga till FLIR till och lägg till följande mellan huvudetiketterna för att bifoga flir.js:
Lägg sedan till följande precis före stängningskroppen:
Detta steg är ganska enkelt. Ladda ner de teckensnitt du vill använda. Jag använder Delicious, Tallys och Tusj. Placera dina teckensnitt i mappen "fonter" i mappen "facelift". Öppna config-flir.php och du hittar ett block med kod som ser något ut så här:
// Varje teckensnitt du vill använda ska ha en post i teckensnittet. $ fonts = array (); $ teckensnitt ['tribalbenji'] = 'Tribal_Font.ttf'; $ teckensnitt ['antagea'] = 'Antagea.ttf'; $ teckensnitt ['illuminating'] = 'ArtOfIlluminating.ttf'; $ teckensnitt ['bentham'] = 'Bentham.otf'; $ teckensnitt ['geo'] = 'Geo_Oblique.otf'; $ teckensnitt ['puritan'] = 'Puritan_Regular.otf'; $ teckensnitt ['konstytucyja'] = 'Konstytucyja_1.ttf'; $ teckensnitt ['promocyja'] = 'Promocyja.ttf'; $ teckensnitt ['stunfilla'] = 'OPN_StunFillaWenkay.ttf'; $ teckensnitt ['animaldings'] = 'Animal_Silhouette.ttf'; // Teckensnittet kommer som standard till följande (skriv ditt vanligaste teckensnitt här). $ teckensnitt ['default'] = $ teckensnitt ['puritan'];
Som du säkert kan berätta från kommentarerna är varje post i arrayen $ font ett teckensnitt i teckensnittsmappen. Uppställningsnyckeln mellan parenteserna är vad vi använder i våra CSS-deklarationer när vi vill använda teckensnittet. Låt oss lägga till de teckensnitt vi hämtade tidigare.
$ teckensnitt ['ffftusj'] = 'FFF Tusj.ttf'; $ teckensnitt ['deliciousheavy'] = 'Delicious-Heavy.otf'; $ teckensnitt ['tallys'] = 'Tallys_15.otf';
Vad som tilldelas $ teckensnitt ['default'] kommer att användas om ett teckensnitt inte anges. Låt oss göra Delicious Heavy som standard.
$ teckensnitt ['default'] = $ teckensnitt ['deliciousheavy'];
Det finns ett antal andra inställningar i filen config-flir.php, men de kan lämnas ensamma. Vad varje inställning gör är ganska självförklarande och det finns kommentarer om du vill tweak dem.
FLIR kommer som standard att göra bildbyten för endast rubriker. Du kan ange vad som ska ersättas genom att skicka en rad CSS-väljare till funktionen FLIR.auto () som vi lade till i steg 1.
FLIR.auto (['h1', 'h2', 'h3.alert', 'starkt # viktigt']);
Detta kommer att berätta för FLIR att tillämpa bildutbytet på h1-taggar, h2-taggar, h3-taggar med en klass av "alert" och starka taggar med ett id "viktigt".
Nu behöver vi bara tillämpa CSS-stilar som vanliga. Använd tangenterna för $ fonts array som teckensnittet i din CSS-deklaration för att använda det teckensnittet. Låt oss tillämpa Tusj på alla h1 tas, Delicious Heavy till alla h2-taggar och Tallys till alla h3-taggar med en klass av varning.
h1 font-family: ffftusj, Georgia, serif; h2 font-family: deliciousheavy, Arial, sans-serif; h3.alert font-family: tallys, Arial, sans-serif;
Det är allt! De starka taggarna med ett "viktigt" id kommer att falla tillbaka på standardfonten som vi angav i config-flir.php, vilket i detta fall är Delicious Heavy. Den genererade bildtexten kommer att skala till vilken fontstorlek som helst som anges i CSS. CSS-färger kommer också att genomföras, men textomvandlingar kommer inte att.
Även om FLIR är en ganska snygg lösning på textbildsutbyte, finns det några mindre problem. PHP GD-biblioteket gör inte de fina detaljerna mycket bra vilket är ganska märkbart i Tusj-fonten. Topptexten gjordes i Photoshop och den nedersta texten gjordes av PHP GD-biblioteket som används av FLIR.
En annan del av FLIR är att det kräver en webbserver med PHP och GD-biblioteket. De flesta värdar har dock båda så det är försumbar.
En fördel med FLIR över sIFR, dess huvudkonkurrent, är att det är lättare att implementera och kräver inte att Flash skapar eller visar.
Både FLIR och sIFR är utmärkta lösningar och kommer att fungera bra. De flesta besökare kommer att kunna se båda utan problem, men för de få på kanten av klockkurvan som inte har Flash kan FLIR vara en bättre lösning.
Accentsconagua