Volite web dizajn?

Zašto ne podijelite svoje znanje s cijelim svijetom? Svatko može pisati za Kroativ i na taj način se promovirati.

Pomoć potrebitima

http://www.hck.hr

Hrvatski Crveni križ

u službi humanosti od 1878.

@font-face ili kako koristiti non-safe fontove na webu

Autor/ica Weberica

Završila fotografiju na ŠPU, a nakon toga grafički i web dizajn. Rođena, živi i radi u epicentru Zagreba. Stalni član Kroativ mreže i autor mnogih korisnih članaka, radi kao stalni suradnik Web Inkubator studija.

Oglas

Svi koji na netu provodimo više od ure vremena dnevno već smo umorni od Verdane, Ariala i Georgie, no dizajneri i developeri se još uvijek rijetko odlučuju korisiti non-safe fontove.  Razloga za to ima više – opća SEO napetost, pomanjkanje vremena , neznanje ili jednostavno lijenost.

Na Kroativu smo već pisali o SIFR-u , flash zamjenskim fontovima no sada u CSS3 postoji još jednostavnija i bolja opcija – @font-face.

Pa kako koristiti @font-face?

Najjednostavnije je koristiti online generator a naći ćemo ga na stranici  http://www.fontsquirrel.com/fontface/generator (slika1)

@font-face generator

označiti ćemo EXPERT a zatim SUBSETTING/ADVANCED SUBSETTING. Otvoriti će nam se dio gdje ćemo označiti LANGUAGE: Croatian i English (ili koji već trebamo-može više njih)

U desnoj koloni ćemo vidjeti popis fontova po grupama gdje moženo pronaći font koji želimo a zatim ga downloadirati  i spremiti u neku mapu na svoj pc. (Važno – font treba biti u posebnoj mapi jer se u generator ne može ubaciti direktno iz c:/windows/font  mape)

Na vrhu ćemo kliknuti na button ADD FONT i sa našeg računala odabrati svoj željeni font.

Na dnu forme označiti ćemo “BULLETPROOF SMILEY

Zatim ćemo na dnu označiti da se slažemo sa uvijetima korištenja i downloadirati generirani file na svoje računalo.

Kada odzipamo preuzete dokumente vidjeti ćemo da smo dobili demo.html, stylesheet.css i naš font u 4 različita formata: .ttf, .eog, .svg i .woff. Sva četiri formata su nam potrebna za razne browsere.  U mapi gdje se nalaze ostali dokumenti naše web stranice otvoriti ćemo posebnu mapu i nazvati je npr. “font”. Unutra ćemo staviti naše fontove i stylesheet.

Zatim ćemo otvoriti  dobiveni .html file i sa njega kopirati ono što nam je potrebno u svoj .html file.  U “head” ćemo kopirati ovaj dio:

<style type=”text/css” media=”screen”>
.Notethis {font-weight: normal; font-style: normal; line-height:normal; font-family: ‘NotethisRegular’, “Times New Roman”, Serif;}
</style>

(“NotethisRegular” je naziv fonta koji sam ja koristila, a “Times New Roman” je font koji sam ja odredila da se prikaže u browserima koji  ne čitaju @font-face – vi ćete tu imati druge fontove)

Zatim ćemo u head ubaciti i poziv za css:

<link rel=”stylesheet” href=”font/stylesheet.css” type=”text/css” charset=”utf-8″>

Zatim ćemo dati klasu onom dijelu teksta ili naslovu koji će koristiti novi font. Npr:

<h1 class=”Notethis”>Naslov</h1>

I naš novi font će ugledati svijetlo dana :)

Naravno, ne treba zaboraviti dvije stvari – mapa sa fontovima imati će oko 160 kb te dodatno opteretiti našu stranicu pa je pametno koristiti samo jedan zamjenski font. Ukoliko želimo dva oblika istog fonta – npr regular i bold tada ćemo morati obje verzije fonta umetnuti u mapu i kodove.

Oni koji žele saznati više detalja mogu posjetiti http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ ili pogledati DEMO na mojoj stranici http://www.weberica.in/

Dobru zabavu :)

Označeno s: , ,
Za ovaj članak možete glasati na CroPortalu i tako pomoći u njegovoj promociji. Ako članak još nije objavljen vi možete biti prvi!
Stavovi i mišljenja izrečena u ovome članku i/ili komentarima odnose se samo na autora/icu članka i/ili komentara, a ne i cijele Kroativ mreže. Zabranjeno je neovlašteno prenošenje članaka u cjelosti bez prethodnog dogovora ili bez istaknutog povratnog linka na www.kroativ.net stranicu te imena autora.
Oglas

5 komentara

Trackbacks & Pingbacks

Ostavite komentar

Autori s više od 10 komentara nemaju tag nofollow na svojim linkovima! Zabranjeno je vrijeđanje, omalovažavanje ili na bilo koji drugi način ometanje normalnog toka komentara. Također je zabranjeno oglašavanje u komentarima i sve druge vrste spam-a.

(*) polja su obavezna

XHTML: Možete koristiti: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">