CSS variable shriftlar va OpenType: o'qlar, raqamlar va ligaturalar

Qisqacha: Variable shrift — bitta faylda "o'qlar" bo'ylab silliq o'zgaradigan shrift: qalinlik (wght), en (wdth), optik o'lcham (opsz), qiyalik (slnt, ital). Ularni oddiy xususiyatlar boshqaradi (font-weight, font-stretch, font-optical-sizing, font-style), font-variation-settings esa faqat maxsus o'qlar uchun. OpenType xususiyatlari — shrift ichidagi yashirin imkoniyatlar: masalan, font-variant-numeric: tabular-nums narx ustunidagi raqamlarni tekislaydi.

Bu darsda

• Variable shrift o'qlarini ularni boshqaradigan CSS xususiyatlari bilan bog'laysiz.
• font-variation-settings qachon kerakligini va uning tuzog'ini bilasiz.
• font-optical-sizing harflarni o'lchamga qarab qanday o'zgartirishini ko'rasiz.
• «Bahor» hisob jadvalidagi raqamlarni tabular-nums bilan tekislaysiz.
• Ligatura, kerning va font-feature-settings ni boshqarasiz, rangli shriftlar bilan tanishasiz.

Oldin bilishingiz kerak: Web shriftlar, Shrift asoslari, Shriftlar, arxivlar va hujjat fayllari.

1. Nega bu kerak?

Otabek stol hisobini chiqaradigan sahifani ko'rib, Jasur akaga aytdi: "Summalar qiyshiq turibdi". Haqiqatan: 143 000 pastda, 70 000 tepada, lekin minglar xonasi bir-birining ostiga tushmagan. Hisobni tez o'qib bo'lmaydi.

Dizayner esa boshqa narsa so'radi: bosh sarlavha 700, bo'lim sarlavhalari 600, aksiya matni 500 qalinlikda bo'lsin. Klassik shriftda bu uchta fayl, uchta yuklash.

Ikkala muammoning yechimi shrift faylining ichida yashiringan. Shriftlar, arxivlar va hujjat fayllari darsidagi "chiroq murvati"ni eslang: variable shriftda qalinlik "yoniq/o'chiq" emas, silliq aylanadi. Shriftda yana ko'p yashirin imkoniyat bor: bir xil enli raqamlar, kasr belgilari, harf juftlari. Bugun ularni CSS bilan yoqishni o'rganamiz.

2. Variable shrift va uning o'qlari

2.1 Beshta standart o'q

Variable shriftda o'zgaradigan har bir xususiyat o'q (axis) deyiladi. Har o'qning to'rt harfli yorlig'i (teg) bor. Beshtasi standartlashgan va har biriga oddiy CSS xususiyati mos keladi:

Standart o'qlar kichik harf bilan yoziladi. Shrift dizayneri o'z o'qlarini ham qo'sha oladi — ularning yorlig'i katta harfda, masalan GRAD. Ular haqida pastroqda, font-variation-settings bo'limida.

font-stretch ning yangi nomi — font-width. Lekin Baseline ma'lumotlariga ko'ra, font-width hali Baseline emas, font-stretch esa hamma brauzerda ishlaydi. Shuning uchun biz font-stretch yozamiz.

2.2 O'qlarni ko'rib chiqamiz

Ko'p o'qli shriftga yaxshi misol — Roboto Flex (litsenziyasi SIL OFL 1.1). Uning qalinligi 100 dan 1000 gacha, eni 25% dan 151% gacha, qiyaligi 0 dan -10 gacha:

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Roboto+Flex:
opsz,slnt,wdth,wght@8..144,-10..0,25..151,100..1000">
<style>
  p {
    font-family: "Roboto Flex", sans-serif;
    font-size: 2rem;
    margin: 0.25rem 0;
  }
  p:nth-of-type(1) { font-weight: 200; }
  p:nth-of-type(2) { font-weight: 900; }
  p:nth-of-type(3) { font-stretch: 25%; }
  p:nth-of-type(4) { font-stretch: 151%; }
  p:nth-of-type(5) { font-style: oblique 10deg; }
  p:nth-of-type(6) { font-weight: 650; font-stretch: 80%; }
