Font-size хусусияти

font-size хусусияти матн шрифтининг ўлчамини белгилайди. Хусусият қиймати сифатида ҳар қандай ўлчов бирликлари (оддата, бу px, em ёки rem) ёки махсус калит сўзлар (жуда кам ишлатилади) хизмат қилади.

Синтаксис

cssселектор {
  font-size: қиймат;
}

Калит сўзлар кўринишидаги қийматлар

Стандарт қиймат: medium.

Мисол

Абзацлар учун шрифт ўлчамини 20px қиламиз:

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

cssp {
  font-size: 20px;
}

Результат:

Мисол

Бу мисолда абзац учун ўлчам 16px, унинг ичидаги span учун эса 150% белгиланган. Бунда span учун шрифт ўлчами унинг ота-онасидан, яъни абзацдан 150% бўлиб, унинг ҳақиқий ўлчами 16px * 150% = 24px бўлади:

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

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

Результат:

Мисол

Бу мисолда абзац учун ўлчам 16px, унинг ичидаги span учун эса larger белгиланган. Бунда span учун шрифт ўлчами унинг ота-онаси (абзац)дан катта бўлади:

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

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

Результат:

Мисол

Диққат қилинг, турли font-family ва бир хил font-size га эга бўлган шрифтлар визуал жиҳатдан умуман бир хил ўлчамда бўлмаслиги мумкин (бу муаммони ҳал этиш учун font-size-adjust хусусиятига қаранг).

Қуйидаги мисолда ҳар икки абзац учун font-size 16px қилиб белгиланган, лекин font-family турлича:

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

Результат: