CSS shrift asoslari: font-family, shrift steklari va o'lcham

Qisqacha: font-family shriftlar ro'yxatini oladi — shrift steki: brauzer qurilmada birinchi topilgan shriftni ishlatadi, ro'yxat oxirida esa doim umumiy oila turadi (serif, sans-serif, monospace, system-ui). O'lcham font-size bilan rem da beriladi, qalinlik font-weight bilan: 400 — oddiy, 700 — qalin. Shriftda qalin yoki kursiv fayl bo'lmasa, brauzer uni soxta chizadi; font-synthesis: none buni o'chiradi.

Bu darsda

• Shrift steki yozasiz va brauzer undan shriftni qanday tanlashini tushuntirasiz.
• Umumiy oilalarni, system-ui ni va tayyor Modern Font Stacks to'plamlarini ishlatasiz.
• Sarlavha darajasini ma'noga qarab qo'yasiz, o'lchamini esa font-size bilan berasiz.
• font-weight va font-style ni, soxta qalin va kursivni taniysiz.
• font qisqa yozuvining ikki tuzog'idan qochasiz.

Oldin bilishingiz kerak: O'lcham birliklari, Meros va qiymat bosqichlari, DevTools'da CSS, Shriftlar, arxivlar va hujjat fayllari.

1. Nega bu kerak?

Jasur akaning jiyani «Bahor» sayti uchun chiroyli maket chizib berdi. Maketda hamma matn "Proxima Nova" shriftida. Jasur aka CSS'ga shu nomni yozdi va noutbukida sahifani ochdi. Hammasi joyida — jiyani shriftni unga o'rnatib bergan ekan.

Ertasi kuni Otabek saytni o'z kompyuterida ochdi. Matn butunlay boshqacha: harflar uchida ingichka "oyoqchalar" bor, xuddi eski gazetadagidek. Nega?

Brauzer faqat qurilmada bor shriftni chiza oladi. "Proxima Nova" pullik shrift, ko'p kompyuter va telefonda o'rnatilmagan. Uni topolmagan brauzer o'zining standart shriftini oldi.

Choyxonadagi buyurtmani eslang: "Menga ko'k choy. Bo'lmasa — qora choy. U ham bo'lmasa — issiq suv." Ofitsiant ro'yxat bo'yicha birinchi borini olib keladi. CSS'da shrift ham aynan shunday so'raladi:

<style>
  p { font-size: 1.25rem; }
  p:nth-of-type(1) { font-family: "Proxima Nova"; }
  p:nth-of-type(2) { font-family: "Proxima Nova", sans-serif; }
  p:nth-of-type(3) { font-family: system-ui, sans-serif; }
</style>
<p>Osh — 35 000 so'm (faqat bitta nom)</p>
<p>Osh — 35 000 so'm (nom va zaxira)</p>
<p>Osh — 35 000 so'm (tizim shrifti)</p>

Nimaga qarang: birinchi qator "oyoqchali" shriftda. Windows'dagi Chrome'da tekshirdik: bu Times New Roman — brauzerning standart shrifti. Ikkinchi qatorda ham "Proxima Nova" topilmadi, lekin brauzer ro'yxatdagi keyingi so'rovni bajardi: oyoqchasiz shrift oldi. Uchinchisi — kompyuteringizning o'z interfeys shrifti.

Agar sizda "Proxima Nova" o'rnatilgan bo'lsa, birinchi ikki qator bir xil ko'rinadi. Sayt har qurilmada boshqacha ko'rinishining sababi — aynan shu.

Bu darsda shu ro'yxatni to'g'ri tuzishni, keyin o'lcham, qalinlik va qiyalikni o'rganamiz. Shrift fayli, uning formatlari va litsenziyasi haqida Shriftlar, arxivlar va hujjat fayllari darsida gaplashgan edik. Bugun o'sha bilimni CSS'ga ulaymiz.

2. font-family va shrift steki

2.1 Ro'yxat qanday o'qiladi

Shrift steki (font stack) — font-family dagi vergul bilan ajratilgan shriftlar ro'yxati. "Stek" — inglizcha "taxlam": bir-birining ustiga terilgan narsalar. Brauzer ro'yxatni chapdan o'ngga o'qiydi va qurilmada birinchi topilgan shriftni oladi.

p {
  font-family: "Proxima Nova", "Segoe UI", sans-serif;
}