</style>
<p>Osh 35 000 — 200</p>
<p>Osh 35 000 — 900</p>
<p>Osh 35 000 — en 25%</p>
<p>Osh 35 000 — en 151%</p>
<p>Osh 35 000 — 10° qiya</p>
<p>Osh 35 000 — 650 va 80%</p>

Nimaga qarang: hamma qator — bitta shrift fayli. Birinchi ikkitasida faqat qalinlik, keyingi ikkitasida faqat en o'zgardi: 25% da harflar siqilib, tor ustunga o'xshab qoldi. Beshinchi qator qiyshaydi. Oxirgisi — 650 qalinlik va 80% en birga: klassik shriftda bunday oraliq qiymat uchun alohida fayl ham bo'lmaydi.

Havoladagi uzun manzilni ikki qatorga bo'ldik. Brauzer manzil ichidagi qator tashlashni o'chirib tashlaydi, shuning uchun u ishlaydi. Faqat ikkinchi qator boshida bo'sh joy bo'lmasin.

Qiyalik haqida bir nozik joy. Chrome'da tekshirdik: font-style: oblique 10deg Roboto Flex'da slnt o'qini -10 ga qo'yadi — natija font-variation-settings: "slnt" -10 bilan pikselma-piksel bir xil. Lekin Baseline ma'lumotlarida burchakli oblique hali hamma brauzer uchun belgilanmagan. Qiyalik muhim bo'lsa, sahifani boshqa brauzerlarda ham tekshiring.

Diqqat: Ko'p o'q — katta fayl. Roboto Flex'ning shu to'rt o'qli lotin qismi 249 700 bayt (taxminan 244 KB). «Bahor»ning Lora fayli — 37 788 bayt. Faqat kerakli o'qlarni oling: Google Fonts va Fontsource so'rovda o'q tanlashga imkon beradi.

2.3 «Bahor»: bitta fayl, har qanday qalinlik

