Sifa font-size

Sifa font-size inaweka ukubwa wa herufi za maandishi. Thamani ya sifa ni vipimo vyovyote vya ukubwa (kwa kawaida, hii ni px, em au rem) au maneno maalum muhimu (yanatumiwa mara chache sana).

Ki sintaksia

kichaguaji {
	font-size: thamani;
}

Thamani katika mfumo wa maneno muhimu

Thamani	Maelezo
`xx-small`	Ndogo kabisa. Mfano: Lorem ipsum dolor sit amet.
`x-small`	Ndogo sana. Mfano: Lorem ipsum dolor sit amet.
`small`	Ndogo. Mfano: Lorem ipsum dolor sit amet.
`medium`	Wa kati. Mfano: Lorem ipsum dolor sit amet.
`large`	Kubwa. Mfano: Lorem ipsum dolor sit amet.
`x-large`	Kubwa sana. Mfano: Lorem ipsum dolor sit amet.
`xx-large`	Kubwa kabisa. Mfano: Lorem ipsum dolor sit amet.
`larger`	Kubwa kuliko herufi ya mzazi kwa thamani fulani.
`smaller`	Ndogo kuliko herufi ya mzazi kwa thamani fulani.

Thamani chaguomsingi: medium.

Mfano

Wacha tuweke vipimo vya herufi kwa aya kuwa 20px:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-size: 20px;
}

Mfano

Katika mfano huu, ukubwa wa aya umewekwa kuwa 16px, na kwa span ndani yake - 150%. Katika kesi hii, ukubwa wa herufi kwa span utakuwa 150% ya mzazi wake, yaani aya, na ukubwa wake halisi utakuwa 16px * 150% = 24px:

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: 150%;
}

Mfano

Katika mfano huu, ukubwa wa aya umewekwa kuwa 16px, na kwa span ndani yake - larger. Katika kesi hii, ukubwa wa herufi kwa span utakuwa kubwa zaidi kuliko ule wa mzazi wake (aya):

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: larger;
}

Mfano

Tafadhali kumbuka kuwa herufi zilizo na font-family tofauti na font-size sawa kimaonekana huenda zisikuwa za ukubwa mmoja (kwa suluhisho la tatizo hili tazama sifa font-size-adjust).

Katika mfano ufuatao, aya zote mbili zimewekwa font-size ya 16px, lakini font-family tofauti:

<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";
}