Tipografika qudratini ochish: CSS shrift xususiyatlari qiymatlari va OpenType'ga chuqur kirish

Veb-dizayn olamida tipografika ko'pincha foydalanuvchi tajribasining e'tibordan chetda qolgan qahramonidir. Biz aniq va estetik jihatdan jozibali interfeys yaratish uchun shrift oilalari, qalinligi va o'lchamlarini sinchkovlik bilan tanlaymiz. Ammo bundan ham chuqurroq kirsak-chi? Har kuni biz foydalanadigan shrift fayllari yanada boy, ifodali va professional tipografika sirlarini saqlayotgan bo'lsa-chi? Aslida, shunday. Bu sirlar OpenType xususiyatlari deb ataladi va CSS bizga ularni ochish uchun kalitlarni taqdim etadi.

Juda uzoq vaqt davomida matbaa dizaynerlari qo'llaydigan nozik boshqaruv — haqiqiy kichik bosh harflar, nafis ixtiyoriy ligaturalar va kontekstga mos raqam uslublari kabi narsalar — veb uchun imkonsizdek tuyulardi. Bugungi kunda endi unday emas. Ushbu keng qamrovli qo'llanma sizni CSS shrift xususiyatlari qiymatlari olamiga sayohatga olib chiqadi va haqiqatan ham murakkab va o'qilishi oson raqamli tajribalarni yaratish uchun veb-shriftlaringizning to'liq qudratidan qanday foydalanish mumkinligini o'rganadi.

OpenType xususiyatlari o'zi nima?

CSS'ga sho'ng'ishdan oldin, biz nimani boshqarayotganimizni tushunish juda muhim. OpenType - bu harflar, raqamlar va belgilarning asosiy shakllaridan tashqari juda ko'p ma'lumotlarni o'z ichiga oladigan shrift formatidir. Ushbu ma'lumotlar ichida shrift dizaynerlari "xususiyatlar" deb ataladigan keng ko'lamli ixtiyoriy imkoniyatlarni joylashtirishlari mumkin.

Bu xususiyatlarni dasturiy ravishda yoqish yoki o'chirish mumkin bo'lgan o'rnatilgan ko'rsatmalar yoki muqobil belgi dizaynlari (gliflar) deb o'ylang. Ular xakerlik yoki brauzer hiylalari emas; ular shriftni yaratgan tipograf tomonidan qilingan ongli dizayn tanlovlaridir. OpenType xususiyatini faollashtirganingizda, siz brauzerdan shrift dizaynining ma'lum bir maqsad uchun mo'ljallangan qismidan foydalanishni so'rayapsiz.

Bu xususiyatlar yaxshiroq oraliq masofasi bilan o'qishni osonlashtirish kabi sof funksional vazifalardan tortib, sarlavhaga dekorativ bezak qo'shish kabi sof estetik vazifalargacha bo'lishi mumkin.

CSS darvozasi: Yuqori darajali xususiyatlar va past darajali boshqaruv

CSS OpenType xususiyatlariga kirishning ikki asosiy usulini taqdim etadi. Zamonaviy, afzal ko'rilgan yondashuv yuqori darajali, semantik xususiyatlar to'plamidan foydalanishdir. Biroq, maksimal nazorat kerak bo'lganda, past darajali, kuchli "barchasini qamrab oluvchi" xususiyat ham mavjud.

Afzal usul: Yuqori darajali xususiyatlar

Zamonaviy CSS `font-variant` ostida bir qator xususiyatlarni, shuningdek, `font-kerning`ni taklif qiladi. Ular eng yaxshi amaliyot hisoblanadi, chunki ularning nomlari maqsadini aniq tasvirlaydi, bu esa kodingizni o'qilishi oson va qo'llab-quvvatlanadigan qiladi.

• font-kerning: Shriftda saqlangan kerning ma'lumotlaridan foydalanishni boshqaradi.
• font-variant-ligatures: Umumiy, ixtiyoriy, tarixiy va kontekstual ligaturalarni boshqaradi.
• font-variant-numeric: Raqamlar, kasrlar va chiziqli nol uchun turli uslublarni boshqaradi.
• font-variant-caps: Kichik bosh harflar kabi bosh harf o'zgarishlarini boshqaradi.
• font-variant-alternates: Stilistik alternativlar va belgi variantlariga kirishni ta'minlaydi.

Ushbu xususiyatlarning asosiy afzalligi shundaki, siz brauzerga nimaga erishmoqchi ekanligingizni aytasiz (masalan, `font-variant-caps: small-caps;`), va brauzer buni amalga oshirishning eng yaxshi yo'lini topadi. Agar ma'lum bir xususiyat mavjud bo'lmasa, brauzer buni muammosiz hal qila oladi.

Qurol: `font-feature-settings`

Yuqori darajali xususiyatlar ajoyib bo'lsa-da, ular mavjud bo'lgan har bir OpenType xususiyatini qamrab olmaydi. To'liq nazorat uchun bizda past darajali `font-feature-settings` xususiyati mavjud. U ko'pincha oxirgi chora vositasi sifatida ta'riflanadi, ammo u juda kuchli.

Sintaksis quyidagicha ko'rinadi:

font-feature-settings: "" , "" ;

• Xususiyat tegi: Muayyan OpenType xususiyatini aniqlaydigan, registrlarga sezgir, to'rt belgili satr (masalan, `"liga"`, `"smcp"`, `"ss01"`).
• Qiymat: Odatda butun son. Ko'pgina xususiyatlar uchun `1` "yoqilgan" va `0` "o'chirilgan" degan ma'noni anglatadi. Stilistik to'plamlar kabi ba'zi xususiyatlar ma'lum bir variantni tanlash uchun boshqa butun son qiymatlarini qabul qilishi mumkin.

Oltin qoida: Har doim birinchi navbatda yuqori darajali `font-variant-*` xususiyatlaridan foydalanishga harakat qiling. Agar sizga kerak bo'lgan xususiyat ular orqali mavjud bo'lmasa yoki yuqori darajali xususiyatlar ruxsat etmagan tarzda xususiyatlarni birlashtirishingiz kerak bo'lsa, unda `font-feature-settings` dan foydalaning.

Umumiy OpenType xususiyatlariga amaliy sayohat

Keling, CSS yordamida boshqarishingiz mumkin bo'lgan eng foydali va qiziqarli OpenType xususiyatlaridan ba'zilarini ko'rib chiqamiz. Har birining maqsadi, 4 belgili tegi va uni yoqish uchun CSS kodini ko'rib chiqamiz.

1-toifa: Ligaturalar - belgilarni nafis birlashtirish

Ligaturalar - bu ikki yoki undan ortiq belgilarni bitta, uyg'unroq shaklga birlashtiradigan maxsus gliflardir. Ular noqulay belgilar to'qnashuvining oldini olish va matn oqimini yaxshilash uchun zarurdir.

Standart ligaturalar

• Teg: `liga`
• Maqsad: `fi`, `fl`, `ff`, `ffi` va `ffl` kabi keng tarqalgan, muammoli belgi birikmalarini bitta, maxsus ishlab chiqilgan glif bilan almashtirish. Bu ko'plab shriftlarda o'qish qulayligi uchun asosiy xususiyatdir.
• Yuqori darajali CSS: `font-variant-ligatures: common-ligatures;` (brauzerlarda ko'pincha sukut bo'yicha yoqilgan)
• Past darajali CSS: `font-feature-settings: "liga" 1;`

Ixtiyoriy ligaturalar

• Teg: `dlig`
• Maqsad: Bular `ct`, `st` yoki `sp` kabi birikmalar uchun ko'proq bezakli va stilistik ligaturalardir. Ular o'qish uchun zarur emas va nafislik qo'shish uchun ko'pincha sarlavhalar yoki logotiplarda tanlab ishlatilishi kerak.
• Yuqori darajali CSS: `font-variant-ligatures: discretionary-ligatures;`
• Past darajali CSS: `font-feature-settings: "dlig" 1;`

2-toifa: Raqamlar - ish uchun to'g'ri raqam

Hamma raqamlar bir xil yaratilmagan. Yaxshi shrift turli kontekstlar uchun turli xil raqam uslublarini taqdim etadi va ularni boshqarish professional tipografikaning belgisidir.

Eski uslubdagi va tekis raqamlar

• Teglar: `onum` (Eski uslub), `lnum` (Tekis)
• Maqsad: Tekis raqamlar biz hamma joyda ko'radigan standart raqamlardir - barchasi bir xil balandlikda, bosh harflar bilan mos keladi. Ular raqamlarni vertikal ravishda tekislash kerak bo'lgan jadvallar, diagrammalar va foydalanuvchi interfeyslari uchun juda mos keladi. Eski uslubdagi raqamlar esa, aksincha, kichik harflar kabi yuqori va pastki chiqishlarga ega bo'lgan turli balandliklarga ega. Bu ularga e'tiborni tortmasdan matn paragrafiga muammosiz aralashish imkonini beradi.
• Yuqori darajali CSS: `font-variant-numeric: oldstyle-nums;` yoki `font-variant-numeric: lining-nums;`
• Past darajali CSS: `font-feature-settings: "onum" 1;` yoki `font-feature-settings: "lnum" 1;`

Proporsional va jadvalli raqamlar

• Teglar: `pnum` (Proporsional), `tnum` (Jadvalli)
• Maqsad: Bu raqamlarning kengligini boshqaradi. Jadvalli raqamlar bir xil kenglikdagi - har bir raqam bir xil gorizontal bo'shliqni egallaydi. Bu moliyaviy hisobotlar, kod yoki turli qatorlardagi raqamlar ustunlarda mukammal mos kelishi kerak bo'lgan har qanday ma'lumotlar jadvali uchun juda muhimdir. Proporsional raqamlar o'zgaruvchan kenglikka ega; masalan, '1' raqami '8' raqamidan kamroq joy egallaydi. Bu yanada tekis masofani yaratadi va yozma matnda foydalanish uchun idealdir.
• Yuqori darajali CSS: `font-variant-numeric: proportional-nums;` yoki `font-variant-numeric: tabular-nums;`
• Past darajali CSS: `font-feature-settings: "pnum" 1;` yoki `font-feature-settings: "tnum" 1;`

Kasrlar va chiziqli nol

• Teglar: `frac` (Kasrlar), `zero` (Chiziqli nol)
• Maqsad: `frac` xususiyati `1/2` kabi matnni haqiqiy diagonal kasr glifiga (½) chiroyli tarzda formatlaydi. `zero` xususiyati standart '0' ni 'O' bosh harfidan aniq ajratib turish uchun ustidan chiziq yoki nuqta tortilgan versiyasi bilan almashtiradi, bu texnik hujjatlarda, seriya raqamlarida va kodda juda muhimdir.
• Yuqori darajali CSS: `font-variant-numeric: diagonal-fractions;` va `font-variant-numeric: slashed-zero;`
• Past darajali CSS: `font-feature-settings: "frac" 1, "zero" 1;`

3-toifa: Kerning - masofa san'ati

Kerning