Web shriftlar darsida bahor.woff2 ni ulaganmiz. U ham variable, lekin bitta o'qli: wght, 400 dan 700 gacha. Dizaynerning uch qalinligi uchun yangi fayl kerak emas:

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Lora:wght@400..700">
<style>
  :root { --rang-asosiy: #2f6b3a; }
  body { font-family: system-ui, sans-serif; }
  h1, h2, strong {
    font-family: Lora, serif;
    color: var(--rang-asosiy);
  }
  h1 { font-weight: 700; }
  h2 { font-weight: 600; }
  strong { font-weight: 500; }
</style>
<h1>Choyxona «Bahor»</h1>
<h2>Quyuq taomlar</h2>
<p><strong>Aksiya:</strong> juma kuni ko'k choy bepul.</p>

Nimaga qarang: uch xil qalinlik — hammasi haqiqiy, soxta emas. Natija oynasida shrift Google Fonts'dan kelyapti. «Bahor» saytida esa aynan shu qatorlar bahor.woff2 bilan ishlaydi — faqat font-family: "Bahor" bo'ladi.

Bir muhim shart: @font-face da qalinlik oraliq bilan yozilsin — font-weight: 400 700. Chrome'da tekshirdik:

• font-weight: 400 deb yozilsa, brauzer faylni "faqat 400" deb o'ylaydi. 700 so'ralganda variable o'qni ishlatmaydi, soxta qalin chizadi.
• Oraliqdan tashqaridagi qiymat chegaraga tortiladi: font-weight: 800 — 700 bilan pikselma-piksel bir xil.

Tekshirib ko'ring: Dizayner "narxlar 550 qalinlikda bo'lsin" dedi. «Bahor» uchun yangi fayl kerakmi? font-weight: 550 yozish mumkinmi?

3. font-variation-settings — past darajadagi boshqaruv

3.1 Sintaksis

O'qlarni to'g'ridan-to'g'ri ham berish mumkin:

h2 {
  font-variation-settings: "wght" 650, "wdth" 80;
}

Har juft — qo'shtirnoqdagi o'q yorlig'i va qiymat. Ko'rinishidan qulay, lekin standart o'qlar uchun bu yo'l tavsiya qilinmaydi. Sababi — ikki tuzoq.

3.2 Tuzoq: hammasi birdan almashadi

font-variation-settings — bitta xususiyat, ichidagi ro'yxat bilan birga. Bolada uni qayta yozsangiz, otadagi ro'yxat butunlay almashadi, qo'shilmaydi:

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Roboto+Flex:
opsz,slnt,wdth,wght@8..144,-10..0,25..151,100..1000">
<style>
  p {
    font-family: "Roboto Flex", sans-serif;
    font-size: 2rem;
    margin: 0.25rem 0;
  }
  p:nth-of-type(1) {
    font-variation-settings: "wght" 800;
  }
  p:nth-of-type(1) span {
    font-variation-settings: "wdth" 60;
  }
  p:nth-of-type(2) { font-weight: 800; }
  p:nth-of-type(2) span { font-stretch: 60%; }
</style>
<p>Aksiya: <span>ko'k choy</span></p>
<p>Aksiya: <span>ko'k choy</span></p>

Nimaga qarang: ikkala qatorda ham niyat bir xil — "hammasi 800 qalin, span esa torroq". Birinchi qatorda span torraydi, lekin qalinligini yo'qotdi: yangi ro'yxatda wght yo'q, u standart qiymatga qaytdi. Ikkinchi qatorda font-weight va font-stretch alohida xususiyatlar — span qalinlikni meros oldi va faqat enini o'zgartirdi.

Ikkinchi tuzoq: font-variation-settings bilan berilgan qalinlikni boshqa qoidalar bilmaydi. font-weight qiymati o'zgarmaydi, shuning uchun bolder kabi nisbiy qiymatlar va boshqa CSS unga tayana olmaydi.

3.3 Qachon kerak

Faqat oddiy xususiyati yo'q maxsus o'qlar uchun. Masalan, Roboto Flex'dagi GRAD (grade) o'qi harflarni enini o'zgartirmasdan qalinlashtiradi. Tugma ustiga sichqoncha kelganda matnni biroz "to'qroq" qilish uchun qulay — so'zlar joyidan siljimaydi:

a:hover {
  font-variation-settings: "GRAD" 150;
}

Buning uchun shrift GRAD o'qi bilan ulangan bo'lishi kerak. Qolgan hamma holatda — font-weight, font-stretch, font-style, font-optical-sizing.

4. font-optical-sizing — optik o'lcham

Eski bosmaxonada har o'lcham uchun harflar alohida quyilgan. Mayda harflar biroz kengroq va ochiqroq qilingan — kichik matnda ular bir-biriga yopishib qolmasin. Yirik sarlavha harflari esa nozikroq va zichroq. Buni optik o'lcham (optical size) deyishadi.

Variable shriftda buning uchun opsz o'qi bor. font-optical-sizing: auto (boshlang'ich qiymat) bo'lsa, brauzer o'qni shrift o'lchamiga moslab o'zi qo'yadi. none — o'chiradi:

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Roboto+Flex:
opsz,slnt,wdth,wght@8..144,-10..0,25..151,100..1000">
<style>
  p {
    font-family: "Roboto Flex", sans-serif;
    font-size: 4rem;
    margin: 0;
  }
  p:nth-of-type(2) { font-optical-sizing: none; }
</style>
<p>Bahor 2026</p>
<p>Bahor 2026</p>

Nimaga qarang: ikkala qator bir xil o'lchamda, lekin birinchisi (auto) nozikroq va zichroq — brauzer uni yirik sarlavha shakliga o'tkazdi. Ikkinchisi (none) — oddiy matn uchun chizilgan harflarning shunchaki kattalashtirilgani.

auto ni o'zgartirish deyarli kerak emas. Lora'da opsz o'qi yo'q, shuning uchun «Bahor»ga bu xususiyat ta'sir qilmaydi — shriftda yo'q o'q e'tiborsiz qoldiriladi.

5. OpenType xususiyatlari

5.1 Nima u?

Shrift faylida asosiy harflardan tashqari muqobil shakllar ham bor: bir xil enli raqamlar, kasr belgilari, qo'shilgan harf juftlari. Ular OpenType xususiyatlari (OpenType features) deb ataladi — OpenType shrift formatidan. Har birining to'rt harfli yorlig'i bor: tnum (bir xil enli raqamlar), liga (ligaturalar), kern (kerning), frac (kasrlar).

Ba'zilari doim yoqiq (liga, kern), ko'pchiligi — o'chiq, ularni CSS yoqadi. Muhim fakt: shriftda bo'lmagan xususiyatni CSS yarata olmaydi. Chrome'da tekshirdik: Google Fonts'dagi Lora'da tnum va frac bor. Eski uslubdagi raqamlar (onum) va chiziqli nol (zero) esa yo'q — ularni so'rasangiz, hech narsa o'zgarmaydi va xato ham chiqmaydi.

5.2 Raqamlar: font-variant-numeric

Dars boshidagi qiyshiq summalarning sababi: ko'p shriftda raqamlar turli enli. "1" tor, "0" keng — xuddi harflar kabi. Bunday raqamlar proporsional deyiladi. Matnda chiroyli, lekin ustunda qiyshiq.

Chrome'da o'lchadik: 40 piksellik Lora'da 1111 — 58 piksel, 0000 — 99 piksel. Bir xil to'rtta raqam, eni deyarli ikki barobar farq qiladi! tabular-nums bilan ikkalasi ham 104 piksel.

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Lora:wght@400..700">
<style>
  table {
    font-family: Lora, serif;
    font-size: 1.125rem;
    margin-bottom: 1rem;
  }
  caption { text-align: left; font-weight: 700; }
  th, td { padding: 0.25rem 0.75rem; }
  td:nth-child(n+2) { text-align: right; }
  table + table td {
    font-variant-numeric: tabular-nums;
  }
</style>
<table>
  <caption>Oddiy raqamlar</caption>
  <tr><th>Osh</th><td>35 000</td><td>2</td><td>70 000</td></tr>
  <tr><th>Lag'mon</th><td>28 000</td><td>1</td><td>28 000</td></tr>
  <tr><th>Manti</th><td>30 000</td><td>1</td><td>30 000</td></tr>
  <tr><th>Ko'k choy</th><td>5 000</td><td>3</td><td>15 000</td></tr>
  <tr><th>Jami</th><td></td><td></td><td>143 000</td></tr>
</table>
<table>
  <caption>tabular-nums</caption>
  <tr><th>Osh</th><td>35 000</td><td>2</td><td>70 000</td></tr>
  <tr><th>Lag'mon</th><td>28 000</td><td>1</td><td>28 000</td></tr>
  <tr><th>Manti</th><td>30 000</td><td>1</td><td>30 000</td></tr>
  <tr><th>Ko'k choy</th><td>5 000</td><td>3</td><td>15 000</td></tr>
  <tr><th>Jami</th><td></td><td></td><td>143 000</td></tr>
</table>

Nimaga qarang: ikkinchi jadvalda narx va summa ustunlaridagi raqamlar bir-birining ostiga aniq tushdi — birlar ostida birlar, minglar ostida minglar. Birinchi jadvalda 15 000 va 143 000 dagi "1" tor, shuning uchun qatorlar sal siljigan. Ustun o'ngga tekislangan (text-align: right), lekin bu yetmaydi — raqamlarning o'zi bir xil enli bo'lishi kerak. Jadval o'lchami va chegaralarini Ro'yxatlar va jadvallar darsida chuqurroq bezaymiz.

Qiziq fakt: Windows'ning tizim shrifti Segoe UI'da raqamlar allaqachon bir xil enli — Chrome'da o'lchadik. Shuning uchun tabular-nums ni doim aniq yozing: shrift almashsa ham, ustun buzilmaydi. «Bahor» asosiy.css iga:

/* Narx va summalar ustunda tekis tursin */
.narx,
td {
  font-variant-numeric: tabular-nums;
}

font-variant-numeric ning boshqa qiymatlari:

Bir qiymatda bir nechtasini birlashtirish mumkin: font-variant-numeric: tabular-nums slashed-zero;. Taymerlarda tabular-nums ayniqsa muhim: taksi ilovasidagi "02:15" kabi hisoblagichda raqamlar har soniyada "tebranmasin".

5.3 Ligaturalar: font-variant-ligatures

Ligatura (ligature) — ikki-uch harfning bitta chiroyli belgiga qo'shilishi. Eng mashhuri — "fi": "f" ning qalpog'i "i" ning nuqtasiga tegib qolmasin deb, ular bitta shaklga birlashtiriladi.

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Lora">
<style>
  p {
    font-family: Lora, serif;
    font-size: 4rem;
    margin: 0;
  }
  p:nth-of-type(2) { font-variant-ligatures: none; }
</style>
<p>fikr, sifat</p>
<p>fikr, sifat</p>

Nimaga qarang: birinchi qatorda "fi" bitta belgi — "i" ning nuqtasi yo'q, "f" ning dumi uning o'rnini egallagan. Ikkinchi qatorda ligatura o'chirilgan: ikki alohida harf, nuqta joyida. Chrome'da o'lchadik: 40 piksellik Lora'da ligaturali "fi" 24.9 piksel, alohida — 26 piksel.

Qiymatlari: normal (boshlang'ich — oddiy ligaturalar yoqiq), none (hammasi o'chiq), discretionary-ligatures (bezakli qo'shimcha ligaturalar, odatda o'chiq). Dasturchilar uchun kod shriftlarida => ni strelkaga aylantiradigan ligaturalar bor. Ular kimgadir yoqadi, kimnidir chalg'itadi — font-variant-ligatures: none o'chiradi.

Yana bir fakt: harflar orasiga masofa qo'shsangiz (letter-spacing), Chrome ligaturani o'chirib qo'yadi. Tekshirdik: letter-spacing: 1px bilan "fi" alohida harflarga ajraldi. Buni Qator balandligi va harf oralig'i darsida ishlatamiz.

5.4 Kerning: font-kerning

Kerning — ma'lum harf juftlari orasidagi masofani moslash. "T" ning qalpog'i ostida bo'sh joy bor, shuning uchun "To" da "o" biroz chapga suriladi. Aks holda "T" va "o" orasida teshik paydo bo'ladi.

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Lora">
<style>
  p {
    font-family: Lora, serif;
    font-size: 4rem;
    margin: 0;
  }
  p:nth-of-type(2) { font-kerning: none; }
</style>
<p>Toshkent, AVTO</p>
<p>Toshkent, AVTO</p>

Nimaga qarang: birinchi qatorda "To", "AV" va "VT" juftlari zich, so'z bir butun ko'rinadi. Ikkinchi qatorda kerning o'chiq: "T" dan keyin va "A" bilan "V" orasida teshik ochildi. Chrome'da o'lchadik: 40 piksellik Lora'da "AVATo" kerning bilan 119 piksel, kerningsiz — 125.

Qiymatlari: auto (boshlang'ich — brauzer hal qiladi), normal (doim yoqiq), none (o'chiq). Deyarli hech qachon o'zgartirilmaydi — bilish uchun kerak.

5.5 font-feature-settings — istalgan xususiyat

Yuqoridagi xususiyatlar — yuqori darajadagi yo'l. Past darajadagi yo'l ham bor — to'rt harfli yorliq bilan:

td {
  font-feature-settings: "tnum" 1;
}

U font-variation-settings ning "egizagi" va xuddi shunday tuzog'i bor: yangi qator butun ro'yxatni almashtiradi. Faqat oddiy xususiyati yo'q imkoniyatlar uchun ishlating. Masalan, ba'zi shriftlarda stilistik to'plamlar bor: "ss01" 1 — shriftning muqobil harf shakllari to'plami. Qaysi raqamli to'plam nima qilishini shrift sahifasida ko'rasiz.

5.6 Kichik bosh harflar: font-variant-caps

Kichik bosh harflar (small caps) — kichik harf bo'yidagi bosh harflar. Ular kitoblarda va rasmiy hujjatlarda kichik sarlavha yoki yorliq uchun ishlatiladi. Shriftda buning uchun smcp xususiyati bo'ladi, CSS'da esa font-variant-caps: small-caps yoqadi.