flowchart TD
  A["Proxima Nova bormi?"] -->|ha| X["Proxima Nova"]
  A -->|yo'q| B["Segoe UI bormi?"]
  B -->|ha| Y["Segoe UI"]
  B -->|yo'q| C["sans-serif"]
  C --> Z["Qurilmaning oyoqchasiz shrifti"]

Nimaga qarang: oxirgi qadam doim muvaffaqiyatli. sans-serif — aniq shrift emas, "oyoqchasiz biror shrift" degan so'rov. Har qurilmada bunday shrift bor, shuning uchun brauzer bo'sh qo'l qaytmaydi.

Uchta qoida:

• Nom qo'shtirnoqda. Bo'sh joyli nom qo'shtirnoq ichida yoziladi: "Times New Roman". Bir so'zli nom (Georgia) qo'shtirnoqsiz ham ishlaydi. Katta-kichik harf farqlanmaydi.
• Vergul majburiy. Georgia serif — brauzer uchun bitta, "Georgia serif" degan shrift nomi. Chrome'da tekshirdik: bunday shrift yo'q, matn standart shriftga tushdi.
• Tanlov harfma-harf. Birinchi shriftda biror belgi bo'lmasa (masalan, kirillcha "ш" yoki emoji), faqat o'sha belgi keyingi shriftdan olinadi. Qolgan harflar birinchi shriftda qoladi.

2.2 Umumiy oilalar (generic families)

Umumiy oila (generic family) — shriftning nomi emas, turi. Siz "oyoqchali biror shrift" deysiz, qaysi biri bo'lishini brauzer hal qiladi.

O'ng ustundagi nomlarni biz DevTools'dagi Rendered fonts bo'limida tekshirdik (DevTools'da CSS). Ular foydalanuvchi sozlamasiga bog'liq: Chrome'da chrome://settings/fonts sahifasida (Customize fonts) har oila uchun o'z shriftingizni tanlash mumkin. Telefonda natija boshqa bo'ladi:

<style>
  p { font-size: 1.25rem; margin: 0.25rem 0; }
  p:nth-of-type(1) { font-family: serif; }
  p:nth-of-type(2) { font-family: sans-serif; }
  p:nth-of-type(3) { font-family: monospace; }
  p:nth-of-type(4) { font-family: cursive; }
  p:nth-of-type(5) { font-family: system-ui; }
  p:nth-of-type(6) { font-family: ui-rounded, sans-serif; }
</style>
<p>serif — Choyxona «Bahor»</p>
<p>sans-serif — Choyxona «Bahor»</p>
<p>monospace — Choyxona «Bahor»</p>
<p>cursive — Choyxona «Bahor»</p>
<p>system-ui — Choyxona «Bahor»</p>
<p>ui-rounded — Choyxona «Bahor»</p>

Nimaga qarang: monospace qatorida har harf bir xil joy egallaydi — "i" ham, "m" ham. cursive — qo'lda yozilganga o'xshash, bezakli matn uchun, jiddiy saytda deyarli ishlatilmaydi. Oxirgi qator iPhone va Mac'dagi Safari'da yumaloq harflar bilan chiqadi, Chrome'da esa sans-serif qatoridan farq qilmaydi.

2.3 ui-rounded va boshqa ui- oilalar

Umumiy oilalarning yangi to'dasi bor: ui-serif, ui-sans-serif, ui-monospace va ui-rounded. Ular "tizimning o'z oyoqchali, oyoqchasiz, kod va yumaloq shrifti" degani.

Lekin Baseline ma'lumotlariga ko'ra, ular Baseline emas: hozircha faqat Safari'da (macOS va iPhone'da) ishlaydi. Chrome'da tekshirdik: ui-rounded ni tanimaydi va ro'yxatdagi keyingi shriftga o'tadi. Shuning uchun ui- oilalar faqat stek boshida, orqasida zaxira bilan yoziladi: ui-rounded, sans-serif. CSS nima darsidagi "brauzer tushunmaganini tashlab ketadi" qoidasi shu yerda ham qo'l keladi.

Tekshirib ko'ring: font-family: "Segoe UI", Roboto; qatorida nima yetishmaydi? Bu qoida iPhone'da qanday ishlaydi?

3. system-ui va tayyor steklar

3.1 Tizim shrifti

system-ui — operatsion tizim menyu va tugmalarida ishlatadigan shrift. Windows'da bu Segoe UI — DevTools'da CSS darsida Rendered fonts'da uni ko'rgan edingiz. Android'da odatda Roboto, iPhone va Mac'da — Apple'ning San Francisco shrifti.

