Prilikom odabira fonta kojeg ćemo korisiti na web stranici postoji lista standardiziranih i široko rasprostranjenih fontova (eng. web-safe fonts). No sve je više potrebe za korištenjem custom made fontova (eng. non-web-safe fonts) – kada želimo nešto istaknuti (npr. kod logotipa ili naslova). Ukoliko na web stranici definiramo font kojeg korisnik koji pregledava web stranicu nema, preglednik će koristiti što sličniji ili predefinirani font sa liste web-safe fontova koje korisnik posjeduje na računalu (više o tome na http://en.wikipedia.org/wiki/Web_typography ).
U ovome ću tutorijalu u dva dijela opisati dva načina kako u web stranicu ubaciti custom made fontove. Prvi koristi već uhodani i provjereni JavaScript API – Cufon-u, a drugi „relativno novi“ CSS2 standard – @font-face.
Ovaj JavaScript API je veoma jednostavan za korištenje – uploadate svoj customfont font na stranici http://cufon.shoqolate.com/generate/ i dobijete datoteku customfont.js koja predstavlja vaš font. Također skinete cufon-yui.js datoteku (API za korištenje cufona). Na kraju dovoljno je samo u htmlu pozvati naredbu: cufon.replace () .Funkcija replace() kao argument prima neki selektor (tag, .klasa, #id). Prilikom prikazivanja stranice u pregledniku funkcija se izvodi i zamjenjuje font svih elemenata određenih selektorom s custom made fontom koji je definiram u customfont.js datoteci. Tekst se parsira na riječi te se svaka riječ zamjenjuje sa slikom pripadajućeg joj teksta u željenom fontu. Proces zamjene je vidljiv nakratko prilikom osvježavanja stranice budući da izvođenje JScript koda traje određeno (kratko) vrijeme.
U nastavku je dan kod čiji je rezultat prikazan na odlomku odmah ispod. Uključene su skripte cufon-yui.js i Font2_oblique_700.font.js koje mogu biti pohranjene lokalno(na istoj lokaciji gdje je i stranica) ili na udaljenoj lokaciji. Zamjena fonta se poziva naredbom Cufon.replace(‘.cuf’) gdje .cuf predstavlja klasu (selektor) koju smo dodijelili tagu nad kojim želimo provesti zamjenu fonta (u ovom slučaju <p> tag).
Stranice: 1 2