Cufon, wat is het en hoe werkt het? - Webmaster forum wmbeurs.nl

Inhoud

- Wat is cufon?
- Wat heb ik nodig voor cufon?
- Hoe laat ik het nu goed werken
- Links

Wat is cufon?

Cufon is een alternatief voor sIFR. Voor de mensen die niet weten wat sIFR doet en wat dus ook Cufon doet volgt hier een korte utileg. Wanneer je een lay-out moet slicen die gebruikt maakt van de standaard fonts die op elke computer geïnstalleerd staan maar van wat meer specialere fonts, moet je dit op een andere manier dan gewoon in de CSS definiëren doen. De meeste mensen die wat weten van slicen zullen dan ook weten dat een afbeelding gebruiken niet bepaald de optimale manier is dan. Een goed alternatief hiervoor is sIFR, een nadeel hiervan is dat flash nog regelmatig bij mensen staat uitgeschakeld in de browser, zij zullen deze font dan niet goed kunnen zien. Cufon is een JavaScript alternatief en dus ook zichtbaar voor de mensen die flash niet accepteren in hun browser.

Wat heb ik nodig voor cufon?

Cufon werkt vrij simpel, hieronder vind je een stappenplan hoe je aan alle benodigde files komt.

- Je download de font die je gaat gebruiken
- Je genereert een JS bestand met deze generator
- Je download het JS bestand dat cufon aanstuurt bijvoorbeeld hier
- Je download jQuery, later komt er meer informatie waarom ik dit gebruik en het ook aan te raden is om dit te gebruiken. Bijvoorbeeld hier te downloaden.

Hoe laat ik het nu goed werken?

Hieronder komt de uitleg om Cufon netjes te laten werken. We willen bijvoorbeeld de <h2> in onze div menu met Gotham laten werken. Met een concreet voorbeeld werken is altijd net iets gemakkelijker.

Het CSS deel:

In de CSS gaan we onze h2 in de div menu definieren. Let op ik raad jullie allemaal toch even aan om een lettertype te kiezen dat getoont wordt wanneer JS uitgeschakeld staat.

Code:

#menu h2 {
font-family: Arial, Verdana;
font-weight: 12px;
color: #E9F1F7;
height: 20px;
background: #000000;
}

Gewoon even een simpel stukje code CSS, uiteraard is het niet verplicht al deze elementen te gebruiken. Ik heb er maar even gauw wat neer gezet. Let wel op buiten het lettertype heeft alles effect op de output, aangezien cufon enkel het lettertype verandert. De grote, kleur, .. behoud hij gewoon zoals aangegeven in de CSS.

Het HTML deel:

Ok, nu gaan we verder met onze index.html. In dit voorbeeld heb ik alle bestanden die ik in het vorige onderdeel bij elkaar geraapt heb in de map JS geplaatst.

Dit zijn:
cufon.js
Gotham_Medium_500-Gotham_Medium_italic_500.font.js
jquery-1.3.2.min.js

Deze gaan we zoals jullie waarschijnlijk al wel verwachtte binnen de head tags zetten. Net als het stylesheet bestand dat ik net heb gemaakt waarin mijn #menu h2 staat. Die zet ik in de map css en noem ik default.css. Om de structuur simpel te houden heb ik maar een heel simpele CSS structuur verzonnen die ik gebruik in dit voorbeeld.

Onze html file bevat dan het volgende:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="nl">
<head>
<title>Cufon voorbeeld</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/cufon.js" type="text/javascript"></script>
<script src="js/Gotham_Medium_500-Gotham_Medium_italic_500.font.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="menu">
<h2>Testtekstmenu</h2>
</div>
<div id="anderediv">
<h2>Testtekstanderediv</h2>
</div>
</div>
</body>
</html>

Zo, nu willen we het lettertype van #menu h2 aanpassen met cufon. Hiervoor gebruik ik nu even jQuery. Als er niet gebruikt wordt gemaakt van bijvoorbeeld jQuery (Ik ben geen JS expert maar heb me laten vertellen dat het met Mootools ook kan) dan kun je enkel kiezen om bijvoorbeeld de h2's in de pagina kwa lettertype te veranderen of alle links (a). Dat klinkt al wel interessant, maar wanneer je bijvoorbeeld de ene h2 in de Gotham (van het voorbeeld) wilt hebben en de andere h2 gewoon in Arial lijkt het al vast te lopen. Dit is de reden dat ik gebruik maak van jQuery, dan kan ik bijvoorbeeld zeggen #menu h2 moet herschreven worden, dan gaat hij enkel de h2 van menu in Gotham schrijven.

Een stukje herschrijven doe je simpelweg met de volgende code binnen je head tags te zetten:

Code:

Wanneer je meerder dingen wilt herschrijven kun je gewoon een extra Cufon.replace('..'); regel toevoegen.

Ons voorbeeld krijgt dus als resultaat:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="nl">
<head>
<title>Cufon voorbeeld</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/cufon.js" type="text/javascript"></script>
<script src="js/Gotham_Medium_500-Gotham_Medium_italic_500.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('#menu h2');
</script>
</head>
<body>
<div id="container">
<div id="menu">
<h2>Testtekstmenu</h2>
</div>
<div id="anderediv">
<h2>Testtekstanderediv</h2>
</div>
</div>
</body>
</html>

Je zult nu zien dat in de div menu de h2 wordt herschreven en in de div andere div niet.

In IE kun je nog wel eens overbodige witruimtes krijgen, om deze weg te krijgen moet je voor de </body> of wanneer je analytics gebruikt bijvoorbeeld de analytics de volgende code plaatsen:

Code:

Ikzelf plaats dit er gewoon altijd voor de zekerheid bij. In ons voorbeeld wordt dit dan:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="nl">
<head>
<title>Cufon voorbeeld</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/cufon.js" type="text/javascript"></script>
<script src="js/Gotham_Medium_500-Gotham_Medium_italic_500.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('#menu h2');
</script>
</head>
<body>
<div id="container">
<div id="menu">
<h2>Testtekstmenu</h2>
</div>
<div id="anderediv">
<h2>Testtekstanderediv</h2>
</div>
</div>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>

Let op, wanneer je bijvoorbeeld een submit button wilt herschrijven dat gaat hij niet goed pakken. Dit werkte dus ook bij mij niet en ik heb dit even nagevraagd in de Cufon discussiegroep in Google, daar kwamen ze met het volgende antwoord:
Ik gebruikte <input type="submit" value="INLOGGEN" class="submitlogin" />, dit moet dan worden: <button type="submit" class="submitlogin">INLOGGEN</button>. Het kan wel moeilijk zijn om dit in alle browsers goed te laten werken. Toch een klein nadeel tegenover de vele voordelen van Cufon. Maar om Johan Cruijf er even bij te nemen: "Elk voordeel heeft zijn nadeel"

Handige links:

- De cufon generator
- De niet gecomprimeerde versie van het cufon JS bestand
- De website van jQuery
- De vrij actieve google discussiegroep over cufon