Uning uch afzalligi bor:

• Yuklash yo'q. Shrift allaqachon qurilmada — 0 KB, kutish ham yo'q.
• Tanish. Foydalanuvchi har kuni shu harflarni o'z telefonida ko'radi.
• Ko'p til. Tizim shriftlari odatda lotin, kirill va boshqa yozuvlarni biladi.

Eski saytlarda buning o'rniga uzun ro'yxatni uchratasiz:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

Bu — system-ui hamma brauzerda bo'lmagan davrdagi yechim: har tizim shriftining nomi qo'lda sanalgan. Baseline ma'lumotlariga ko'ra, system-ui 2021-yil sentabrdan beri to'rt asosiy brauzerda bor, 2024-yil martdan esa "keng tarqalgan". Bugun system-ui, sans-serif yetarli.

«Bahor»ning asosiy matni CSS nima darsidan beri aynan shu stekda turibdi. Endi bu qaror nimaga asoslanganini bilasiz.

3.2 Modern Font Stacks

Sarlavha uchun boshqacharoq shrift kerak bo'lsa-chi? Yuklab olinadigan shriftni keyingi darsda o'rganamiz. Lekin avval bepul yo'l bor: qurilmalarda allaqachon o'rnatilgan chiroyli shriftlar.

Modern Font Stacks (modernfontstacks.com) — Dan Klammer loyihasi. Unda Windows, macOS, Linux va Android'da bor shriftlardan tuzilgan 15 ta tayyor stek jamlangan. Litsenziyasi CC0 — istalgancha ko'chirib ishlatasiz. Mana uchtasi:

/* Transitional — klassik kitob shrifti */
h1 {
  font-family: Charter, "Bitstream Charter", "Sitka Text",
    Cambria, serif;
}

/* Old Style — qadimiyroq, bezakli */
h2 {
  font-family: "Iowan Old Style", "Palatino Linotype",
    "URW Palladio L", P052, serif;
}

/* Monospace Code — kod uchun */
code {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro",
    Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

Har stek bitta "uslubni" turli tizimlarda qidiradi: Mac'da bittasi, Windows'da boshqasi, Linux'da uchinchisi topiladi — lekin hammasi bir-biriga o'xshash. Windows'dagi Chrome'da tekshirdik: Transitional — Sitka Text, Old Style — Palatino Linotype, Monospace Code — Cascadia Code bo'lib chiqdi.

«Bahor» sarlavhasini Transitional stekka o'tkazib ko'ramiz:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
    --rang-matn: #1f2a24;
  }
  body {
    font-family: system-ui, sans-serif;
    background-color: var(--rang-fon);
    color: var(--rang-matn);
  }
  h1 {
    font-family: Charter, "Bitstream Charter", "Sitka Text",
      Cambria, serif;
    color: var(--rang-asosiy);
  }
</style>
<h1>Choyxona «Bahor»</h1>
<p>Har kuni 7:00 dan 23:00 gacha ochiqmiz.</p>

Nimaga qarang: sarlavha oyoqchali, klassik kitob shriftida. Paragraf esa tizim shriftida qoldi. Qaysi shrift chiqqanini DevTools → Computed → Rendered fonts'da tekshiring. Bu — vaqtinchalik qaror: keyingi darsda «Bahor» sarlavhasi o'z shriftini oladi.

Maslahat: Bir sahifada ko'pi bilan ikki shrift oilasi yetadi: biri sarlavhaga, biri matnga. Har bo'limda boshqa shrift — tartibsizlik. Shrift juftlash qoidalarini Tipografik shkala darsida ko'rasiz.

4. font-size — shrift o'lchami

4.1 Qaysi birlikda

O'lcham birliklari darsidagi qoidani eslang: shrift o'lchami rem da beriladi. Bitta 1rem — foydalanuvchi brauzerda tanlagan o'lcham, odatda 16px. Ildiz elementga (html) esa px da shrift bermang. U foydalanuvchi sozlamasini o'chirib qo'yadi: Large tanlagan odam uchun ham matn kattalashmaydi.

font-size ning boshlang'ich qiymati — medium kalit so'zi: foydalanuvchi tanlagan o'lchamning o'zi. Kalit so'zlar yana bor: small, large, x-large... va otaga nisbatan smaller, larger. Ular kam ishlatiladi, lekin brauzerning ichki CSS'ida uchraydi. Masalan, small tegi font-size: smaller oladi. Chrome'da tekshirdik: 16px paragraf ichidagi small — 13.33px.

