Shrift O‘lchami

font-size xususiyati matnning o‘lchamini belgilaydi.

Veb dizaynda matnning o‘lchamini boshqarish muhimdir. Ammo paragraflarni sarlavha ko‘rinishida yoki sarlavhalarni paragraf ko‘rinishida yaratish uchun shrift o‘lchamini o‘zgartirmaslik kerak.

Doimo sarlavhalar uchun <h1> - <h6> teglarini, paragraflar uchun esa <p> tegini ishlating.

font-size qiymati mutlaq yoki nisbiy o‘lchamda bo‘lishi mumkin.

Mutlaq o‘lcham:

Matnni aniq belgilangan o‘lchamga o‘rnatadi
Foydalanuvchi barcha brauzerlarda matn o‘lchamini o‘zgartira olmaydi (mavjudlik uchun yaxshi emas)
Mutlaq o‘lcham, chiqish natijasining fizik o‘lchami ma'lum bo‘lganda foydali

Nisbiy o‘lcham:

Atrofdagi elementlarga nisbatan o‘lchamni o‘rnatadi
Foydalanuvchiga brauzerlarda matn o‘lchamini o‘zgartirishga imkon beradi

Eslatma: Agar font o‘lchamini belgilamasangiz, odatiy matn o‘lchami (paragraflar kabi) 16px bo‘ladi (16px = 1em).

Piksellar bilan shrift o‘lchamini o‘rnatish

Piksellar yordamida matnning o‘lchamini o‘rnatish shrift o‘lchami ustidan to‘liq nazorat beradi:

Misol

h1 {
  font-size: 40px;
}
 
h2 {
  font-size: 30px;
}
 
p {
  font-size: 14px;
}

Maslahat: Agar siz piksellardan foydalansangiz, baribir butun sahifani kattalashtirish uchun zoom vositasidan foydalanishingiz mumkin.

Em bilan shrift o‘lchamini o‘rnatish

Ko‘pgina dasturchilar brauzer menyusida foydalanuvchilarga matn o‘lchamini o‘zgartirish imkoniyatini berish uchun piksel o‘rniga em ishlatadilar.

1em joriy shrift o‘lchamiga teng. Brauzerlarda matnning odatiy o‘lchami 16px. Shuning uchun, 1em o‘lchami odatiy 16px ga teng.

Piksellardan emga o‘tkazish uchun quyidagi formula ishlatiladi: piksellar/16 = em.

Misol

h1 {
  font-size: 2.5em; /* 40px/16 = 2.5em */
}
 
h2 {
  font-size: 1.875em; /* 30px/16 = 1.875em */
}
 
p {
  font-size: 0.875em; /* 14px/16 = 0.875em */
}

Yuqoridagi misolda, em o‘lchamidagi matn o‘lchami piksel misoliga teng. Ammo em o‘lchami bilan barcha brauzerlarda matn o‘lchamini sozlash mumkin bo‘ladi.

Afsuski, eski Internet Explorer versiyalari bilan muammo bor. Matn kattalashtirilganda kerakli o‘lchamdan kattaroq, kichiklashtirilganda esa kichikroq bo‘ladi.

Foiz va Em kombinatsiyasidan foydalanish

Barcha brauzerlarda ishlaydigan yechim - <body> elementi uchun shriftning odatiy o‘lchamini foizda belgilashdir:

Misol

body {
  font-size: 100%;
}
 
h1 {
  font-size: 2.5em;
}
 
h2 {
  font-size: 1.875em;
}
 
p {
  font-size: 0.875em;
}

Endi kodimiz barcha brauzerlarda mukammal ishlaydi! U barcha brauzerlarda bir xil shrift o‘lchamini ko‘rsatadi va barcha brauzerlarda matnni kattalashtirish yoki kichiklashtirish imkonini beradi!

Moslashuvchan Shrift O‘lchami

Matn o‘lchamini vw birligi bilan o‘rnatish mumkin, bu "ko‘rish oynasining kengligi" degan ma’noni anglatadi.

Shu tarzda matn o‘lchami brauzer oynasining o‘lchamiga qarab o‘zgaradi:

<h1 style="font-size:10vw">Salom Dunyo</h1>

Viewport brauzer oynasi hajmidir. 1vw = viewport kengligining 1%. Agar viewport kengligi 50sm bo‘lsa, 1vw 0.5sm ga teng bo‘ladi.

Shrift O‘lchami

Ushbu sahifada