Cufon, zo werkt het
Geschreven door Jacques Stoop dinsdag, 01 september 2009 07:56
Heb je al ooit van sIFR gehoord, dan is dat vast nu de reden waarom je naar Cufon op zoek bent. Cufon is een goed alternatief voor sIFR dat ondanks de voordelen ook een aantal problemen met zich meebrengt zoals lange laadtijden en de verplichte aanwezigheid van Flash.
- Zie ook onze nieuwe Cufon blogpost: "Cufon met schaduw en gradients" -
Om Cufon een succes te laten worden hebben de makers de volgende doelen gesteld:
- Geen plugins vereist - het mag alleen gebruik maken van standaard clientside voorzieningen
- Compatibility - het moet op iedere grote browser werken
- Gebruiksgemak - weinig tot geen instellingen moeten verricht worden voor de standaard configuratie
- Snelheid - het moet snel zijn, zelfs bij grote hoeveelheden tekst
Hoe werkt het?
Cufon bestaat uit twee verschillende onderdelen:
- een font generator, die een font omzet naar een bruikbaar lettertype
- de rendering engine, het JavaScript dat de fonts weergeeft
Stap 1: de generator
De generator zet met behulp van FontForge het lettertype*(1) om naar een SVG lettertype*(2). Daarna wordt de XML structuur van het SVG lettertype omgezet naar VML paden die standaard ondersteund worden door Internet Explorer. Vervolgens wordt deze, door Vector Markup Language gestructureerde informatie, weer omgezet naar JSON gecombineerd met JavaScript.
1) TrueType - TTF, OpenType - OTF, Printer Font Binary - PFB en PostScript fonts worden ondersteund.
2) Op XML gebaseerd bestandsformaat voor statische en dynamische vectorafbeeldingen.
De generator vind je hier, de standaardinstellingen volstaan. Voor een Nederlandstalige website kun je het beste de volgende glyphs aanvinken:
- Uppercase
Basic Latin uppercase letters (A-Z). (26 glyphs) - Lowercase
Basic Latin lowercase letters (a-z). (26 glyphs) - Numerals
Basic Latin digits (0-9). (10 glyphs) - Punctuation
Basic Latin punctuation (!@#%...). (33 glyphs) - Basic Latin
Basic Latin glyphs within the Unicode range 0x0020 to 0x007E. (95 glyphs)
Stap 2: de renderer
De renderer bestaat uit drie onderdelen:
- de core, deze bevat de API en alle functionaliteit
- de VML render engine voor Internet Explorer
- de HTML5 canvas render engine voor de overige browsers
De renderer oftewel het JavaScript vind je hier.
Het enige wat je nu nog moet doen is de volgende code plaatsen in de head sectie van de pagina's waar je Cufón wil gebruiken:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Vegur_300.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>
</head>
<body>
<h1>This text will be shown in Vegur.</h1>
</body>
</html>
Overal waar je nu h1 tags gebruikt wordt de header mooi weergegeven, net zoals op deze website.
- Zie ook onze nieuwe Cufon blogpost: "Cufon met schaduw en gradients" -