4.2 Brauzer sarlavhalarga bergan o'lcham

CSS yozmasangiz ham sarlavhalar katta. Bu brauzer uslublaridan (CSS nima darsidagi user-agent stylesheet):

E'tibor bering: h5 va h6 oddiy matndan ham mayda. Shuning uchun ba'zilar "kichik sarlavha kerak" deb h5 qo'yadi. Bu xato — keyingi bo'limda sababini ko'ramiz.

4.3 Daraja — ma'no, o'lcham — CSS

Sarlavhalar va paragraflar darsida qoidani o'rgangan edik: sarlavha darajasi hujjat tuzilmasiga qarab tanlanadi. "Kattaroq ko'rinsin" deb p ni sarlavha qilish yoki "kichikroq ko'rinsin" deb h2 o'rniga h5 qo'yish — ikkalasi ham noto'g'ri. U yerda "o'lchamni CSS bilan kichraytiring" degan edik. Urg'u va ahamiyat teglari darsida esa small faqat "mayda shrift" ma'nosidagi izoh uchun ekanini aytgan edik: shunchaki kichik ko'rinish — CSS ishi. Mana o'sha CSS:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-ikkinchi: #5b6660;
  }
  body { font-family: system-ui, sans-serif; }
  h1 { color: var(--rang-asosiy); }
  h2 { font-size: 1.25rem; }
  main > p:last-child {
    font-size: 0.875rem;
    color: var(--rang-ikkinchi);
  }
</style>
<main>
  <h1>Menyu</h1>
  <h2>Suyuq taomlar</h2>
  <p>Mastava, sho'rva, lag'mon</p>
  <h2>Quyuq taomlar</h2>
  <p>Osh — 35 000 so'm, manti — 30 000 so'm</p>
  <p>Narxlar bir porsiya uchun.</p>
</main>

Nimaga qarang: bo'lim nomlari 24 emas, 20 piksel — sarlavhadan aniq kichik, lekin paragrafdan kattaroq. Oxirgi izoh 14 piksel va kulrang. HTML'da hech narsa o'zgarmadi: h2 — hamon h2.

Tekshirib ko'ring: Malika NVDA ekran o'quvchisida sahifadagi sarlavhalar ro'yxatini ochdi. "Suyuq taomlar" qaysi darajada eshitiladi — font-size: 1.25rem bergandan keyin ham?

5. font-weight — qalinlik

5.1 Sonlar va nomlar

Qalinlik son bilan beriladi. Shrift fayl nomlarida uchraydigan so'zlar — shu sonlarning nomi (Shriftlar, arxivlar va hujjat fayllari darsidagi Roboto-Light, Roboto-Bold):

Asosiy selektorlar darsida font-weight: bold ni ko'rgan edingiz — bu 700 bilan bir xil. Zamonaviy CSS 1 dan 1000 gacha istalgan sonni qabul qiladi (masalan, 650). Oraliq sonlar variable shriftlarda ma'noga ega, ularni Variable shriftlar darsida ko'ramiz.

Ikki nisbiy kalit so'z ham bor: bolder — otadan qalinroq, lighter — ingichkaroq. Oddiy (400) matn ichidagi bolder 700 bo'ladi.

5.2 Shriftda bunday qalinlik bo'lmasa

Har shriftda to'qqizta qalinlik bo'lavermaydi. So'ralgani yo'q bo'lsa, brauzer eng yaqin bor qalinlikni oladi. Windows'dagi Chrome'da system-ui bilan tekshirdik:

<style>
  p {
    font-family: system-ui, sans-serif;
    font-size: 1.25rem;
    margin: 0.25rem 0;
  }
  p:nth-of-type(1) { font-weight: 100; }
  p:nth-of-type(2) { font-weight: 300; }
  p:nth-of-type(3) { font-weight: 400; }
  p:nth-of-type(4) { font-weight: 500; }
  p:nth-of-type(5) { font-weight: 600; }
  p:nth-of-type(6) { font-weight: 700; }
  p:nth-of-type(7) { font-weight: 900; }
</style>
<p>100 — Osh 35 000 so'm</p>
<p>300 — Osh 35 000 so'm</p>
<p>400 — Osh 35 000 so'm</p>
<p>500 — Osh 35 000 so'm</p>
<p>600 — Osh 35 000 so'm</p>
<p>700 — Osh 35 000 so'm</p>
<p>900 — Osh 35 000 so'm</p>

Nimaga qarang: Windows'da 100 va 300 bir xil chiqdi — ikkalasi Segoe UI Light. 500 va 600 ham bir xil — Semibold. To'qqiz qadamning hammasini sinadik: faqat beshta turli shakl bor, chunki Segoe UI'da faqat shuncha fayl bor. Telefoningizda ochsangiz, rasm boshqacha bo'ladi — u yerdagi tizim shriftining o'z qalinliklari bor.

Xulosa: dizayner "500" desa, avval shriftda 500 borligini tekshiring. Yo'q bo'lsa, foydalanuvchi 400 yoki 600 ni ko'radi.

6. font-style va soxta qalin, soxta kursiv

6.1 italic va oblique

font-style qiyalikni beradi: normal, italic yoki oblique. Atribut selektorlari darsida font-style: italic ni ko'rgan edingiz.

• Italic (kursiv) — shrift dizayneri alohida chizgan qiya harflar. Ular qo'lyozmaga yaqin: ba'zi harflarning shakli ham o'zgaradi.
• Oblique (qiya) — oddiy harflarning o'zini qiyshaytirish, shakli o'zgarmaydi.

Urg'u va ahamiyat teglari darsidagi em va i ni brauzer kursivda, strong va b ni qalin qilib ko'rsatadi. Bu ham brauzer uslublaridan.

6.2 Soxta qalin va soxta kursiv

Shriftlar, arxivlar va hujjat fayllari darsidan eslang: klassik shriftda har qalinlik — alohida fayl. Kursiv ham alohida fayl. Agar qalin fayl yo'q bo'lsa-chi?

Brauzer bo'sh qo'l qaytmaydi. U oddiy harflarni o'zi "semirtiradi" yoki qiyshaytiradi. Buni soxta qalin (faux bold) va soxta kursiv (faux italic) deyishadi. Telefondagi kichik rasmni cho'zib kattalashtirishga o'xshaydi: o'lcham kattalashadi, lekin sifat qo'shilmaydi.

Tajriba uchun Google Fonts xizmatidan Lora shriftining faqat oddiy faylini ulaymiz. Natija blokidagi birinchi qator shu ishni qiladi. Web shriftlar qanday ulanishini keyingi darsda to'liq o'rganamiz, hozir faqat natijaga qarang:

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Lora">
<style>
  p {
    font-family: Lora, serif;
    font-size: 1.5rem;
    margin: 0.25rem 0;
  }
  p:nth-of-type(2) { font-weight: 700; }
  p:nth-of-type(3) { font-style: italic; }
</style>
<p>Osh — 35 000 so'm (oddiy)</p>
<p>Osh — 35 000 so'm (soxta qalin)</p>
<p>Osh — 35 000 so'm (soxta kursiv)</p>

Endi xuddi shu shriftning haqiqiy qalin va kursiv fayllarini ham ulaymiz:

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700">
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Lora:ital@1">
<style>
  p {
    font-family: Lora, serif;
    font-size: 1.5rem;
    margin: 0.25rem 0;
  }
  p:nth-of-type(2) { font-weight: 700; }
  p:nth-of-type(3) { font-style: italic; }
</style>
<p>Osh — 35 000 so'm (oddiy)</p>
<p>Osh — 35 000 so'm (haqiqiy qalin)</p>
<p>Osh — 35 000 so'm (haqiqiy kursiv)</p>

Ikki blokni solishtiring. Nimaga qarang: haqiqiy kursivda kichik harflar qo'lyozmaga o'xshab qoldi — "a", "q" va "y" ga qarang. Raqamlar esa deyarli tik turibdi: Lora dizayneri ularni shunday chizgan. Soxta kursivda hamma belgi, raqamlar ham, bir xil burchakka qiyshaygan, shakli o'zgarmagan. Haqiqiy qalinda chiziqlar qalinligi dizayner o'ylagandek taqsimlangan, soxta qalinda esa harflar bir tekis "shishgan".

DevTools → Computed → Rendered fonts buni aniq aytadi. Chrome'da tekshirdik: birinchi blokdagi qalin qator uchun "PostScript name" — Lora-Regular, ya'ni oddiy fayl. Ikkinchi blokda — Lora-Bold.

6.3 font-synthesis — soxta shaklni taqiqlash

h1 {
  font-synthesis: none;
}

