Lastnost font-size
Lastnost font-size določa velikost
pisave besedila. Vrednost lastnosti so
poljubne enote
za velikosti (običajno so to px, em
ali rem) ali posebne ključne besede
(uporabljajo se zelo redko).
Sintaksa
selektor {
font-size: vrednost;
}
Vrednosti v obliki ključnih besed
| Vrednost | Opis |
|---|---|
xx-small |
Najmanjša možna. Primer: Lorem ipsum dolor sit amet. |
x-small |
Zelo majhna. Primer: Lorem ipsum dolor sit amet. |
small |
Majhna. Primer: Lorem ipsum dolor sit amet. |
medium |
Srednja. Primer: Lorem ipsum dolor sit amet. |
large |
Velika. Primer: Lorem ipsum dolor sit amet. |
x-large |
Zelo velika. Primer: Lorem ipsum dolor sit amet. |
xx-large |
Največja možna. Primer: Lorem ipsum dolor sit amet. |
larger |
Večja od pisave starša za določeno vrednost. |
smaller |
Manjša od pisave starša za določeno vrednost. |
Privzeta vrednost: medium.
Primer
Nastavimo velikost pisave odstavkov na
20px:
<p>
Lorem ipsum dolor sit amet.
</p>
p {
font-size: 20px;
}
:
Primer
V tem primeru je za odstavek nastavljena velikost
16px, za span znotraj njega pa 150%.
V tem primeru bo velikost pisave za span
150% od svojega starša,
to je odstavka, in njegova dejanska velikost bo
:
16px * 150% = 24px
<p>
Lorem <span>ipsum dolor</span> sit amet.
</p>
p {
font-size: 16px;
}
span {
font-size: 150%;
}
:
Primer
V tem primeru je za odstavek nastavljena velikost
16px, za span znotraj njega pa larger.
V tem primeru bo velikost pisave za span
večja kot pri njegovem staršu (odstavku):
<p>
Lorem <span>ipsum dolor</span> sit amet.
</p>
p {
font-size: 16px;
}
span {
font-size: larger;
}
:
Primer
Bodite pozorni na to, da so pisave z različnimi
font-family
in enakim font-size lahko vizualno povsem
drugačne velikosti (za rešitev te
težave glejte lastnost font-size-adjust).
V spodnjem primeru imata oba odstavka nastavljen font-size
na 16px, vendar različni 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";
}
: