Svojstvo font-size
Svojstvo font-size postavlja veličinu
fonta teksta. Vrednost svojstva mogu biti
bilo koje jedinice
za veličine (obično su to px, em
ili rem) ili specijalne ključne reči
(koriste se veoma retko).
Sintaksa
selektor {
font-size: vrednost;
}
Vrednosti u vidu ključnih reči
| Vrednost | Opis |
|---|---|
xx-small |
Najmanji najmanji. Primer: Lorem ipsum dolor sit amet. |
x-small |
Najmanji. Primer: Lorem ipsum dolor sit amet. |
small |
Mali. Primer: Lorem ipsum dolor sit amet. |
medium |
Srednji. Primer: Lorem ipsum dolor sit amet. |
large |
Veliki. Primer: Lorem ipsum dolor sit amet. |
x-large |
Veoma veliki. Primer: Lorem ipsum dolor sit amet. |
xx-large |
Najveći. Primer: Lorem ipsum dolor sit amet. |
larger |
Veće od fonta roditelja za određenu vrednost. |
smaller |
Manje od fonta roditelja za određenu vrednost. |
Podrazumevana vrednost: medium.
Primer
Postavimo paragrafima veličinu fonta na
20px:
<p>
Lorem ipsum dolor sit amet.
</p>
p {
font-size: 20px;
}
:
Primer
U ovom primeru za paragraf je postavljena veličina
na 16px, a za span unutar njega - 150%.
U ovom slučaju veličina fonta za span će biti
150% od svog roditelja,
odnosno paragrafa, i njegova stvarna veličina će biti
:
16px * 150% = 24px
<p>
Lorem <span>ipsum dolor</span> sit amet.
</p>
p {
font-size: 16px;
}
span {
font-size: 150%;
}
:
Primer
U ovom primeru za paragraf je postavljena veličina
na 16px, a za span unutar njega - larger.
U ovom slučaju veličina fonta za span će biti
veća nego kod njegovog roditelja (paragrafa):
<p>
Lorem <span>ipsum dolor</span> sit amet.
</p>
p {
font-size: 16px;
}
span {
font-size: larger;
}
:
Primer
Obratite pažnju na to da fontovi sa različitim
font-family
i istim font-size vizuelno mogu biti
potpuno različite veličine (za rešavanje ovog
problema pogledajte svojstvo font-size-adjust).
U primeru ispod oba paragrafa imaju postavljen font-size
na 16px, ali različite font-family:
<p id="elem1">
Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
Lorem ipsum dolor sit amet.
</p>
#elem1 {
font-size: 16px;
font-family: Arial;
}
#elem2 {
font-size: 16px;
font-family: "Times New Roman";
}
: