თვისება font-family

თვისება font-family ადგენს ფონტის ტიპს.

სინტაქსი

სელექტორი {
	font-family: ფონტის სახელი;
}

შენიშვნა

თუ ფონტის სახელში შედის სფეისები, მაგალითად, Times New Roman, ის უნდა იყოს ჩასმული ერთჯერად ან ორჯერად ბრჭყალებში.

შენიშვნა

შესაძლებელია რამდენიმე მსგავსი ფონტის მითითება მძიმით გამოყოფით. როდესაც ბრაუზერი ხვდება პირველ ფონტს სიაში, ის ამოწმებს მის ხელმისაწვდომობას მომხმარებლის კომპიუტერზე. თუ ასეთი ფონტი არ არის, აღიქვამს შემდეგი ფონტი სიიდან და ასევე მოწმდება მისი ხელმისაწვდომობა. ამიტომ რამდენიმე ფონტი ზრდის ალბათობას, რომ მათგან ერთი მაინც იქნება აღმოჩენილი კლიენტის კომპიუტერზე.

სიას ჩვეულებრივ ასრულებენ საკვანძო სიტყვით, რომელიც აღწერს ფონტის ტიპს (ყველა ფონტი ეკუთვნის რაიმე ტიპს) - serif, sans-serif, cursive, fantasy ან monospace. თუ ბრაუზერმა ვერ იპოვნა არც ერთი მითითებული ფონტი მომხმარებლის კომპიუტერზე, მაშინ ის აირჩევს ერთ-ერთ ფონტს მითითებული ტიპიდან.

ფონტების ტიპები

ტიპი	აღწერა
`serif`	ფონტი ტკიპებით (სერიფებით).
`sans-serif`	ფონტი ტკიპების გარეშე.
`cursive`	კურსიული ფონტი.
`fantasy`	დეკორატიული ფონტი ლამაზი მოხვევებით და უჩვეულო ეფექტებით.
`monospace`	მონოსპეისის ფონტი, სადაც თითოეული სიმბოლოს სიგანე ერთნაირია.

საწყისი მნიშვნელობა: ბრაუზერში ნაგულისხმევად დაყენებული ფონტი. ჩვეულებრივ ეს არის Times New Roman.

მაგალითი

მივანიჭოთ ფონტს ოჯახი Arial:

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

p {
	font-family: Arial;
}

მაგალითი

მივანიჭოთ ფონტს ოჯახი Times New Roman. რადგან ფონტის სახელი შედგება რამდენიმე სიტყვისგან, ის უნდა ჩავსვათ ბრჭყალებში:

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

p {
	font-family: "Times New Roman";
}

მაგალითი

მივანიჭოთ ფონტს ფონტი serif ჯგუფიდან (სავარაუდოდ, ამოვარჩევთ Times New Roman-ს):

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

p {
	font-family: serif;
}

მაგალითი

მივანიჭოთ ფონტს ფონტი sans-serif ჯგუფიდან (სავარაუდოდ, ამოვარჩევთ Arial-ს):

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

p {
	font-family: sans-serif;
}

მაგალითი

მივანიჭოთ ფონტს ფონტი fantasy ჯგუფიდან (შესაძლოა არ იმუშაოს ასეთი ფონტის არარსებობის გამო):

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

p {
	font-family: fantasy;
}

მაგალითი

მივანიჭოთ ფონტს ფონტი monospace ჯგუფიდან (ასოები გახდება ერთნაირი ზომის):

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

p {
	font-family: monospace;
}