Style typsnitt med cufon typsnitt ersättning

Cufon är ett javascriptbibliotek för textersättning. Det är inte relaterat till sIFR i kodbasen, men åstadkommer samma sak utan behov av Flash-filer. Att ställa in det tar cirka 5 minuter och då behöver du inte röra det igen. Det kan inte vara enklare och det kan ha stor inverkan på hur din webbplats ser ut.

Hur det fungerar

Det första steget är att skicka in ditt teckensnitt via Cufon-webbplatsen. De bearbetar teckensnittet till ett SVG-format (skalbar vektorgrafik). Sedan förvärvas sökvägarna bearbetade till VML (vektormarkeringsspråk), vilket kraftigt ökar Cufons hastighet i IE. De resulterande datana kodas sedan till JSON och överförs till en Cufon-definierad funktion för bearbetning, och det är där magin händer.

Cufon-exempel

Gå först till Cufon-webbplatsen och skicka in din teckensnitt för bearbetning. Den kommer att spjuta ut en .js-fil som du kan ladda ner. Du måste ha den här filen för att Cufon kan översätta texten till det teckensnitt du väljer.

Därefter inkluderar både cufon-yui.js-filen och den genererade javascript-filen. Sist är det bara att lägga in lite text i en klass och initiera en Cufon-ersättning runt det klassnamnet. Fullständig kod nedan:

Detta är text i molotstilsorten

Resulterar i:
Detta är text i molotstilsorten

Cufon Lineheight

Det finns ett känt problem med alla webbläsare med linjehöjd som förmodligen inte kommer att fixas

Cufon.now ()

För en bättre tittarupplevelse på IE rekommenderas att du anropar funktionen Cufon.now () direkt före karaktärsbrickan. Detta tar hand om en annars kortvarig blip som kan hända när sidan laddas och sedan laddas teckensnittet.

IE9-problem

Från och med det här inlägget fanns det vissa problem med vissa versioner av IE9, jag vet att de arbetade med att lösa dem och hoppas att det snart kommer att släppas för att lösa dessa problem.