Lora'da smcp yo'q. Lekin brauzer bu yerda ham bo'sh qo'l qaytmaydi — Shrift asoslari darsidagi soxta qalin kabi, kichik bosh harflarni o'zi "yasaydi":

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Lora">
<style>
  p {
    font-family: Lora, serif;
    font-size: 2rem;
    margin: 0;
  }
  p:nth-of-type(2) { font-variant-caps: small-caps; }
  p:nth-of-type(3) {
    font-variant-caps: small-caps;
    font-synthesis: none;
  }
</style>
<p>Yangi taom: Manti</p>
<p>Yangi taom: Manti</p>
<p>Yangi taom: Manti</p>

Nimaga qarang: ikkinchi qatorda kichik harflar o'rniga kichraytirilgan bosh harflar turibdi. Bu — soxta kichik bosh harflar: brauzer oddiy bosh harfni kichraytirib chizdi, shuning uchun chiziqlari atrofdagi harflardan ingichkaroq. Uchinchi qatorda font-synthesis: none soxtani taqiqladi — shriftda haqiqiy smcp yo'q, matn o'zgarmadi.

5.7 Qisqa yozuv hammasini qaytaradi

Shrift asoslari darsidagi font tuzog'ini eslang. Chrome'da tekshirdik: font-variant-numeric: tabular-nums dan keyin shu elementga font: 1.25rem Georgia, serif yozilsa, font-variant-numeric normal ga qaytadi. Qisqa yozuvdan keyin raqam sozlamalari yo'qolmasin desangiz, ularni font dan keyin yozing.

Tekshirib ko'ring: Shriftda tnum xususiyati yo'q. font-variant-numeric: tabular-nums nima qiladi?

6. Rangli shriftlar — qisqacha

Oddiy shrift faqat shaklni saqlaydi, rangni CSS beradi (color). Rangli shrift (color font) esa har harfning ranglarini ham o'zida saqlaydi. Siz har kuni ishlatadigan eng mashhur rangli shrift — emoji: Windows'da Segoe UI Emoji, iPhone'da Apple Color Emoji.

Rangli shriftlarning bir necha formati bor. Baseline ma'lumotlariga ko'ra, oddiyroq COLRv0 hamma brauzerda ishlaydi. Gradientli COLRv1 esa Baseline emas: Chrome va Firefox'da bor, Safari'da yo'q.

Ba'zi rangli shriftlarda bir necha tayyor palitra bo'ladi. Ularni @font-palette-values qoidasi va font-palette xususiyati almashtiradi — ikkalasi ham Baseline, hamma asosiy brauzerda bor:

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Nabla">
<style>
  @font-palette-values --bahor {
    font-family: Nabla;
    base-palette: 5;
  }
  p {
    font-family: Nabla, system-ui, sans-serif;
    font-size: 4rem;
    margin: 0;
  }
  p:nth-of-type(2) { font-palette: --bahor; }
</style>
<p>BAHOR</p>
<p>BAHOR</p>

Nimaga qarang: Chrome'da harflar uch o'lchamli va rangli — bu Nabla shriftining o'z ranglari (litsenziyasi — SIL OFL). Birinchi qator — shriftning asosiy, sariq-to'q sariq palitrasi. Ikkinchi qatorda biz --bahor degan palitra e'lon qildik: u Nabla'ning 5-raqamli tayyor palitrasini oladi — yashil-sariq, xuddi bahor kabi.

Chrome'da sinab ko'rdik: Nabla'da 0 dan 6 gacha yettita palitra bor. Nabla COLRv1 formatida, shuning uchun Safari'da boshqacha ko'rinishi mumkin. Rangli shriftlar sarlavha va logotip uchun qiziq, oddiy matnga ishlatilmaydi.

7. Ko'p uchraydigan xatolar

7.1 Variable faylga bitta qalinlik yozilgan

@font-face { font-weight: 400; } — variable fayl bo'lsa ham brauzer uni "faqat 400" deb biladi va 700 uchun soxta qalin chizadi. Tuzatish: font-weight: 400 700 — faylning haqiqiy oralig'i.

7.2 font-variation-settings bolada o'qlarni "yo'qotdi"

Otada "wght" 800, bolada "wdth" 60 — bola qalinligini yo'qotadi. Tuzatish: standart o'qlar uchun font-weight va font-stretch; font-variation-settings faqat maxsus o'qlarga.

7.3 tabular-nums ishlamayapti

