Kako staviti bilo koji font na sajt poštivajući standarde?

Pa zapravo relativno jednostavno, sa naglaskom na relativno, da bi ovo postigli trebalo bi vam neko osnovno znanje iz CSS-a, HTML-a i vrlo malo Flasha. Pogledajte recimo ovaj primjer: MicroGrammaBoldExt Primjetite kako izgleda ovaj font, probajte ga obilježiti, znači ponaša se kao običan tekst, ako pogledate source stranice vidjet ćete da to zapravo u kodu i jesu slova, znači nije nikakva izgenerirana slika nego baš tekst.

Pokušat ću na primjeru ovih slova objasniti kako to radi i kako na svom sajtu možete napraviti slično. Microsoft je prije nekoliko godina čak i uveo ovakav sličan sustav, koji je radio tako da embeda fontove u web stranicu. Naravo, guess what, radi samo sa Internet Explorerom, što naravno svakom savjesnom dizajneru baš i neće odgovarati. Ali dobra vjest je da postoji alternativa a ime joj je sIFR. Da bi mogli odraditi ovaj tutorial trebat će vam najnovija verzija sIFRa. Kada skinete .zip datoteku raspakirajte je i u njoj ćete naći uputstva za korištenje na engleskom, ja sam se s tim zezao nekih 2 sata dok mi nije proradilo, pa ću ovdje objasniti kako napraviti da radi. Autor ovog programčića je Mike Davidson, pa svakako posjetite njegove stranice za više podataka. A mi krećemo na tutorial.

Korak 1. Dizajnirajte svoju stranicu, kako god hoćete da izgleda, znači napravite sve što bi napravili da ne želite koristiti nikakve fancy fontove, riješite sav CSS i HTML, ovo morate napraviti da bi korisnici koji nemaju uključenu JAVU ili nemaju instaliran Flash mogli ispravno gledati vašu stranicu.

Korak 2. Odpakirajte sIFR2.0.2.zip

Korak 3. Napravite neku novu mapu (nazvat ćemo ju priprema) i u nju kopirajte sljedeće datoteke: customize_me.as, dont_customize_me.as i sifr.fla.

Korak 4. Sada otvorite Flash i učitajte datoteku sifr.fla iz mape priprema.

Korak 5. Kliknite na sredinu scene, na nevidljivi textbox. Sada u prozoru properties promjenite font textboxa, to će biti font koji želite koristiti, ako koristite TrueType fontove možete staviti i da font bude bold ili italic.

Korak 6. Kliknite na File > Export > Export movie… i snimite ga kao imefonta.swf (moj se zove micrograma.swf).

Korak 7. Sada kopirajte sljedeće datoteke na vaš server ili u lokalnu mapu u kojoj vam se nalazi sajt: sifr.js i imefonta.swf. Znači ne trebate ni jednu drugu datoteku kopirati, čak ni one koje vam se nalaze u mapi priprema osim naravno imefonta.swf ako ste snimili tu datoteku tamo.

Korak 8. Da bi vam skripta ispravno radila morate na svakoj stranici na kojoj želite prijavljivati ove fontove imati poziv na sifr.js skriptu.To ćete postići najlakše da između head tagova postavite sljedeći kod:

(da,da ovaj gornji kod ne možete kopirati, zato što mi iz nekog razloga WordPress stalno ispravlja ovaj kod u nešto drugo i totalno sam puko od toga, pa eto, nadam se da ću imati više sreće sa ostalim code snippetima.)

Korak 9. Sada si ovaj dio koda stavite na dno svake stranice na kojoj želite da vam se pojavljuju željeni fontovi:

Ok, ovaj dio koda bi mogli malo izmjenjat da više paše vašoj primjeni, objasnit ću neke od osnovnih atributa, ostatak možete pronaći u dokumentaciji od sIFRa.

sSelector: ovdje upisujete koje CSS selektore želite koristiti za prikaz svojih fontova, npr. ako vam se svaki naslov članka nalazi između h2 taga i vi želite promjeniti da svi naslovi koriste ovakve fontove onda ćete u sSelector upisati h2. Ja sam u primjer upisao .proba_slova, što znači da će se fontovi primjeniti na svaki tag koji koristi .proba_slova klasu.

sFlashSrc: ovdje upisujete ime .swf datoteke koju ste ste izgenerirali u koracima 5 i 6. U mom slučaju to je micrograma.swf.

sColor: tu upišite boju koju želite koristiti za slova u hexadecimalnom obliku.

sLinkColor: boja linka u hexadecimalnom obliku, naravno ako će vam tekst biti nekakav link.

sBgColor: boja pozadine slova u hexadecimalnom obliku, ako ne želite koristiti pozadinu, jednostavno obrišite taj atribut.

sHoverColor: boja koja će se pojaviti ako pređete preko slova i ako su vam slova link, naravno u hexadecimalnom obliku.

nPaddingTop/nPaddingBottom: pošto sIRF prikazuje slova u blokovima, sa ovim atributima određujete padding gore i dole.

sFlashVars: ovdje određujete dali će tekst biti centriran u bloku, dali će bit lijevo ili desno poravnat.

Za daljnje upute svakako pročitajte dokumentaciju koja dolazi u .zip datoteku koju ste skinuli. Sa ovim gore navedenim opcijama ćete se svakako morati igrati malo, da bi uskladili ova svojstva i CSS svojstva.

Korak 10. Sada ubacite ovaj dio koda u vaš CSS dokument koji vam određuje osnovni izgled stranice:

.sIFR-hasFlash služi da bi u CSS-u mogli definirati stil vaših slova i onda ga kasnije fino ugodit sa kodom koji ste stavili u HTML datoteku. Ja sam ovdje definirao .proba_slova kalsu. Ovdje naravno ide selektor koji ste definirali u HTML datoteci.Moram napomenuti da bez problema možete koristiti više CSS selektora i više različitih fontova, naravno za svaki bi trebali izgenerirati posebnu .swf datoteku. A ako želite koristiti isti font za više tagova jednostavno stavite npr. sSelector:”h1,h2,p” i to znači da će se font primjenjivati na h1, h2 i p tagove.

I evo kako na kraju ovaj moj primjer izgleda, u ovaj post sam dodao sljedeći kod:

i dobio ovo:

Ovo je prikaz fonta MicroGrammaBoldExt

Gornja slova ćete vidjeti ispravno jedino ako imate instaliran Flash Player i Javu. Genijalna stvar kod sIFRA je ta što ako korisnik nema Javu i Flash instalirane onda se prikazuje tekst kako samo ga odredili u CSS datoteci. Zato je bitno prvo stranice napraviti onako kako želimo da izgleda bez uporabe posebnih fontova.

I to je to, i ne mogu ovo dovljno naglasit, SVAKAKO PROČITAJTE ORGINALNU DOKUMENTACIJU!!

Imao sam poprilično problema sa code snippetom, ovi gornji kodovi su samo privremeno postavljeni, ako ih budete kopirali svakako obrišite brojeve linija. Pitanja možete postavljati u komentarima, pokušat ću na sve odgovoriti, ako budu vrijedni odgovaranja :). Znate na šta mislim.

Ovaj unos je postavljen 19.06.2007 u 10:16 i pohranjen je pod Flash, Tutoriali. Možete pratiti odgovore kroz RSS 2.0 feed. Možete preskočiti do kraja stranice i ostaviti komentar. Pinganje trenutno nije dozvoljeno.