Share
CSS 3 ligger i horisonten, och vi blir alla upphetsade. Tack vare de senaste webbläsaruppdateringarna kan utvecklare börja arbeta med tidsbesparande nya egenskaper - till exempel @ font-face. Tyvärr är tillgängligheten av dessa funktioner begränsad till en liten del av vår övergripande användarbas. Åtminstone för nästa år eller så måste vi fortsätta att använda Flash- och Javascript-alternativen när du lägger in teckensnitt.
Lyckligtvis har en ny utmanare, Cufón, gjort processen otroligt enkel. Vad gör det annorlunda? I stället för Flash använder den en blandning av duk och VML för att göra teckensnitt. På bara några minuter visar jag hur du använder vilken typsnitt som helst i dina webbapplikationer. Upphetsad?
Besök Cufón hemsida och högerklicka på knappen "Ladda ner" längst upp. Välj "Spara som" och placera den på skrivbordet.
För att kunna fungera måste vi använda verktyget för fontkonvertering på webbplatsen. Alternativt kan du hämta källkoden och konvertera dina teckensnitt lokalt. I demonstrationens syfte har jag valt att använda ett motbjudande teckensnitt: "Jokerman". Obs! Windows-användare: Du kan behöva kopiera teckensnittet från mappen "FONT" till skrivbordet för att detta ska fungera.
Om så önskas, ladda även kursiv och fet filer också.
Därefter måste du välja vilka glyfer som ska ingå. Var inte så snabb att helt enkelt "VÄLJ ALLA". Om du gör det kommer JS-filstorleken att öka dramatiskt. Till exempel behöver vi förmodligen inte alla latinska glyfer; så se till att de lämnas obekanta. I mitt fall har jag kontrollerat dem du ser nedan.
Cufón tillåter dig att ange en specifik webbadress för din fil, för att öka säkerheten. Det är oerhört viktigt att du ser till att du har rätt behörighet att använda ett teckensnitt. HÄR HÄR för att se över villkoren. Om det är fördelaktigt, skriv in din webbplatss webbadress i den här rutan.
Eftersom vi bara har börjat kan du lämna de sista två sektionerna till deras standardvärden. Acceptera villkoren och klicka på "Låt oss göra det här". Därefter presenteras en nedladdningslåda där du frågar vart du ska spara det genererade skriptet. Återigen, spara den till skrivbordet för enkel hämtning.
Nästa steg är att förbereda vårt projekt. Skapa en ny mapp på skrivbordet, lägg till en index.html-fil och dra dina två Javascript-filer i.
Öppna indexfilen i din favoritkodredigerare, lägg till de grundläggande HTML-taggarna och hänvisa sedan till dina två Javascript-filer strax före den slutgiltiga koden (du kan också lägga till dem i huvuddelen).
Nu måste vi bestämma vilken text som ska ersättas. Eftersom vårt dokument fortfarande är tomt, gärna kasta det med slumpmässiga taggar och text. Låt oss försöka ersätta standardfonten i alla H1-taggarna med Jokerman.
När vi kallar "ersätt" -metoden kan vi lägga till en sträng som innehåller taggnamnet som vi vill ersätta - i alla fall alla H1-taggar. Spara filen och visa den i din webbläsare.
Som alltid behöver IE lite mer för att spela bra med de andra. Om du tittar på den här sidan i IE märker du en liten flickr / fördröjning innan teckensnittet görs. För att åtgärda, lägg bara till:
Låt oss föreställa oss att du vill ha mer kontroll över din väljare. Till exempel kanske du inte vill ändra alla H1-taggarna, utan bara de som finns i huvudet på ditt dokument. Cufón har inte en egen selektormotor inbyggd. Den här funktionen utelämnades för att hålla filstorleken så liten som möjligt. Även om det här kan verka som en undergång i början är det faktiskt en bra idé. Med tanke på allmänt om Javascript-ramar på senare tid finns det inget behov av att dubbla upp. Vi granskar två metoder för att rikta in specifika element.
Om du inte använder ett JS-ramverk i ditt projekt använder vi helt enkelt:
Cufon.replace (document.getElementById ( 'header') getElementsByTagName ( 'h1').);
Koden ovan anger "Hämta elementet som har ett ID för" header ". Hitta sedan alla H1-taggarna inom det här elementet och" ersätt "dem med vårt nya teckensnitt.
För att piggyback av jQuery's väljarmotor behöver vi bara importera jQuery före Cufón.
Accentsconagua
Cufon.replace ('# header h1'); Så enkelt är det! Observera att du måste importera jQuery FÖRE ditt Cufón-skript för att denna metod ska fungera.
Tro det eller inte, du är klar! Med bara några rader med enkel kod kan du använda alla teckensnitt du önskar! Se bara till att du har tillstånd och överensstämmer med typ gjuterier licensiering.
Huvudhänsynet från typen gjuteri tycks vara att typsnittskriptet som genereras av Cufón kan användas för att omvända själva själva typsnittet.
-Cameron Moll
Vad är dina tankar? Ha en bättre metod som jag inte känner till?