Ikki sabab bo'lishi mumkin: shriftda tnum yo'q yoki keyinroq yozilgan font qisqa yozuvi uni normal ga qaytargan. Tuzatish: DevTools → Computed'da font-variant-numeric qiymatini tekshiring. U tabular-nums bo'lsa-yu, raqamlar baribir qiyshiq bo'lsa — shriftda tnum yo'q. Shriftning xususiyatlarini Google Fonts yoki Fontsource sahifasida ko'rasiz. Wakamai Fondue (wakamaifondue.com) kabi vositalar esa shrift faylini ochib, hamma o'q va xususiyatlarni ko'rsatadi.

7.4 Kerakmas o'qlar bilan og'ir fayl

Faqat qalinlik kerak, lekin to'rt o'qli 244 KB fayl yuklanmoqda. Tuzatish: faqat kerakli o'qlarni oling. Variable shrift 3 va undan ortiq qalinlik kerak bo'lganda yutadi. 1–2 qalinlik uchun oddiy fayllar yengilroq bo'lishi mumkin (Shriftlar, arxivlar va hujjat fayllari).

8. Mashqlar

1-mashq (oson): O'q va xususiyat

Bo'sh joylarni to'ldiring:

• wdth o'qini xususiyati boshqaradi.
• wght o'qini xususiyati boshqaradi.
• Narxlar ustunida raqamlar bir xil enli bo'lsin: font-variant-numeric: .
• "fi" ligaturasini o'chirish: font-variant-ligatures: .

Ishora: "Beshta standart o'q" jadvali, raqamlar va ligaturalar bo'limlari.

