Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

Shrift o‘lchami

ULASHISH

CSS shrift o‘lchami

CSS font-size xossasi matn/shrift o‘lchamini belgilash uchun ishlatiladi.

Matn o‘lchamini boshqara olish veb-dizaynda juda muhim.

Biroq paragraflarni sarlavhaga, sarlavhlarni paragrafga o‘xshatish uchun shrift o‘lchamini o‘zgartirishdan foydalanmasligingiz kerak. Har doim to‘g‘ri HTML teglaridan foydalaning: sarlavhalar uchun <h1> - <h6>, paragraflar uchun <p>.

font-size mutlaq o‘lcham yoki nisbiy o‘lchamga belgilanishi mumkin.

Absolute sizes:

  • px: Piksell shrift o‘lchami ustidan qat’iy va aniq nazorat beradi.
  • xx-small, x-small, small, medium, large, x-large, xx-large. Bu kalit so‘zlar brauzerlarda oldindan belgilangan o‘lchamlar to‘plamiga ega.

Relative sizes:

  • em: Bu birlik ota elementning shrift o‘lchamiga nisbiy.
  • rem: Bu birlik ildiz HTML elementining shrift o‘lchamiga nisbiy.
  • %: Bu birlik ota elementning shrift o‘lchamiga nisbiy
  • smaller va larger: Bu birliklar shrift o‘lchamini ota elementga nisbatan sozlaydi.

To‘g‘ri birlikni qanday tanlash kerak?

  • Qat’iy va aniq nazorat uchun px ishlatilishi mumkin.
  • px bilan veb-sahifa turli ekran o‘lchamlarida yoki foydalanuvchi sozlamalarida yaxshi masshtablanmaydi.
  • Mutlaq o‘lcham chiqishning fizik o‘lchami ma’lum bo‘lganda foydali bo‘lishi mumkin.
  • Masshtablanuvchi veb-dizaynlar uchun em yoki rem ishlatting; ular foydalanuvchiga brauzer sozlamalarida matn o‘lchamini o‘zgartirish imkonini beradi.
  • Foiz (%) ota elementlarga asoslangan shrift o‘lchamlarini sozlash uchun foydali bo‘lishi mumkin.

Shrift o‘lchamini piksellarda belgilash

Matn o‘lchamini piksellarda (px) belgilash matn o‘lchami ustidan to‘liq nazorat beradi.

Agar piksellardan foydalansangiz, veb-sahifa turli ekran o‘lchamlarida yaxshi masshtablanmasligi mumkin va foydalanuvchilar brauzer sozlamalarida matn o‘lchamini o‘zgartira olmaydi. Biroq foydalanuvchilar butun sahifaning o‘lchamini o‘zgartirish uchun kattalashtirish vositasidan foydalanishlari mumkin.

Misol

Shrift o‘lchamlarini px bilan belgilash:

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 16px;
}
O‘zingiz sinab ko‘ring »

Shrift o‘lchamini em bilan belgilash

em birligi ota elementning shrift o‘lchamiga nisbiy. Agar ota elementning shrift o‘lchami 16px bo‘lsa, 2.5em 40px bo‘ladi.

Quyidagi misolda em dagi matn o‘lchami oldingi pikselli misoldagi bilan bir xil. Biroq em birligi foydalanuvchiga brauzer sozlamalarida matn o‘lchamini o‘zgartirish imkonini beradi.

Misol

Shrift o‘lchamlarini em bilan belgilash:

body {
  font-size: 16px; /* Base font size */
}

h1 {
  font-size: 2.5em; /* 2.5 * 16 = 40px */
}

h2 {
  font-size: 1.875em; /* 1.875 * 16 = 30px */
}

p {
  font-size: 1em; /* 1 * 16 = 16px */
}
O‘zingiz sinab ko‘ring »

Shrift o‘lchamini rem bilan belgilash

rem birligi ildiz HTML elementining (<html>) shrift o‘lchamiga nisbatan hisoblanadi.

Ota elementning shrift o‘lchamiga nisbiy bo‘lgan em’dan farqli o‘laroq, rem hamesha <html> elementining shrift o‘lchamiga qarab belgilanadi, uning hujjat daraxtidagi joylashuvidan qat’i nazar. Bu rem’ni masshtablanuvchi va moslashuvchan dizaynlar yaratish uchun juda foydali qiladi. <html> elementining shrift o‘lchamini o‘zgartirganda, rem birliklari bilan o‘lcham berilgan barcha elementlar butun sahifa bo‘ylab mutanosib ravishda masshtablanadi.

Ko‘pgina brauzerlarda <html> elementining standart shrift o‘lchami 16px. Demak, standart holatda 1rem 16px ga teng, agar CSS’da aniq o‘zgartirilmagan bo‘lsa.

Misol

Shrift o‘lchamlarini rem bilan belgilash:

html {
  font-size: 16px; /* Set the root font size */
}

h1 {
  font-size: 2.5rem; /* 2.5 * 16 = 40px */
}

h2 {
  font-size: 1.875rem; /* 1.875 * 16 = 30px */
}

p {
  font-size: 1rem; /* 1 * 16 = 16px */
}
O‘zingiz sinab ko‘ring »

vw birligi

Shrift o‘lchamini vw birligi bilan ham belgilash mumkin — bu "ko‘rish oynasi kengligi"ni anglatadi.

vw birligi ko‘rish oynasi kengligining foizini ifodalovchi nisbiy birlikdir.

1vw = brauzer ko‘rish oynasi joriy kengligining 1%. Demak, ko‘rish oynasi 500px keng bo‘lsa, 1vw = 5px.

Bunday holda matn o‘lchami brauzer oynasi o‘lchamiga ergashadi:

Salom Dunyo

Shrift o‘lchami qanday masshtablanishini ko‘rish uchun brauzer oynasining o‘lchamini o‘zgartiring.

Misol

h1 {
  font-size:10vw;
}

p {
  font-size:5vw;
}
O‘zingiz sinab ko‘ring »

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish