Hogyan használj bármilyen betűtípust a weben? (Cufón)

Sokan még mindig nem tudnak elszakadni a hagyományos Serif, Sans-serif megoldásoktól pedig épp itt az ideje.Ha régebben webdesignerként olyan weboldalt terveztünk amiben a címek nem “web-safe” betűtípust tartalmaztak, a sitebuilderek hajlamosak voltak visszaküldeni a grafikát morgolódva, hogy milyen (finoman fogalmazva) tájékozatlanok vagyunk :).

Meg kell őket értenünk hiszen “<img />” tag-ek közé tenni egy képet ami szöveget tartalmaz -és esetleg fontos információt hordozhat- nem éppen keresőbarát de még az oldal letöltését is lassítja ha gondatlanul tömörítettük. Erre a CSS már ad megoldást, hiszen a szöveg mögé betesszük annak kép változatát, majd az eredeti szöveget elcsúsztatjuk. Tökéletes megoldás, de. Mi van akkor ha egy olyan template rendszerhez készítünk sablont mint például a wordpress? Bizony itt a cikk írója fogja megadni a címeket, amit nehezen tudna képpel lecserélni…

Így néz ki a gyakorlatban:

Az ékezetes betűk..

Először is keressünk egy olyan betűtípust ami üzleti jelleggel felhasználható (Commercial),valamint közép európai kódolást használ. Nem lesz könnyű dolgunk, főleg ha ingyen szeretnénk ezekhez hozzájutni. Persze nem írnék a dologról cikket ha nem adnék tippet hol keresd őket ;)

1. 1. Látogasd meg a myfonts.com -ot.
2. 2. Regisztrálj majd jelentkezz be.
3. 3. Kattints a “Find Fonts”-ra majd a lenyíló menüben a “Search”-re.
4. 4. Az “any field” lenyíló listában válasszuk ki a “Price”-t majd a jobb oldalán lévő listában az “is”-t. Ezután a hosszú keresőmezőjébe írjuk be, hogy 0 (nulla).
5. 5. A form jobb oldalán lévő plussz gombbal adjunk hozzá egy új mezőt.
6. 6. Itt állítsuk a lenyíló listát “language support”-ra, majd a tőle jobbra lévőt hagyjuk “include”-on. Ettől még egyel jobbra szintén egy listát látsz amibe belekattintva válaszd ki a “Central/Eastern Europe”-ot.
7. 7. Kattintsunk a kék “refresh results” gombra:

Oké, a “Sample text” beviteli mezőbe írjuk be azt a szöveget ami megjelenjen a demó képeken. Ha valamelyik betűtípus elnyerte a tetszésünket, kattintsunk a képére.

Betűtípusok letöltése:

1. Kattintsunk a Buying choices-ra:

2. Itt nézzük meg melyik változatok kerülnek 0$-b:

3. A 0$-ba kerülő betűtípustípusnak Commercial licensz-el kell rendelkeznie, csak így használhatod azt fel üzleti célokra (fontos!).

4. Ha minden ok, kattintsunk az “Add to cart” gombra, majd a felugró ablakban a “Continue to my cart”-ra, vagy ha tovább szeretnénk böngészni akkor a “Return to browsing”-ra (a kiválasztott elem a kosárban marad):

5. Itt láthatjuk az összeválogatott betűtípusokat, valamint a végösszeget. Ha mindent jól csináltunk és nem adtunk a kosarunkhoz véletlenül egy fizetős “font”-ot akkor ennek 0$-t kell mutatnia.

6. Nyomjuk meg a “proceed to checkout” gombot:

7. Egy utolsó, megerősítő oldal fogad minket. Itt kattintsunk a “place my order” gomb-ra:

8. A következő oldalon letölthetjük a kiválasztott betűtípusokat egyesével illetve az “Option#2:Advenced”-re kattintva ,becsomagolja és egy “.rar”-ban már tölthetjük is az összeválogatott ékezetes betűinket.

Oké a nehezén már túl vagyunk (vicces de tényleg ez a legpepecselősebb). Most már csak le kéne cserélnünk az interneten használt betűtípusokat a miénkre, ugyan mi az nekünk… :)

Cufón letöltése

A Cufón javascript könyvtárat fogjuk használni feladatunk elvégzésére. Egyrészt ezt a legegyszerűbb bekonfigurálni, másrészt véleményem szerint ez terheli legkevésbé a kiszolgálót.

1. Keressük fel a http://cufon.shoqolate.com/generate/ -ot.
2. Töltsük le az összezsugorított Cufón-t (DOWNLOAD gombra jobb klikk -> mentés másként).
3. Az előbb letöltött betűtípusok közül töltsünk fel egyet a “Regular typeface”-hez:

4. Ezt a lehetőséget pipáljuk ki: “The EULAs of these fonts allow Web Embedding (without Adobe flash)”:

5. Adjuk meg milyen karaktereket konvertáljunk át: Uppercase, Lowercase, Numerals, Punctation.

6. Valamint az “.. and also these single characters” beviteli mezőbe írjuk be a magyar különlegességeket: öüóőúéáűíÖÜÓŐÚÉÁŰÍ.

7. Fogadjuk el a szabályzatot.

8. Letöltés…

Cufón élesítése

Már tényleg nincs sok hátra :) Most végre lecseréljük azokat a ronda Arial és Times betűtípusokat valami nagyon tutira!

1. Hozzunk létre egy könyvtárat benne egy HTML dokumentummal és egy “javascript” könyvtárral. Természetesen ennek bármi lehet a neve, erre csak linkelésnél kell majd figyelni.

2. Az előbb letöltött 2 javascript file-t másoljuk a “javascript” könyvtárba.

3. Nyissuk meg a HTML dokumentumunkat majd hozzuk létre az alap xhtml csontvázat.

4. A “<head></head>” tag közé illesszük be ezeket a sorokat amivel belinkeljük a Cufón javascript könyvtárakat:

1
2

	<script type=”text/javascript” src=”javascript/cufon-yui.js”></script>
	<script type=”text/javascript” src=”javascript/Museo_Slab_500_400.font.js”></script>

Ezzel hozzácsatoltuk a html dokumentumunkhoz a külső javascript könyvtárakat.

5. A “</body>” zárótag elé illesszük be ezt a kódot:

1
2
3

	<script type="text/javascript">
		Cufon.replace('h2');
	</script>

Így kéne kinéznie:

Természetesen nem csak a “h2″ -re alkalmazhatjuk a technikát. Bármilyen tag-nél használhatod de mint említettem, ne vidd túlzásba mert nagyobb szövegmennyiségnél lassulást okoz!

A fájlok amikkel dolgoztam (xhtml, Cufón):

Letöltés: xhtml-cufon.zip

Kellemes Sitebuild-et :)
Kamasz Attila