CSS - Font


Stilizovanje fontova pomoću CSS-a

Odabir pravog fonta i stila vrlo je važan za čitljivost teksta na stranici. CSS pruža nekoliko svojstava za oblikovanje fonta teksta, uključujući promjenu lica, kontrolu njihove veličine i podebljanja, upravljanje varijantom itd. Svojstva fonta su: font-family, font-style, font-weight, font-size, i font-variant. Hajde da detaljnije pogledamo o svakom od ovih svojstava fonta.



Font Family (Porodica fontova)

Svojstvo font-family koristi se za određivanje fonta koji će se koristiti za prikazivanje teksta. Ovo svojstvo može da sadrži nekoliko naziva fontova odvojenih zarezima kao rezervni font, tako da ako prvi font nije dostupan u korisničkom sisitemu, pretraživač pokušava koristiti drugi, i tako dalje. Zbog toga navedite prvo željeni font, a zatim sve fontove koji bi mogli prvo ispuniti ako nije dostupan. Završili biste popis generičkom familijom fontova koja je —serif, sans-serif, monospace, cursive i fantasy. Tipična deklaracija porodice fontova može izgledati ovako:

body {
    font-family: Arial, Helvetica, sans-serif;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje font-family u CSS-u</title>
<style>
    body {
        font-family: Arial, Helvetica, sans-serif;
    }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim učiti CSS3 uz IT TUTORIJALE.</p>
</body>
</html>

Najčešće porodice fontova korištene u web dizajnu su serif i sans-serif, jer su pogodnije za čitanje. Dok se za prikaz koda najčešće koriste mononaslovni fonti, jer u ovom slovu svako slovo zauzima isti prostor koji izgleda kao pisani tekst. Kursna slova (cursive) izgledaju poput kurzivnog pisanja ili rukopisa. Font fantazije (fantasy) predstavlja umjetnički font, ali se ne koristi široko zbog slabe dostupnosti u operativnim sistemima.



Razlika između Serif i Sans-serif fontova

Serifski fontovi imaju malu liniju ili hod na krajnjim dijelovima znakova, dok su sans-serif fontovi ravniji i nemaju ove male poteze. Pogledajte sljedeću ilustraciju.





Stil fonta

Svojstvo stila fonta koristi se za postavljanje stila lica fonta za tekstualni sadržaj elementa. Stil fonta može biti uobičajen kurzivan ili ukošen. Zadana vrijednost je normalna. Pogledajmo sljedeći primjer da bismo shvatili kako to u suštini funkcioniše:

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavjanje svojstva font-style u CSS</title>
<style>
    p.normal {
        font-style: normal;
    }
    p.italic {
        font-style: italic;
    }
    p.oblique {
        font-style: oblique;
    }
</style>
</head>
<body>
    <p class="normal">IT TUTORIJALI.</p>
    <p class="italic">Ovo je paragraf kurzivnog stila fonta.</p>
    <p class="oblique">Ovo je paragraf s kosim stilom fonta.</p>
</body>
</html>


Veličina slova

Svojstvo font-size koristi se za postavljanje veličine fonta za tekstualni sadržaj elementa. Postoji nekoliko načina određivanja vrijednosti veličine fonta, npr. s ključnim riječima, postotkom, pikselima, em-sima itd.



Podešavanje veličine fonta s pikselima

Postavljanje veličine fonta u vrijednostima piksela (npr. 14px, 16px itd.) je dobar izbor kada vam je potrebna tačnost piksela. Pixel je apsolutna mjerna jedinica koja određuje fiksnu dužinu. Pogledajmo sljedeći primjer da bismo shvatili kako to u suštini funkcioniše:

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Definisanje vličine fonta korištenjem pikela</title>
<style>  
    h1 {
        font-size: 24px;
    }
    p {
        font-size: 14px;
    }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim da učim CSS3 uz IT TUTORIJALE.</p>
</body>
</html>                            

Definisanje veličine fonta u pikselima ne smatra se vrlo dostupnim jer korisnik ne može promijeniti veličinu fonta iz postavki pretraživača. Na primjer, korisnici s ograničenim ili slabim vidom možda žele postaviti veličinu fonta puno veću od veličine koju navedete vi. Zbog toga biste trebali izbjegavati korištenje vrijednosti piksela i umjesto toga želite koristiti vrijednosti koje su u odnosu na zadane veličine korisnika ako želite stvoriti inkluzivni dizajn.



Postavljanje veličine fonta pomoću EM

Em jedinica odnosi se na veličinu fonta nadređenog elementa. Kod određivanja svojstva veličine fonta, 1em je jednaka veličini fonta koja se odnosi na nadređeni element. Dakle, ako na element tijela postavite veličinu fonta od 20px, tada je 1em = 20px, a 2em = 40px. Međutim, ako nigdje na stranici niste postavili veličinu fonta, onda je to zadaća pretraživača, koja je obično 16px. Dakle, prema zadanom 1em = 16px, a 2em = 32px. Pogledajmo sljedeći primjer da bismo shvatili kako to u suštini funkcioniše:

h1 {
    font-size: 2em;    /* 32px/16px=2em */
}
p {
    font-size: 0.875em;    /* 14px/16px=0.875em */
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Utvrđivanje veličine slova pomoću EM</title>
<style>  
    h1 {
        font-size: 2em;    /* 32px/16px=2em */
    }
    p {
        font-size: 0.875em;    /* 14px/16px=0.875em */
    }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim da učim <span>CSS3</span> uz IT TUTORIJALE.</p>
</body>
</html>                            


Korištenje kombinacije postotka i EM-a

Kao što ste primijetili u gornjem primjeru, izračunavanje em vrijednosti ne izgleda jednostavno. Da bi se ovo pojednostavilo, popularna tehnika je postavljanje veličine fonta za element tijela na 62,5% (što je 62,5% zadanih 16px), što iznosi 10px, ili 0,625em. Sada možete postaviti veličinu fonta za bilo koje elemente pomoću em jedinica, s lako upamćenom konverzijom, dijeljenjem px vrijednosti s 10. Na ovaj način 10px = 1em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em, i tako dalje. Pogledajmo sljedeći primjer:

body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4em;    /* 1.4em = 14px */
}
p span {
    font-size: 2em;    /* 2em = 28px */
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Utvrđivanje veličine slova pomoću piksela i EM</title>
<style>  
    body {
        font-size: 62.5%;    /* font-size 1em = 10px */
    }
    p {
        font-size: 1.4em;    /* 1.4em = 14px */
    }
    p span {
        font-size: 2em;    /* 2em = 28px */
    }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volimda učim <span>CSS3 </span> uz IT TUTORIJALE.</p>
</body>
</html>                            


Podešavanje veličine fonta pomoću Root EM

Da bi stvar bila još jednostavnija, CSS3 je uveo rem jedinicu (skraćeno za "root em") koja je uvijek relativna u odnosu na veličinu slova korijenskog elementa (html), bez obzira na to gdje se element nalazi u dokumentu (za razliku od em koji je u odnosu na veličinu fonta nadređenog elementa). To znači da je 1rem ekvivalentan veličini fonta html elementa, koji je u većini pretraživača 16px. Pogledajmo primjer da bismo razumijemo kako to zapravo djeluje:

html {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4rem;    /* 1.4rem = 14px */
}
p span {
    font-size: 2rem;    /* 2rem = 20px (not 28px) */
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Definisanje veličine slova pomoću REM-a</title>
<style>  
    html {
        font-size: 62.5%;    /* font-size 1em = 10px */
    }
    body {
        font-size: 1.6rem;    /* 1.6rem = 16px */
    }
    p {
        font-size: 1.4rem;    /* 1.4rem = 14px */
    }
    p span {
        font-size: 2rem;    /* 2rem = 20px (not 28px) */
    }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim učiti <span>CSS3</span> uz IT TUTORIJALE.</p>
</body>
</html>                            


Postavljanje veličine fonta sa ključnim riječima

CSS nudi nekoliko ključnih reči pomoću kojih možete odrediti veličinu fonta. Apsolutna veličina fonta može se odrediti pomoću jedne od sljedećih ključnih riječi: xx-small, x-small, small, medium, large, x-large, xx-large. Dok se relativna veličina fonta može odrediti pomoću ključnih riječi: smaller ili larger. Isprobajmo sljedeći primjer i vidimo kako to funkcioniše:

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Definisanje veličine slova pomoću ključnih riječi</title>
<style>  
    body {
        font-size: large;
    }
    h1 {
        font-size: larger;
    }
    p {
        font-size: smaller;
    }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim da učim CSS3 uz IT TUTORIJALE.</p>
</body>
</html>                            


Podešavanje veličine fonta pomoću jedinica za prikaz

Veličine fonta mogu se odrediti pomoću prtraživačevih jedinica kao što su vw ili vh. Jedinice prikaza odnose se na postotak dimenzija prikaza pretraživača, gdje je 1vw = 1% širine prozora, a 1vh = 1% visine prikaza. Dakle, ako je ekran širok 1600px, 1vw je 16px. Isprobajte sljedeći primjer tako da promijenite veličinu prozora pretraživača i pogledajte kako to funkcioniše:

body {
    font-size: 1vw;
}
h1 {
    font-size: 3vw;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Definisanje veličine fonta pomoću jedinica za prikaz</title>
<style>  
    body {
        font-size: 1vw;
    }
    h1 {
        font-size: 3vw;
    }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim učiti CSS3 uz IT TUTORIJALE.</p>
</body>
</html>                            

Međutim, postoji problem sa jedinicama prikaza. Na malim ekranima fontovi postaju toliko mali da ih je teško čitati. Da biste to spriječili možete koristiti CSS calc() funkciju, poput ove:

html { 
    font-size: calc(1em + 1vw); 
}
h1 {
    font-size: 3rem;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rješavanje problema s veličinom fonta s jedinicama prikaza</title>
<style>  
    html {
        font-size: calc(1em + 1vw);
    }
    h1 {
        font-size: 3rem;
    }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim učiti CSS3 uz IT TUTORIJALE.</p>
</body>
</html>                            

U ovom primjeru, čak i ako širina prikaza postaje 0, veličina fonta bila bi najmanje 1em ili 16px.



Veličina fonta

Svojstvo fonta određuje veličinu ili debljinu fonta. Ovo svojstvo može uzeti jednu od sljedećih vrijednosti: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 i inherit.

  • Brojčane vrijednosti 100-900 određuju debljinu fonta, gdje svaki broj predstavlja debljinu veću od prethodnika. 400 je isto što i normal, a 700 je bold.
  • Vrijednosti bolder i lighter u odnosu su na naslijeđenu debljinu fonta, dok su ostale vrijednosti, poput normal i bold, apsolutne težine fonta.

Pogledajmo sljedeći primjer kako bi ste shvatili kako ovo funkcioniše:

p {
    font-weight: bold;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje font-weight u CSS</title>
<style>
    p {
        font-weight: bold;
    }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim učiti CSS3 uz IT TUTORIJALE.</p>
</body>
</html>


Varijanta fonta

Svojstvo font-variant omogućava prikaz teksta u posebnoj varijanti malih slova. Mala i velika slova malo se razlikuju od uobičajenih velikih slova, u kojima se mala slova pojavljuju kao manje verzije odgovarajućih velikih slova. Isprobajte sljedeći primjer da biste shvatili kako ta svojstva zapravo djeluje:

p {
    font-variant: small-caps;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje font-variant u CSS</title>
<style>
    p {
        font-variant: small-caps;
    }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim da učim CSS3 uz IT TUTORIJALE.</p>
</body>
</html>

Vrijednost normal uklanja male kapke iz teksta koji su na taj način već oblikovani.