CSS atributi fonta
Najosnovniji (i najlakši za učenje) su atributi koji određuju izgled slova.
| font-family | Izbor fonta za ispis teksta |
| font-size | Veličina slova. |
| font-weight | Podebljan (masni) ispis. |
| font-style | Kurzivan (zakošen) ispis. |
| font-variant | Običan ili small caps ispis. |
| font-stretch | Rastezanje (ili sabijanje) slova po horizontali. |
| line-height | Visina linije teksta. |
| font | Kompleksan atribut za podešavanje više osobina fonta istovremeno. |
font-family
Ovaj atribut određuje font (izgled slova) kojim se ispisuje tekst. Moguće je navesti bilo koji font koji postoji na računaru korisnika, a unapred definisane vrednosti su:
- serif - font sa postoljima (na Windows računarima, podrazumevani je Times New Roman)
- sans-serif - slova bez postolja (na Windows računarima podrazumeva se Arial)
- monospace - slova fiksne širine (na Windows-u je to Courier New)
- fantasy - dekorativni font, ako postoji
- cursive - kurzivni font, ako postoji
Kao vrednost se može navesti i lista fontova, pri čemu se oni odvajaju zarezom. Web browser prvo pokušava da prikaže prvi, pa ako taj ne postoji na računaru prelazi na sledeći itd.
font-family: sans-serif;
font-family: "Courier New";
font-family: "Calibri", "Times New Roman", serif;
font-size
Ovaj atribut određuje veličinu slova. Veličina može biti zadata kao metrika ili procentualna vrednost.
- metrika - veličina fonta
- procenat -
font-size: 12pt;
font-size: 50%;
font-weight
Ovaj atribut određuje debljinu slova kojim se ispisuje tekst. Najčešće se koristi za postizanje efekta masnog (bold) teksta.
Unapred definisane vrednosti su:
- normal - obična slova
- bold - podebljana slova
- bolder - jače podebljana slova, ukoliko je moguće
- lighter - slova koja su tanja od normalnih, ako je moguće
- 100 - najtanja moguća slova
- 200 - malo deblja slova
- ...
- 900 - najdeblja moguća slova
Ovi brojevi koji se mogu zadati kao vrednosti nisu zaista metrike, već unapred definisane "reči", isto kao i "bold", "normal" i sl. Uz njih se ne navodi nikakava merna jedinica.
font-weight: bold;
font-weight: 800;
font-style
Ovaj atribut određuje da li su slova kurzivna (italic). Unapred definisane vrednosti su:
- normal - obična slova
- italic - kurzivna slova
- oblique - takođe kurzivna slova, s tim što mogu postojati razlike ako je ovakav stil ispisa definisan u samom fontu
font-style: italic;
font-variant
Ovaj atribut određuje da li su slova ispisana kao small caps (mala slova se ispisuju kao velika ali smanjenim fontom). Unapred definisane vrednosti su:
- normal - obična slova
- small-caps - izmenjena slova
font-variant: small-caps;
font-stretch
Ovim atributom se definiše rastezanje teksta. Moguće vrednosti su:
- normal - default vrednost, slova nisu ni rastegnuta, ni skupljena
- semi-condensed, condensed, extra-condensed, ultra-condensed - različiti nivoi "sabijanja" teksta
- semi-expanded, expanded, extra-expanded, ultra-expanded - različiti nivoi "rastezanja" teksta
font-stretch: expanded;
line-height
Ovaj atribut označava visinu linije teksta. Obično se zadaje kao dekadna vrednost bez jedinice mere.
- normal - automatska visina linije, zavisi od web čitača, fonta i veličine slova
- dekadna vrednost - običan broj, bez jedinice mere. Takav broj označava množilac, kolika je visina linije u odnosu na trenutnu veličinu fonta. Ovo je preferirani način da se zada visina linije.
- metrika - broj sa jedinicom mere, označava tačnu visinu linije
line-height: 1.5;
line-height: 18pt;
line-height: normal;
font
Atribut font predstavlja prečicu kojom se istovremeno definiše više podešavanja za font. Redosled zadatih vrednosti jeste bitan.
- Ukoliko se zadaju, na početku su vrednosti za font-style, font-variant i font-weight.
- Posle njih zadaju se font-size i line-height, s tim što se ispred line-height navodi kosa crta - "/".
- Konačno, vrednost za font-family je uvek obavezna i zadaje se na kraju.
font: italic small-caps bold 12pt /1.5 sans-serif;
font: bold 1.2em monospace;
Primer
Ovde vidimo dva načina na koje možemo zadati praktično iste parametre. U prvom stilu vrednosti su zadate pomoću pojedinačnih atributa, dok su u drugom te iste vrednosti zadate pomoću kompleksnog atributa font.
.s1 {
font-family: "Times New Roman",serif;
font-size: 12pt;
font-weight: bold;
line-height: 1.5;
}
.s2 {
font: bold 12pt /1.5 "Times New Roman",serif;
}
Pogledajte primer svega o čemu smo ovde pisali...