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