2-mashq (o'rta): Rustam akaning retsepti

«Bahor» blogida Rustam akaning osh retsepti chiqadi:

<ul>
  <li>Guruch — 1 kg</li>
  <li>Sabzi — 1 kg</li>
  <li>Go'sht — 1/2 kg</li>
  <li>Yog' — 1/4 kg</li>
</ul>

1. Ro'yxat Lora shriftida bo'lsin.
2. 1/2 va 1/4 chiroyli kasr belgisiga aylansin.
3. Raqamlar bir-birining ostida tekis tursin.

Ishora: ikki qiymat bitta font-variant-numeric ichida bo'sh joy bilan yoziladi. Kasr qiymati — font-variant-numeric jadvalida.

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Lora">
<style>
  ul {
    font-family: Lora, serif;
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums diagonal-fractions;
  }
</style>
<ul>
  <li>Guruch — 1 kg</li>
  <li>Sabzi — 1 kg</li>
  <li>Go'sht — 1/2 kg</li>
  <li>Yog' — 1/4 kg</li>
</ul>

3-mashq (qiyin): Stajyorning past darajadagi kodi

@font-face {
  font-family: "Bahor";
  src: url("../fonts/bahor.woff2") format("woff2");
  font-weight: 400;
}
h1 {
  font-family: "Bahor", serif;
  font-variation-settings: "wght" 700;
}
h1 span {
  font-variation-settings: "wdth" 90;
}
td {
  font-feature-settings: "tnum" 1;
  font: 1rem system-ui, sans-serif;
}

1. Qaysi qatorlar kutilgandek ishlamaydi va nega?
2. Kodni yuqori darajadagi xususiyatlar bilan qayta yozing.

Ishora: "Ko'p uchraydigan xatolar"dagi to'rt xatoni birma-bir tekshiring. Lora'da wdth o'qi bormi?

@font-face {
  font-family: "Bahor";
  src: url("../fonts/bahor.woff2") format("woff2");
  font-weight: 400 700;
}
h1 {
  font-family: "Bahor", serif;
  font-weight: 700;
}
td {
  font: 1rem system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

4-mashq: Portfolio qadami — sarlavhalar uchun variable qalinlik

Web shriftlar darsida portfolio sarlavhalariga variable shrift uladingiz (namunada Rubik, 300–900). Endi uning imkoniyatidan foydalanamiz.

1. @font-face dagi font-weight oralig'i shriftingiz oralig'iga mos ekanini tekshiring.
2. h1 ga 750, h2 ga 600 qalinlik bering — oraliq qiymat, alohida fayllarsiz.
3. h1, h2 ga font-synthesis: none qo'shing. Agar fayl ulanmay qolsa, buni darhol ko'rasiz.
4. DevTools → Computed → Rendered fonts'da sarlavhalar sizning shriftingizda chizilganini tekshiring.
5. (Ixtiyoriy) Firefox'da sahifani oching: Inspector → Fonts paneli variable shrift o'qlarini sirg'alg'ichlar bilan ko'rsatadi. Qiymatlarni jonli sinab ko'ring.

Ishora: "«Bahor»: bitta fayl, har qanday qalinlik" bo'limi va Shrift asoslari darsidagi font-synthesis.

@font-face {
  font-family: "Sarlavha";
  src: url("../fonts/sarlavha.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

h1,
h2 {
  font-family: "Sarlavha", system-ui, sans-serif;
  font-synthesis: none;
}

h1 {
  font-weight: 750;
}

h2 {
  font-weight: 600;
}

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Rubik:wght@300..900">
<style>
  body {
    font-family: system-ui, sans-serif;
    color: #1f2a24;
    background-color: #f7faf8;
  }
  h1,
  h2 {
    font-family: Rubik, system-ui, sans-serif;
    font-synthesis: none;
    color: #1f6f4a;
  }
  h1 { font-weight: 750; }
  h2 { font-weight: 600; font-size: 1.375rem; }
</style>
<h1>Loyihalar</h1>
<p>HTML qismida qilgan ishlarim.</p>
<h2>Choyxona «Bahor» sayti</h2>
<p>To'rt sahifali sayt: menyu, bron formasi va 404.</p>

9. Real ishda

• Tizim shriftlari ham variable bo'lib bormoqda: Shriftlar, arxivlar va hujjat fayllari darsidagi Windows 11'ning Segoe UI Variable shrifti shunday. Siz system-ui bilan uning qalinliklarini bepul olasiz.
• Raqamlar — dashboard, hisob-faktura, valyuta kursi, taymer — hamma joyda tabular-nums. Moliya va to'lov ilovalarida (Click, Payme kabi) summalar ustunining tekisligi ishonch uyg'otadi.
• Figma variable shrift o'qlarini va OpenType xususiyatlarini ko'rsatadi. Dizayner "tabular figures" desa, siz font-variant-numeric: tabular-nums yozasiz.
• Intervyuda so'raladi: "Variable shriftning afzalligi nima?", "font-variation-settings va font-weight farqi?", "Jadvalda raqamlarni qanday tekislaysiz?".

Xulosa

• Variable shrift — bitta fayl, o'qlar bo'ylab silliq o'zgarish: wght, wdth, opsz, slnt, ital.
• Standart o'qlarni oddiy xususiyatlar boshqaradi: font-weight, font-stretch, font-optical-sizing, font-style.
• font-variation-settings butun ro'yxatni almashtiradi — faqat maxsus o'qlar (GRAD) uchun.
• @font-face da variable fayl uchun qalinlik oralig'i yoziladi (400 700), aks holda soxta qalin chiqadi.
• font-variant-numeric: tabular-nums — ustun va taymer raqamlari tekis; shriftda tnum bo'lishi shart.
• Ligatura (fi) va kerning (To) odatda yoqiq; font-feature-settings — boshqa xususiyatlar uchun past darajadagi yo'l.

Keyingi dars: Qator balandligi va harf oralig'i — line-height ni birliksiz yozish, qatorlar orasidagi bo'shliq va harflar orasidagi masofa.

Manbalar

• MDN: "Variable fonts guide", "font-variation-settings", "font-optical-sizing", "font-variant-numeric", "font-variant-ligatures", "font-kerning", "font-feature-settings", "font-palette" — developer.mozilla.org
• W3C: "CSS Fonts Module Level 4" — w3.org/TR/css-fonts-4
• Microsoft Typography: "OpenType Layout tag registry" (xususiyat yorliqlari) — learn.microsoft.com/typography/opentype/spec/featuretags
• Google Fonts: Roboto Flex, Nabla litsenziyalari — github.com/google/fonts
• web-features (Baseline ma'lumotlari): "font-width", "COLRv1", "font-palette" — github.com/web-platform-dx/web-features