Shriftlar

CSS Shriftlar (Fonts)

Veb-saytingiz uchun to'g'ri shrift tanlash muhimdir!

Shrift tanlashning ahamiyati

To'g'ri shrift tanlash foydalanuvchilarning veb-saytni qanday his qilishiga katta ta'sir ko'rsatadi.

To'g'ri shrift sizning brendingiz uchun kuchli identifikatsiya yaratishi mumkin.

O'qish oson bo'lgan shrift ishlatish muhimdir. Shrift sizning matningizga qiymat qo'shadi. Shuningdek, shrift uchun to'g'ri rang va matn o'lchamini tanlash ham muhimdir.

Umumiy shrift oilalari

CSS da beshta umumiy shrift oilasi mavjud:

• Serif shriftlarda har bir harfning chetida kichik zarbalar bo'ladi. Bu shriftlar rasmiylik va nafislik hissini yaratadi.
• Sans-serif shriftlar toza chiziqlarga ega (kichik zarbalar yo'q). Bu zamonaviy va minimalistik ko'rinishni hosil qiladi.
• Monospace shriftlarda barcha harflar bir xil kenglikka ega bo'ladi. Ular mexanik ko'rinish yaratadi.
• Cursive shriftlar inson yozuviga taqlid qiladi.
• Fantasy shriftlar dekorativ/o'yin-kulgi ko'rinishida bo'ladi.

Barcha turli shrift nomlari umumiy shrift oilalaridan biriga tegishli.

Serif va Sans-serif shriftlar o'rtasidagi farq

Serif va Sans-serif

Eslatma: Kompyuter ekranlarida sans-serif shriftlari serif shriftlariga qaraganda o'qish uchun qulayroq hisoblanadi.

Ba'zi shrift namunalari

CSS font-family xossasi

CSS da matnning shriftini aniqlash uchun font-family xossasidan foydalanamiz.

Eslatma: Agar shrift nomi bir nechta so'zdan iborat bo'lsa, uni qo'shtirnoq ichiga olish kerak, masalan: "Times New Roman".

Maslahat: font-family xossasi bir nechta shrift nomlarini zaxira tizimi sifatida saqlashi kerak, bu brauzerlar va operatsion tizimlar o'rtasida maksimal moslashuvni ta'minlaydi. O'zingiz xohlagan shriftni birinchi o'ringa qo'ying va oxirida umumiy oilani qo'shing (agar boshqa shriftlar mavjud bo'lmasa, brauzer umumiy oiladan o'xshash shriftni tanlashi uchun). Shrift nomlari vergul bilan ajratilishi kerak. Zaxira shriftlar haqida keyingi bobda ko'proq o'qing.

Misol

Uchta paragraf uchun turli shriftlarni belgilang:

.p1 {
  font-family: 'Times New Roman', Times, serif;
}
 
.p2 {
  font-family: Arial, Helvetica, sans-serif;
}
 
.p3 {
  font-family: 'Lucida Console', 'Courier New', monospace;
}