Xüsusiyyət font-size

Xüsusiyyət font-size mətnin şrift ölçüsünü təyin edir. Xüsusiyyətin dəyəri kimi istənilən ölçü vahidləri (adətən, px, em ya rem) və ya xüsusi açar sözlər (çox nadir hallarda istifadə olunur) xidmət edir.

Sintaksis

selektor {
	font-size: qiymet;
}

Açar sözlər şəklində dəyərlər

Dəyər	Təsvir
`xx-small`	Ən ən kiçik. Nümunə: Lorem ipsum dolor sit amet.
`x-small`	Ən kiçik. Nümunə: Lorem ipsum dolor sit amet.
`small`	Kiçik. Nümunə: Lorem ipsum dolor sit amet.
`medium`	Orta. Nümunə: Lorem ipsum dolor sit amet.
`large`	Böyük. Nümunə: Lorem ipsum dolor sit amet.
`x-large`	Çox böyük. Nümunə: Lorem ipsum dolor sit amet.
`xx-large`	Ən böyük. Nümunə: Lorem ipsum dolor sit amet.
`larger`	Valideyn şriftindən müəyyən dəyər qədər böyük.
`smaller`	Valideyn şriftindən müəyyən dəyər qədər kiçik.

Susmaya görə dəyər: medium.

Nümunə

Gəlin abzasların şrift ölçüsünü 20px olaraq təyin edək:

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

p {
	font-size: 20px;
}

Nümunə

Bu nümunədə abzas üçün ölçü 16px, onun daxilindəki span üçün isə - 150% olaraq təyin edilib. Bu halda span üçün şrift ölçüsü öz valideyninin, yəni abzasın ölçüsünün 150%-i qədər olacaq, onun real ölçüsü isə 16px * 150% = 24px olacaq:

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

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

Nümunə

Bu nümunədə abzas üçün ölçü 16px, onun daxilindəki span üçün isə - larger olaraq təyin edilib. Bu halda span üçün şrift ölçüsü onun valideynininkindən (abzasın) daha böyük olacaq:

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

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

Nümunə

Diqqət edin ki, müxtəlif font-family olan və eyni font-size olan şriftlər vizual olaraq tamamilə fərqli ölçülərdə ola bilər (bu problemi həll etmək üçün bax: xüsusiyyət font-size-adjust).

Aşağıdakı nümunədə hər iki abzasa font-size 16px olaraq təyin edilib, lakin müxtəlif font-family verilib:

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