Font-size касиети

font-size касиети тексттин шрифт көлөмүн белгилейт. Касиеттин мааниси катары ар кандай өлчөө бирдиктери (адатта, бул px, em же rem) же атайын ачкыч сөздөр (өтө сейрек колдонулат) кызмат кылат.

Синтаксис

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

Ачкыч сөздөр түрүндөгү маанилер

Маани	Сүрөттөмө
`xx-small`	Эң эң кичинекей. Мисал: Lorem ipsum dolor sit amet.
`x-small`	Эң кичинекей. Мисал: Lorem ipsum dolor sit amet.
`small`	Кичинекей. Мисал: Lorem ipsum dolor sit amet.
`medium`	Орточо. Мисал: Lorem ipsum dolor sit amet.
`large`	Чоң. Мисал: Lorem ipsum dolor sit amet.
`x-large`	Өтө чоң. Мисал: Lorem ipsum dolor sit amet.
`xx-large`	Эң чоң. Мисал: Lorem ipsum dolor sit amet.
`larger`	Ата-энесинин шрифтинен белгилүү бир мааниге чоңураак.
`smaller`	Ата-энесинин шрифтинен белгилүү бир мааниге кичирээк.

Демейки маани: medium.

Мисал

Абзацтардын шрифт көлөмүн 20px кылалы:

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

p {
	font-size: 20px;
}

Мисал

Бул мисалда абзац үчүн көлөм 16px, ал эми анын ичиндеги span үчүн - 150% деп белгиленген. Бул учурда span үчүн шрифт көлөмү анын ата-энесинен, башкача айтканда абзацтан 150% болот, жана анын чыныгы көлөмү 16px * 150% = 24px болот:

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

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

Мисал

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

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

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

Мисал

Ар кандай font-family менен бирдей font-size шрифттери визуалдык түрдө бирдей көлөмдө болбошу мүмкүн экенине көңүл буруңуз (бул маселени чечүү үчүн font-size-adjust касиетине караңыз).

Төмөнкү мисалда эки абзацка да font-size 16px деп коюлган, бирок 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";
}