• Teg: `kern`
• Maqsad: Kerning - bu vizual jozibadorlik va o'qish qulayligini yaxshilash uchun alohida harf juftliklari orasidagi bo'shliqni sozlash jarayoni. Masalan, "AV" birikmasida V harfi A harfining ostiga biroz kirib turadi. Ko'pgina sifatli shriftlar yuzlab yoki minglab shunday kerning juftliklarini o'z ichiga oladi. U deyarli har doim sukut bo'yicha yoqilgan bo'lsa-da, siz uni boshqarishingiz mumkin.
• Yuqori darajali CSS: `font-kerning: normal;` (sukut bo'yicha) yoki `font-kerning: none;`
• Past darajali CSS: `font-feature-settings: "kern" 1;` (yoqilgan) yoki `font-feature-settings: "kern" 0;` (o'chirilgan)

4-toifa: Registr o'zgarishlari - bosh va kichik harflardan tashqari

Kichik bosh harflar

• Teglar: `smcp` (kichik harflardan), `c2sc` (bosh harflardan)
• Maqsad: Bu xususiyat haqiqiy kichik bosh harflarni yoqadi, ular kichik harflar balandligida, lekin bosh harflar shaklida bo'lgan maxsus ishlab chiqilgan gliflardir. Ular shunchaki to'liq o'lchamdagi bosh harflarni kichraytirish orqali yaratilgan "soxta" kichik bosh harflardan ancha ustundir. Ularni qisqartmalar, sarlavhalar yoki urg'u uchun ishlating.
• Yuqori darajali CSS: `font-variant-caps: small-caps;`
• Past darajali CSS: `font-feature-settings: "smcp" 1;`

5-toifa: Stilistik alternativlar - dizaynerning hissasi

Bu yerda tipografika haqiqatan ham ifodali bo'ladi. Ko'pgina shriftlar matnning ohangi yoki uslubini o'zgartirish uchun almashtirishingiz mumkin bo'lgan belgilarga muqobil versiyalari bilan birga keladi.

Stilistik to'plamlar

• Teglar: `ss01` dan `ss20` gacha
• Maqsad: Bu eng qiziqarli xususiyatlardan biri, lekin unga faqat `font-feature-settings` orqali kirish mumkin. Shrift dizayneri tegishli stilistik alternativlarni to'plamlarga guruhlashi mumkin. Masalan, `ss01` bir qavatli 'a' ni faollashtirishi, `ss02` 'y' ning dumini o'zgartirishi, `ss03` esa geometrikroq tinish belgilari to'plamini taqdim etishi mumkin. Imkoniyatlar to'liq shrift dizayneriga bog'liq.
• Past darajali CSS: `font-feature-settings: "ss01" 1;` yoki `font-feature-settings: "ss01" 1, "ss05" 1;`

Swashlar (Bezakli elementlar)

• Teg: `swsh`
• Maqsad: Swashlar - bu belgilarga qo'shilgan, ko'pincha so'zning boshi yoki oxirida paydo bo'ladigan dekorativ, yorqin bezaklardir. Ular skript va displey shriftlarida keng tarqalgan va maksimal ta'sirga erishish uchun juda tejamkorlik bilan ishlatilishi kerak, masalan, boshlang'ich harf yoki logotipdagi bitta so'z uchun.
• Past darajali CSS: `font-feature-settings: "swsh" 1;`

Shriftdagi mavjud xususiyatlarni qanday topish mumkin?

Bularning barchasi ajoyib, lekin siz tanlagan shrift aslida qaysi xususiyatlarni qo'llab-quvvatlashini qanday bilasiz? Xususiyat faqat shrift dizayneri uni shrift fayliga kiritgan bo'lsa ishlaydi. Buni bilishning bir necha yo'li bor:

1. Shrift xizmati namuna sahifalari: Ko'pgina nufuzli shrift ishlab chiqaruvchilari va xizmatlari (Adobe Fonts, Google Fonts va tijorat shrift ishlab chiqaruvchilari kabi) shriftning asosiy sahifasida qo'llab-quvvatlanadigan OpenType xususiyatlarini ro'yxatini va namoyishini beradi. Bu odatda boshlash uchun eng oson joy.
2. Brauzer ishlab chiquvchi asboblari: Zamonaviy brauzerlarda buning uchun ajoyib vositalar mavjud. Chrome yoki Firefox'da elementni tekshiring, "Computed" yorlig'iga o'ting va pastga aylantiring. Siz qaysi shrift fayli ishlatilayotganini ko'rsatadigan "Rendered Fonts" bo'limini topasiz. Firefox'da esa tanlangan element shrifti uchun mavjud bo'lgan har bir OpenType xususiyat tegini aniq ro'yxatlaydigan maxsus "Fonts" yorlig'i mavjud. Bu shrift imkoniyatlarini jonli ravishda o'rganishning juda kuchli usuli.
3. Ish stoli shrift tahlil vositalari: Mahalliy o'rnatilgan shrift fayllari (`.otf`, `.ttf`) uchun siz shrift faylini tahlil qiladigan va uning barcha xususiyatlari, qo'llab-quvvatlanadigan tillari va gliflari haqida batafsil hisobot beradigan maxsus ilovalar yoki veb-saytlardan (masalan, wakamaifondue.com) foydalanishingiz mumkin.

Ishlash samaradorligi va brauzerlarni qo'llab-quvvatlash

Ikki umumiy xavotir - bu ishlash samaradorligi va brauzer mosligi. Yaxshi xabar shundaki, ikkalasi ham a'lo darajada.

• Brauzerlarni qo'llab-quvvatlash: `font-feature-settings` xususiyati ko'p yillar davomida barcha asosiy brauzerlarda keng qo'llab-quvvatlanib kelinmoqda. Yangi `font-variant-*` xususiyatlari ham barcha brauzerlarda a'lo darajada qo'llab-quvvatlanadi. Ularni ishonch bilan ishlatishingiz mumkin.
• Ishlash samaradorligi: OpenType xususiyatlarini faollashtirish renderlash samaradorligiga deyarli ta'sir qilmaydi. Mantiq va muqobil gliflar allaqachon yuklab olingan shrift faylida mavjud; siz shunchaki brauzerning renderlash dvigateliga qaysi ko'rsatmalarga amal qilishni aytasiz. Ishlash xarajati shrift faylining o'zining hajmida, uning tarkibidagi xususiyatlardan foydalanishda emas. Ko'p xususiyatlarga ega shrift kattaroq fayl bo'lishi mumkin, ammo ularni faollashtirish deyarli bepul.

Eng yaxshi amaliyotlar va amaliy maslahatlar

Katta kuch bilan katta mas'uliyat keladi. Shrift xususiyatlaridan samarali va professional tarzda foydalanish yo'llari.

1. Progressiv takomillashtirish uchun xususiyatlardan foydalaning

OpenType xususiyatlarini yaxshilanish deb o'ylang. Sizning matningiz ularsiz ham mukammal o'qilishi va funksional bo'lishi kerak. Eski uslubdagi raqamlarni yoki ixtiyoriy ligaturalarni faollashtirish zamonaviy brauzerlardagi foydalanuvchilar uchun tipografik sifatni oshiradi, yaxshiroq va sayqallangan tajriba yaratadi.

2. Kontekst hamma narsadir

Xususiyatlarni o'ylamasdan global miqyosda qo'llamang. To'g'ri xususiyatni to'g'ri joyda qo'llang.

• Asosiy matn paragraflari uchun eski uslubdagi proporsional raqamlardan foydalaning.
• Ma'lumotlar jadvallari va narxlar ro'yxati uchun tekis jadvalli raqamlardan foydalaning.
• Asosiy matn uchun emas, balki sarlavhalar uchun ixtiyoriy ligaturalar va swashlardan foydalaning.
• Qisqartmalar yoki yorliqlar uchun ularni matnga aralashtirishga yordam berish uchun kichik bosh harflardan foydalaning.

3. CSS maxsus xususiyatlari bilan tartibga soling

Kodingizni toza va qo'llab-quvvatlanadigan saqlash uchun o'z xususiyatlar birikmalaringizni CSS Maxsus Xususiyatlarida (o'zgaruvchilarda) aniqlang. Bu ularni izchil qo'llashni va bir markaziy joydan yangilashni osonlashtiradi.

Misol:

            
:root {
  --font-features-body: "liga" 1, "onum" 1, "pnum" 1, "kern" 1;
  --font-features-heading: "liga" 1, "dlig" 1, "lnum" 1;
  --font-features-data: "lnum" 1, "tnum" 1, "zero" 1;
}

body {
  font-feature-settings: var(--font-features-body);
}

h1, h2, h3 {
  font-feature-settings: var(--font-features-heading);
}

.price, .code, .table-cell {
  font-feature-settings: var(--font-features-data);
}

            

              
                Copy
              
            
          

4. Noziklik asosiy omil

Eng yaxshi tipografika ko'pincha ko'rinmas bo'ladi. Maqsad - texnikaning o'ziga e'tiborni tortmasdan o'qish qulayligi va estetikasini yaxshilashdir. Mavjud bo'lgan har bir xususiyatni yoqish vasvasasidan qoching. To'g'ri kontekstda qo'llanilgan bir nechta yaxshi tanlangan xususiyatlar hamma narsaning tartibsiz aralashmasidan ko'ra ancha katta ta'sirga ega bo'ladi.

Xulosa: Veb-tipografikasining yangi chegarasi

CSS shrift xususiyatlari qiymatlarini o'zlashtirish har qanday veb-dasturchi yoki dizayner uchun transformatsion qadamdir. Bu bizni shrift o'lchamlari va qalinligini belgilashning asosiy mexanizmlaridan tashqariga, haqiqiy raqamli tipografika sohasiga olib chiqadi. Shriftlarimiz ichida joylashgan boy xususiyatlarni tushunish va ulardan foydalanish orqali biz matbaa va veb-dizayn o'rtasidagi uzoq yillik bo'shliqni yopishimiz mumkin, bu nafaqat funksional va qulay, balki tipografik jihatdan chiroyli va murakkab raqamli tajribalarni yaratadi.

Shunday qilib, keyingi safar loyiha uchun shrift tanlaganingizda, shu yerda to'xtamang. Uning hujjatlariga sho'ng'ing, brauzeringizning ishlab chiquvchi asboblari bilan tekshiring va uning yashirin qudratini kashf eting. Ligaturalar, raqamlar va stilistik to'plamlar bilan tajriba qiling. Bu tafsilotlarga e'tiboringiz ishingizni ajratib turadi va hamma uchun yanada takomillashgan va o'qilishi oson veb-sayt yaratishga hissa qo'shadi.