font-synthesis — brauzerga soxta shakl chizishga ruxsat beradi yoki taqiqlaydi. Qiymatlari: weight (qalinlik), style (kursiv), small-caps (kichik bosh harflar) va none — hech biri. Boshlang'ich qiymati — uchalasiga ruxsat. Faqat bittasini o'chirish uchun alohida xususiyatlar bor: font-synthesis-weight: none, font-synthesis-style: none.

Chrome'da tekshirdik: faqat oddiy fayl ulangan Lora'da font-weight: 700 va font-synthesis: none birga yozilsa, matn oddiy qalinlikda qoladi — soxta ham, haqiqiy ham qalin yo'q.

Diqqat: font-synthesis: none ni faqat haqiqiy qalin va kursiv fayllar ulanganda ishlating. Aks holda strong va em dagi urg'u ko'zdan butunlay yo'qoladi: o'quvchi muhim so'zni ajrata olmaydi. Qo'shimcha foydasi: fayl ulashni unutsangiz, sahifada buni darhol ko'rasiz.

Tekshirib ko'ring: Saytda shrift faqat oddiy (400) faylda ulangan. strong ichidagi so'z qanday ko'rinadi: (a) font-synthesis ga tegmasak, (b) font-synthesis: none bo'lsa?

7. font qisqa yozuvi

7.1 Tartib

Meros darsida font: inherit ni ko'rgan edingiz. font — shriftga oid xususiyatlarni birdan beradigan qisqa yozuv:

body {
  font: italic 700 1.25rem/1.5 system-ui, sans-serif;
}

O'qilishi: kursiv, qalinligi 700, o'lchami 1.25rem, qator balandligi 1.5, shrift — tizim steki. Tartib qat'iy:

1. Ixtiyoriy qismlar — uslub (italic) va qalinlik (700), istalgan tartibda.
2. O'lcham — majburiy.
3. Ixtiyoriy: / va qator balandligi. Uni Qator balandligi darsida o'rganamiz.
4. Shrift oilasi — majburiy va doim oxirida.

7.2 Tuzoq: majburiy qism unutilsa

h2 {
  font: bold 1.5rem;
}

Oila yozilmagan. Chrome'da tekshirdik: brauzer deklaratsiyani butunlay tashladi — sarlavha o'lchami ham, qalinligi ham brauzer standartida qoldi. CSS nima darsidagi qoida: qiymati noto'g'ri deklaratsiya jim tashlanadi.

7.3 Tuzoq: yozilmagan qism qaytadan o'rnatiladi

CSS nima darsida border ning "tiklash" tuzog'ini ko'rgan edik. font da u yana ham xavfli:

