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

csskichaguaji {
  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:

html<p>
  Lorem ipsum dolor sit amet.
</p>
cssp {
  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:

html<p>
  Lorem <span>ipsum dolor</span> sit amet.
</p>
cssp {
  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):

html<p>
  Lorem <span>ipsum dolor</span> sit amet.
</p>
cssp {
  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:

html<p id="elem1">
  Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
  Lorem ipsum dolor sit amet.
</p>
css#elem1 {
  font-size: 16px;
  font-family: Arial;
}
#elem2 {
  font-size: 16px;
  font-family: "Times New Roman";
}

Результат: