vbali blogja

Minden webes fejlesztő és dizájner számára ismert a probléma az egyedi betűtípusokkal történő megjelenítéssel kapcsolatban. Létezik pár web-safe font amely jó eséllyel megtalálható minden számítógépen, a fejlesztőnek illik ezeket használnia. Ha valami miatt mégis ragaszkodni kell az egyedi fonthoz – például a dizájn megköveteli, hogy egy adott, nem web-safe betűvel jelenjen meg egy szövegrész az oldalon – akkor általában az érintett szövegrész képként szokás előállítani. Ennek megvannak a maga előnyei és a maga hátrányai egyaránt. A legnagyobb hátrány, hogy ez a módszer csak statikus szöveg megjelenítésére alkalmas, ha bármit módosítani kell rajta akkor az érintett részt újra el kell készíteni, ki kell exportálni és beágyazni az oldalba. Ha ez a módosítás méretváltozással is jár akkor pedig további finomhangolásra lesz szükség.

Az ilyen esetekben lehet nagy segítség a Cufon nevű megoldás, ami javascript segítségével real-time az oldal betöltésekkor rendereli le az adott szövegből a képet, amit be is ágyaz a megfelelő helyre. A beágyazás során az eredeti szöveget is beépíti az oldal forrásába így például a keresőrobotoknak sem jelent problémát az oldal indexelése. Pofon egyszerű a használata, mindössze le kell generálni a szükséges fontokat a Cufon Generátor segítségével, majd a következő kódrészletet kell a header-be építeni:

<script type="text/javascript" src="cufon.js"></script>
<script type="text/javascript" src="CufonGeneratorralKeszultFont.font.js"></script>
<script type="text/javascript">
    Cufon.replace('h1');
</script>

Majd a következő kódot kell lefuttatni valahol az oldal forrásán belül, az érintett szövegrészek után:

<script type="text/javascript">
    Cufon.now();
</script>

További stílusbeli beállítások elvégzésére is van lehetőség, ezekről a Cufon Wikiben lehet olvasni.

Persze nem mindig ideális ez a megoldás, ha a kliens böngésző nem támogatja a javascriptet akkor a szöveg értelemszerűen az eredeti formájában – renderelés nélkül – jelenik meg az oldalon.

Címkék: cufon, font, javascript