<style>
  :root { --rang-asosiy: #2f6b3a; }
  h2 {
    color: var(--rang-asosiy);
    font: 1.5rem Georgia, serif;
  }
</style>
<h2>Bugungi taom: osh</h2>
<p>Rustam aka qozonni ertalab 7:00 da yoqadi.</p>

Nimaga qarang: sarlavha qalin emas! Biz font-weight ga tegmadik ham. Lekin font yozilmagan qismlarini boshlang'ich qiymatga qaytardi: qalinlik normal bo'ldi, brauzer bergan qalinlik yo'qoldi. Qator balandligi va boshqa bir necha xususiyat ham shunday tiklanadi.

Qoida: font ni faqat hammasini birdan bermoqchi bo'lganda ishlating — ko'pincha body da, bir marta. Qolgan joylarda to'liq yozuvlar: font-size, font-weight, font-family.

8. Ko'p uchraydigan xatolar

8.1 Umumiy oila qo'shtirnoqda

font-family: "sans-serif"; — qo'shtirnoq ichida bu kalit so'z emas, "sans-serif" degan shrift nomi. Chrome'da tekshirdik: bunday shrift topilmadi va matn Times New Roman'ga tushdi. Tuzatish: font-family: sans-serif; — qo'shtirnoqsiz.

8.2 Stek oxirida zaxira yo'q

font-family: "Proxima Nova"; — o'rnatilmagan qurilmada standart oyoqchali shrift chiqadi. Tuzatish: oxiriga doim umumiy oila: "Proxima Nova", sans-serif.

8.3 code matni mayda chiqdi

Kod bloki atrofdagi matndan sezilarli kichik. Chrome'da tekshirdik: 16 piksellik paragraf ichidagi code — 13 piksel. Sabab — brauzer sozlamasida monospace uchun alohida, kichikroq standart o'lcham bor. U faqat stekda monospace yolg'iz turganda ishlaydi. Tuzatish: stekka aniq shrift nomlarini qo'shing (Modern Font Stacks'dagi Monospace Code). Tekshirdik: shunda code 16 piksel bo'ldi. Eski kodlarda font-family: monospace, monospace; degan g'alati qatorni ko'rasiz — bu ham shu muammoni aylanib o'tadigan hiyla.

8.4 O'lcham uchun sarlavha darajasi o'zgartirilgan

"Kichikroq bo'lsin" deb h2 o'rniga h5 qo'yilgan. Sahifa tuzilmasi buziladi, ekran o'quvchi foydalanuvchisi adashadi. Tuzatish: darajani ma'noga qarab qoldiring, o'lchamni font-size bilan bering.

8.5 font da oila yoki o'lcham unutilgan

font: 700 1.25rem; yoki font: bold Georgia; — ikkalasi ham tashlanadi. Tuzatish: o'lcham va oila majburiy, oila oxirida. Yoki to'liq yozuvlardan foydalaning.

9. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring.

1-mashq (oson): Stekdagi xatolar

Uchta qoidaning har birida bittadan xato bor. Toping va tuzating:

h1 {
  font-family: Georgia serif;
}
p {
  font-family: system-ui, "sans-serif";
}
code {
  font-family: Consolas, "Courier New";
}

Ishora: "Ro'yxat qanday o'qiladi" bo'limidagi uchta qoida va "Ko'p uchraydigan xatolar".

h1 {
  font-family: Georgia, serif;
}
p {
  font-family: system-ui, sans-serif;
}
code {
  font-family: Consolas, "Courier New", monospace;
}

2-mashq (o'rta): «Bahor» menyu sahifasi

«Bahor» menyusi uchun asosiy.css ga yozing:

1. h1 — 2rem, rangi --rang-asosiy.
2. Bo'lim sarlavhalari (h2) — 1.25rem va yarim qalin (600).
3. Narx (.narx) — qalin, rangi --rang-urgu.
4. Sahifa pastidagi izoh (main ning oxirgi paragrafi) — 0.875rem, kursiv, rangi --rang-ikkinchi.

Keyin hisoblang: foydalanuvchi Chrome'da shrift sozlamasini Large (20px) qilsa, h2 necha piksel bo'ladi?

Ishora: --rang-* o'zgaruvchilari — CSS o'zgaruvchilari darsidagi palitra. .narx — class="narx" li span. Oxirgi paragraf — main > p:last-child (Tuzilma pseudo-klasslari).

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-ikkinchi: #5b6660;
  }
  body { font-family: system-ui, sans-serif; }
  h1 {
    font-size: 2rem;
    color: var(--rang-asosiy);
  }
  h2 {
    font-size: 1.25rem;
    font-weight: 600;
  }
  .narx {
    font-weight: 700;
    color: var(--rang-urgu);
  }
  main > p:last-child {
    font-size: 0.875rem;
    font-style: italic;
    color: var(--rang-ikkinchi);
  }
</style>
<main>
  <h1>Menyu</h1>
  <h2>Quyuq taomlar</h2>
  <p>Osh — <span class="narx">35 000 so'm</span></p>
  <p>Manti — <span class="narx">30 000 so'm</span></p>
  <h2>Ichimliklar</h2>
  <p>Ko'k choy — <span class="narx">5 000 so'm</span></p>
  <p>Narxlar bir porsiya uchun.</p>
</main>

3-mashq (qiyin): Stajyorning font qatorlari

body {
  font: 1rem system-ui, sans-serif;
}
h1 {
  font-weight: 700;
  font: 2rem "Sitka Text", serif;
}
.narx {
  font: bold 1.125rem;
}
.aksiya {
  font-family: "sans-serif";
}

1. Hech narsani tuzatmasdan: sarlavha, narx va aksiya matni qanday ko'rinadi?
2. Qatorlarni tuzating: sarlavha qalin bo'lsin, narx 1.125rem va qalin, aksiya — oyoqchasiz shriftda.

Ishora: font qisqa yozuvining ikki tuzog'i va qo'shtirnoqdagi umumiy oila xatosi.

body {
  font: 1rem system-ui, sans-serif;
}
h1 {
  font: 700 2rem "Sitka Text", serif;
}
.narx {
  font-size: 1.125rem;
  font-weight: 700;
}
.aksiya {
  font-family: sans-serif;
}

4-mashq: Portfolio qadami — shrift steklari va kod shrifti

Portfolio'dagi asosiy.css da body shrifti CSS nima darsidan beri system-ui, sans-serif. Endi uni tushunib tekshiramiz va ikki joyni yaxshilaymiz:

1. Bosh sahifani oching. DevTools → Computed → Rendered fonts'da system-ui qaysi shriftga aylanganini yozib oling. Telefoningizda ham oching va solishtiring.
2. «Bahor» loyiha sahifasida (loyihalar/bahor/index.html) code teglari bor. Ularga Modern Font Stacks'ning Monospace Code stekini bering. code 16 pikselga teng bo'lganini Computed'da tekshiring.
3. h2 ga 1.375rem o'lcham bering: h1 bilan farqi aniq bo'lsin, lekin darajasi o'zgarmasin.

Ishora: Modern Font Stacks bo'limi va "code matni mayda chiqdi" xatosi. h1 ning o'lchami Matematik funksiyalar darsidagi clamp() da qoladi — unga tegmang.

/* Kod — tizimdagi kod shriftlari, 13px tuzog'isiz */
code {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro",
    Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

/* Bo'lim sarlavhalari */
h2 {
  font-size: 1.375rem;
}

<style>
  body {
    font-family: system-ui, sans-serif;
    color: #1f2a24;
    background-color: #f7faf8;
  }
  h2 {
    color: #1f6f4a;
    font-size: 1.375rem;
  }
  code {
    font-family: ui-monospace, "Cascadia Code",
      "Source Code Pro", Menlo, Consolas,
      "DejaVu Sans Mono", monospace;
  }
</style>
<h2>Nima qildim</h2>
<ul>
  <li>Menyu — <code>caption</code> va <code>scope</code>
    bilan jadval.</li>
  <li>Forma — <code>label</code>, validatsiya va
    <code>autocomplete</code> bilan.</li>
</ul>

10. Real ishda

• Tizim shriftlari katta saytlarda ham keng ishlatiladi: yuklash yo'q, har qurilmada tanish ko'rinish. Istalgan saytni oching va body ning font-family sini DevTools'da ko'ring — ko'pincha uzun tizim stekini topasiz.
• Dizayner maketi (Figma) shriftni nomi, o'lchami (pikselda) va qalinligi bilan beradi: "Semi Bold 20". Dasturchining ishi — buni font-weight: 600 va 1.25rem ga aylantirish va zaxira stekini qo'shish.
• JavaScript qismida konsolga rangli yozuv chiqarganda ham shu xususiyatlarni yozasiz: font-size: 32px; font-weight: bold. Uni kursda keyinroq ko'rasiz, hozir bilish shart emas.
• Intervyuda so'raladi: "Shrift steki nima va oxiriga nega umumiy oila qo'yiladi?", "font-weight: 500 shriftda bo'lmasa nima bo'ladi?", "Soxta qalin (faux bold) nima?".

Xulosa

• font-family — shrift steki: brauzer birinchi topilgan shriftni oladi, oxirida doim umumiy oila (serif, sans-serif, monospace, system-ui).
• Umumiy oila nomi qo'shtirnoqsiz yoziladi; ui-rounded kabi ui- oilalar Baseline emas, faqat zaxira bilan.
• system-ui, sans-serif — tez va tanish matn shrifti; Modern Font Stacks — o'rnatilgan shriftlardan tayyor steklar.
• font-size — rem da; sarlavha darajasi ma'noga qarab, o'lchami CSS'da.
• font-weight 100–900 (400 oddiy, 700 qalin); fayl bo'lmasa — eng yaqini yoki soxta qalin, font-synthesis: none soxtani o'chiradi.
• font qisqa yozuvi o'lcham va oilasiz tashlanadi, yozilmagan qismlarni esa qaytadan o'rnatadi.

Keyingi dars: Web shriftlar: @font-face, formatlar va tez yuklash — «Bahor»ga o'z shriftini beramiz: faylni tanlaymiz, @font-face bilan ulaymiz va sahifani sekinlashtirmay yuklaymiz.

Manbalar

• MDN: "font-family", "font-size", "font-weight", "font-style", "font-synthesis", "font" — developer.mozilla.org
• W3C: "CSS Fonts Module Level 4" — w3.org/TR/css-fonts-4
• Modern Font Stacks — modernfontstacks.com (Dan Klammer, CC0)
• web-features (Baseline ma'lumotlari): "system-ui", "ui-serif, ui-sans-serif, ui-monospace, ui-rounded", "font-synthesis" — github.com/web-platform-dx/web-features