თვისება 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";
}

Результат: