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

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

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

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

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

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

Результат: