@font-face
Misol
"myFirstFont" nomli shriftni belgilang va u joylashgan URL manzilni ko‘rsating:
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
CSS @font-face qoidasi tufayli veb-dizaynerlar endi "xavfsiz veb-shriftlar"dan birini ishlatishga majbur emas.
@font-face qoidasida avval shrift uchun nom belgilashingiz (masalan, myFirstFont), so‘ngra shrift fayliga ishora qilishingiz kerak.
Shriftni HTML elementi uchun ishlatish uchun font-family xususiyati orqali shrift nomiga (myFirstFont) murojaat qiling:
div {
font-family: myFirstFont;
}
Brauzerlarda qo‘llab-quvvatlash
@font-face qoidasi Edge, Chrome, Firefox, Safari va Opera’da qo‘llab-quvvatlanadi.
Jadvaldagi sonlar shrift formatini to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Shrift formati | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| SVG | Yo‘q | Yo‘q | Yo‘q | 3.2 | Yo‘q |
| EOT | 6.0 | Yo‘q | Yo‘q | Yo‘q | Yo‘q |
*Shrift formati faqat "installable" (o‘rnatiladigan) qilib belgilanganda ishlaydi.
Sintaksis
@font-face {
font-properties
}
| Shrift deskriptori | Qiymatlar | Tavsif |
|---|---|---|
| font-family | name | Majburiy. Shrift nomini belgilaydi. |
| src | url() | Majburiy. Shrift yuklab olinadigan URL manzil(lar)ni belgilaydi |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Ixtiyoriy. Shrift qanday cho‘zilishini belgilaydi. Standart qiymati — "normal" |
| font-style | normal italic oblique |
Ixtiyoriy. Shrift uslubini belgilaydi. Standart qiymati — "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Ixtiyoriy. Shrift qalinligini belgilaydi. Standart qiymati — "normal" |
| font-display | auto block swap fallback optional |
Ixtiyoriy. Shrift qanday yuklanishi va ko‘rsatilishini belgilaydi. Standart qiymati — "auto" |
| unicode-range | unicode-range | Ixtiyoriy. Shrift qo‘llab-quvvatlaydigan Unicode belgilar oralig‘ini belgilaydi. Standart qiymati — "U+0-10FFFF" |
Ko‘proq misollar
Misol
Qalin matn uchun deskriptorlarni o‘z ichiga olgan yana bir @font-face qoidasini qo‘shishingiz kerak:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
O‘zingiz sinab ko‘ring »
"sansation_bold.woff" fayli Sansation shriftining qalin belgilarini o‘z ichiga olgan boshqa shrift faylidir.
font-family qiymati "myFirstFont" bo‘lgan matn qismi qalin qilib render qilinishi kerak bo‘lganda, brauzerlar shu fayldan foydalanadi.
Shu tarzda bitta shrift uchun ko‘plab @font-face qoidalariga ega bo‘lishingiz mumkin.
Tegishli sahifalar
CSS darsligi: CSS veb-shriftlar
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!