CSS maxsus shriftlar
CSS @font-face qoidasi
CSS @font-face qoidasi veb-sahifada ishlatish uchun shaxsiy shriftlarni belgilash va yuklash imkonini beradi.
Shrift foydalanuvchi kompyuterida o‘rnatilgan bo‘lishi shart emas.
Ishlatmoqchi bo‘lgan shriftingizni topib/olsangiz, uni shunchaki veb-serveringizga qo‘ying — kerak bo‘lganda u foydalanuvchiga avtomatik yuklab olinadi.
Keng tarqalgan shrift formatlari
Eng keng ishlatiladigan shrift formatlari: veb-sahifalar uchun WOFF/WOFF2 va kompyuter (desktop) uchun TTF/OTF.
WOFF/WOFF2 (Web Open Font Format)
WOFF/WOFF2 fayl hajmini kamaytirish uchun optimallashtirilgan bo‘lib, veb-sahifalarda ishlatish uchun ideal shrift formatidir. U 2009 yilda ishlab chiqilgan va hozirda W3C tavsiyasidir. WOFF/WOFF2 barcha asosiy brauzerlar tomonidan qo‘llab-quvvatlanadi.
TTF (TrueType shriftlari) va OTF (OpenType shriftlari)
TTF 1980-yillarning oxirida Apple tomonidan ishlab chiqilgan. OTF Apple va Microsoft tomonidan ishlab chiqilgan. TTF Mac OS va Microsoft Windows operatsion tizimlari uchun eng keng tarqalgan shrift formatidir. OTF TTF asosida qurilgan bo‘lib, boy to‘sham (typesetting) imkoniyatlarini qo‘llab-quvvatlaydigan yanada ilg‘or, masshtablanuvchi formatdir. Ikkala tur ham qulayligi va sifati tufayli mashhur, lekin vebda ishlatish uchun optimallashtirilmagan.
O‘z shaxsiy shriftingizdan foydalanish
@font-face qoidasida avval shaxsiy shrift uchun nom belgilaysiz (masalan, "myFont") — font-family deskriptorida, keyin src deskriptorida shrift fayliga ishora qilasiz.
Keyin shaxsiy shriftni HTML elementida ishlatish uchun font-family xossasi orqali shrift nomiga ("myFont") murojaat qilasiz:
Misol
@font-face
{
font-family: myFont; /* set name */
src: url(sansation_light.woff); /* url of the font */
}
p
{
font-family: myFont; /* use font */
}
O‘zingiz sinab ko‘ring »
Qalin shaxsiy shrift
Qalin matn uchun deskriptorlarni o‘z ichiga olgan yana bir @font-face qoidasini qo‘shishingiz kerak:
Misol
@font-face
{
font-family: myFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
O‘zingiz sinab ko‘ring »
"sansation_bold.woff" fayli boshqa shrift fayli bo‘lib, Sansation shriftining qalin belgilarini o‘z ichiga oladi.
Brauzer font-family "myFont" bo‘lgan matn qalin (bold) ko‘rsatilishi kerak bo‘lganda shu fayldan foydalanadi.
Maslahat: Bu usul bilan bir xil shrift uchun ko‘p @font-face qoidalariga ega bo‘lishingiz mumkin.
CSS @font-face deskriptorlari
Quyidagi jadval @font-face qoidasi ichida belgilanishi mumkin bo‘lgan shrift deskriptorlarini sanab o‘tadi:
| Descriptor | Tavsif |
|---|---|
| font-family | Majburiy. Shrift nomini belgilaydi |
| src | Majburiy. Shrift faylining URL manzilini belgilaydi |
| font-stretch | Ixtiyoriy. Shrift qanday cho‘zilishi kerakligini belgilaydi. Standart “normal” |
| font-style | Ixtiyoriy. Shrift uslubi qanday bo‘lishi kerakligini belgilaydi. Standart “normal” |
| font-weight | Ixtiyoriy. Shriftning og‘irligini belgilaydi. Standart “normal” |
| font-display | Ixtiyoriy. Shrift qanday yuklanishi va ko‘rsatilishini belgilaydi. Standart “avtomatik” |
| unicode-range | Ixtiyoriy. Shrift qo‘llab-quvvatlaydigan UNICODE belgilar oralig‘ini belgilaydi. Standart “U+0-10FFFF” |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!