Kako da jednostavno promenite font u CSS-u?

Porodica fontova

Njom se utvrđuje prioritetna lista fontova koje želite da budu korišćeni za određen elemenat na web stranici. Cilj postojanja liste je da, ukoliko prvi font sa spiska nije instaliran na kompjuteru posetioca Vašeg sajta, omogući da naredni font sa liste pokuša  da zameni taj koji nedostaje, a ako ni on ne postoji, na red dolazi sledeći, sve do trenutka kad neki font sa liste ne bude bio uspešno prepoznat.

Postoje dva naziva kojima se kategorišu fontovi: porodice imena i  osnovne porodice.

Osnovne porodice su grupe porodice imena sa utvrđenim karakteristikama. Tri vrste srodne porodice su: serif, sans-serif i monospace. Porodice imena popularno zovemo fontovima.

Primeri za fontove, koji pripadaju osnovnoj porodici serif su: Times New Roman, Garamond, Georgia. Možete primetiti da ova tri fonta imaju zajedničku karakteristiku – imaju osnovu, nešto poput podrške na dnu slova, ili stopice.

Osnovna porodica sans-serif nema tu bazu na svim slovima. Primeri za sans-serif su: Trebuchet, Arial, Verdana. Razlike između ove dve osnovne porodice su očigledne. Jedna ima bazu slova, a druga nema.

Treća osnovna porodica je monospace. Vrlo lako možete uočiti fontove iz ove porodice, oni imaju fiksnu širinu. Ova porodica slova uključuje: Courier, Courier New i Andele Mono.

Kako odabrati font za vebsajt?

Kada stavljate fontove na spisak za Vašu web stranu, najbolje je da na prvo mesto stavite font koji najviše preferirate, a potom da stavite alternativne. Predlažemo da stavite fontove iz iste osnovne porodice, tako da će se font iz iste porodice, npr. sans, pokazati ukoliko ni jedan drugi font sa liste nije dostupan sa korisničkog kompjutera.

Primer liste sa fontovima prema prioritetu:

h1{font-family: arial, verdana, sans-serif; }

U ovom primeru, hederi sa oznakom <h1> će koristiti font Arial. Ukoliko ovaj font nije dostupan, nema ga na korisničkom kompjuteru, upotrebiće se sledeći font sa liste. Ako i sledeći font sa liste “ne radi”, niz se nastavlja sa sledećim fontom, i tako dok neki ne “proradi”. Ako odredite fontove koji su iz iste osnovne porodice, font iz iste iste osnovne porodice će biti prikazan u hederu.

Stil fonta

U ovom delu se definiše određeni font koji ste odabrali da bude u bilo kojem od sledećih stilova: normal, italic ili oblique.

Primer za sintaksu stila fonta: font-style: italic

H2  {
font-family: times, times new roman, serif;
font-style: italic
}

Tip fonta

U ovom delu određujete hoće li slova biti mala ili štampana. Kad izaberete “small caps”, fontovi će biti prikazani u manjoj veličini, ali ne i kao mala slova. Ipak, ako je tip fonta određen kao small caps, ali tip nije dostupan, pretraživač će, umesto njega, automatski pokazati tekst kao velika slova.

H2 {
font-family: verdana, arial, Helvetica, sans-serif;
font-variant: small-caps
}

Debljina slova

U ovom delu utvrđujete težinu ili debljinu, upadljivost  fonta. Font može biti normal, ili bold. Možete da izaberete između brojeva 100 i 900 kako biste kreirali željenu debljinu slova.

p {
font-weight: bold
}

Veličina slova

Ovde birate veličinu fonta. Imate mogućnost da birate imeđu raznih veličina za slova koja će biti prikazana na stranici.

p { font-size: 10px; }
p { font-size: 20pt; }
p { font-size: 1em; }
p { font-size: 200%; }

Četiri jedinice date u primerima imaju jednu ključnu razliku. “px” i “pt” određuju apsolutnu veličinu slova.  “%” i “em” daju mogućnost prilagođavanja veličine fonta prema Vašim željama. Iz kulture prema svima, posebno prema ljudima sa slabim vidom, poput starijih osoba, trebalo bi da napravite svoj web sajt pristupačnim prilagođavajući veličinu slova korišćenjem jedinica “%” i “em”.

Prilagođavanje veličine slova za bilo koju stranicu je moguće za većinu pretraživača. Na primer, u Mozilinom Fajerfoksu (Mozilla Firefox), možete prilagođavati veličinu slova kako bi ona postala, ili veća, ili manja ukoliko odete na opciju “view”. Na Internet Eksploreru (Internet Explorer) možete prilagoditi ako odete na opciju “view” i izaberete neku od opcija: najveće, veće, srednje, manje, najmanje.

Sastavljanje

Pravilo za fontove omogućava da upotrebite više pravila u jednom jedinom pravilu.

p {
font-style: italic ;
font-weight: bold ;
font-size: 30 px ;
font-family: arial, sans serif ;
}

Koristeći pravilo za font, možete jednostavno ugraditi sve u jednom redu.

p {
font: italic bold 30px arial, sans-serif;
}

Ovo pravilo utvrđujete sledećim redosledom: stil fonta, tip fonta, debljina fonta, veličina fonta, porodica fonta.