Tipografiya va Transformlar — konspekt

Kursning yakuniy moduli: shriftlar bilan professional ishlash va elementlarni transform bilan harakatlantirish.

font-family va zaxira shriftlar

Shrift ro’yxat bilan yoziladi: brauzer birinchisini topolmasa keyingisiga o’tadi; oxirida doim umumiy oila turadi:

body {
  font-family: "Hanken Grotesk", Arial, sans-serif;
}

Natija: foydalanuvchida Hanken Grotesk bo’lsa — o’sha, bo’lmasa Arial, u ham bo’lmasa tizimning istalgan sans-serif shrifti.

Umumiy oilalar: serif (harflarda "dumcha" bor — Times kabi), sans-serif (dumchasiz, zamonaviy), monospace (teng enli, kod uchun).

Yangi font qo’shish (Google Fonts)

Eng oson yo’l — Google Fonts. Tartibi:

fonts.google.com'dan shrift tanlanadi (kerakli vaznlari belgilanadi);
sayt bergan <link> teglar <head>ga qo’yiladi;
CSS’da font-family: "Shrift nomi", sans-serif; yoziladi.

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

Natija: sahifa Inter shriftining oddiy va qalin vaznlarini Google serveridan yuklab ishlatadi.

E’tibor: har qo’shilgan shrift (va uning har bir vazni) sahifani og’irlashtiradi — 2–3 vazndan ortig’ini yuklamang.

Local font (@font-face)

Shrift faylini o’z serveringizdan ulash:

@font-face {
  font-family: "MeningShriftim";
  src: url("fonts/shrift.woff2") format("woff2");
}

Shundan keyin MeningShriftim xuddi tizim shrifti kabi font-familyda ishlatiladi. Web uchun format — woff2 (eng siqilgani); ttf ham ishlaydi, lekin og’irroq.

Tipik xato. @font-facedagi yo’l xato bo’lsa, brauzer indamay zaxira shriftga o’tadi — "shrift ulanmadi" degan xato chiqmaydi. Shubha bo’lsa DevTools’ning Network bo’limida shrift fayli yuklanganini tekshiring.

Font xossalari

p {
  font-size: 1rem;
  font-weight: 600;      /* 400 — oddiy, 700 — qalin */
  font-style: italic;
  line-height: 1.6;      /* qator orasi: shriftga nisbatan 1.6 */
  letter-spacing: 0.5px; /* harflar orasi */
}

Natija: yarim qalin, qiya matn; qatorlar orasi ochiq — o’qish yengil.

font-weight raqamli shkalada yuradi:

Qiymat	Nomi	Qachon
300	light	katta dekorativ sarlavhalar
400	normal	asosiy matn (standart)
600	semibold	ajratilgan matn, tugmalar
700	bold	sarlavhalar

Tanlangan shriftda shu vazn mavjud bo’lishi kerak: Google Fonts’dan faqat 400 yuklangan bo’lsa, font-weight: 700 so’raganingizda brauzer sun'iy qalinlashtiradi — natija xunuk chiqadi.

line-heightni birliksiz yozish (masalan 1.6) — eng xavfsiz usul: u joriy shrift o’lchamiga proporsional bo’lib qoladi. Matnli sahifalarda 1.5–1.7 — qulay oraliq.

Tipik xato. Qator orasini tor qoldirish (line-height: 1 atrofida) — matn "siqilib", o’qish charchatadi. Shubhada bo’lsangiz 1.6 qo’ying.

2D transforms

transform elementni oqimdagi joyini buzmasdan vizual o’zgartiradi:

.karta:hover {
  transform: translateY(-6px) scale(1.02);
}

Natija: sichqoncha ustiga kelganda karta biroz ko’tarilib, sal kattalashadi — atrofdagi elementlar qimirlamaydi.

To’rt asosiy funksiya:

Funksiya	Vazifasi	Misol
`translate(x, y)`	siljitish	`translate(20px, -10px)`
`rotate(a)`	burish	`rotate(45deg)`
`scale(n)`	masshtab	`scale(1.5)` — 1.5 barobar
`skew(a)`	qiyshaytirish	`skew(10deg)`

Bir nechtasini probel bilan ketma-ket yozish mumkin — tartib muhim: avval burib keyin siljitish bilan avval siljitib keyin burish har xil natija beradi.

Transform'ning position'dan farqi ham shu yerda: u qo’shnilarning joyini umuman o’zgartirmaydi — element vizual siljiydi, oqimdagi o’rni esa qoladi. Shu tufayli hover-effektlarda maket "sakramaydi".

3D transforms

Uchinchi o’q qo’shiladi: rotateX/rotateY/rotateZ, translateZ. Chuqurlik hissi uchun ota elementga perspective beriladi:

.sahna { perspective: 800px; }

.sahna img:hover {
  transform: rotateY(25deg);
}

Natija: rasm ustiga kelganda u xuddi eshik tavaqasidek yon o’qi atrofida buriladi.

perspective qiymati kichraysa effekt keskinlashadi (kamera yaqinlashgandek), kattarsa yumshaydi.

Amaliyot

Loyihangizga Google Fonts’dan bitta shrift ulang: sarlavha va matnga har xil vazn bering.
Istalgan bepul shrift faylini yuklab, @font-face bilan lokal ulang.
Matn sahifangizda line-heightni 1, 1.6 va 2.2 qilib solishtiring — farqni his qiling.
Kartalarga :hoverda translateY + scale effekti bering.
perspective + rotateY bilan "aylanadigan" rasm yasang.

Bu — kursning so’nggi moduli: yakuniy testni ishlang. Keyingi qadam — JavaScript darslari kursi: endi sahifalaringizga harakat qo’shasiz.