W3.CSS shriftlar
W3.CSS shriftlari
W3.CSS ekranda oson o‘qiladigan shriftlardan foydalanadi.
Standart shriftlardan, o‘rnatilgan shrift klasslaridan yoki o‘z shriftlaringizdan foydalanishingiz mumkin.
Standart shriftlar
Verdana — W3.CSS’da ishlatiladigan standart shrift. Uning harflari orasidagi masofa qulay va u oson o‘qiladi.
Segoe UI — sarlavhalar uchun standart shrift. Uning harflari orasidagi masofa torroq, bu esa sarlavhaga bir nechta ko‘proq harf sig‘dirish imkonini beradi.
Bu sarlavha
Bu oddiy paragraf matni.
Shrift klasslari
W3.CSS to‘rtta shrift klassini taqdim etadi:
| Klass | Shrift uslubi |
|---|---|
w3-serif |
Serif |
w3-sans-serif |
Sans serif |
w3-monospace |
Monospace |
w3-cursive |
Cursive |
Serif
w3-serif klassi serif shriftidan foydalanadi:
The quick brown fox jumps over the lazy dog.
Sans Serif
w3-sans-serif klassi sans serif shriftidan foydalanadi.
The quick brown fox jumps over the lazy dog.
Misol
<p class="w3-sans-serif">The quick brown fox jumps over the lazy dog.</p>
O‘zingiz sinab ko‘ring »
Monospace
Monospace shriftda har bir belgi bir xil kenglikka ega.
Monospace shriftlar ko‘pincha kompyuter kodi uchun ishlatiladi.
const message = "Hello World";
Cursive
w3-cursive klassi qo‘lyozmasimon (cursive) shriftdan foydalanadi.
The quick brown fox jumps over the lazy dog.
Misol
<p class="w3-cursive">The quick brown fox jumps over the lazy dog.</p>
O‘zingiz sinab ko‘ring »
Shrift klasslarini matn o‘lchamlari bilan birlashtirish
Shrift klasslarini boshqa W3.CSS klasslari bilan birlashtirish mumkin.
Monospace sarlavha
Katta serif matn
Sans serif matn
Cursive qizil matn
Misol
<h1 class="w3-monospace">Monospace Header</h1>
<p class="w3-serif w3-xxlarge">Serif Large</p>
<p class="w3-sans-serif w3-large">Sans serif text</p>
<p class="w3-cursive w3-xlarge w3-text-red">Cursive red text</p>
O‘zingiz sinab ko‘ring »
O‘z shriftingizdan foydalaning
Siz faqat o‘rnatilgan W3.CSS shriftlari bilan cheklanib qolmaysiz.
O‘z shriftingizni tanlash uchun CSS’ning font-family xususiyatidan foydalaning.
Yuqoridagi misolda:
- Arial — afzal ko‘rilgan shrift
- Helvetica va sans-serif — zaxira shriftlar
Afzal ko‘rilgan shrift mavjud bo‘lmagan holat uchun har doim zaxira shriftlarni ko‘rsating.
Butun sahifa shriftini o‘zgartirish
Oddiy matn uchun ham, sarlavhalar uchun ham shriftlarni o‘zgartirishingiz mumkin.
Misol
body, h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
}
O‘zingiz sinab ko‘ring »
Vebda xavfsiz sans serif shriftlar
| Shrift oilasi | Xavfsiz zaxira shrift |
|---|---|
| Arial | Helvetica, sans-serif |
| Helvetica | Arial, sans-serif |
| Geneva | Verdana, sans-serif |
| Segoe UI | Arial, sans-serif |
| Tahoma | "Trebuchet MS", sans-serif |
| Trebuchet MS | Tahoma, sans-serif |
| Verdana | Geneva, sans-serif |
Vebda xavfsiz serif shriftlar
| Shrift oilasi | Xavfsiz zaxira shrift |
|---|---|
| Times New Roman | Times, serif |
| Georgia | serif |
Monospace shriftlar
Monospace shriftda barcha harflar bir xil kenglikni egallaydi.
Monospace shriftlar ko‘pincha kompyuter kodini ko‘rsatish uchun ishlatiladi.
| Shrift oilasi | Xavfsiz zaxira shrift |
|---|---|
| Monospace | monospace |
| Courier New | monospace |
| Lucida Console | Monaco, monospace |
| Monaco | Lucida Console, monospace |
Qo‘lyozma shriftlar
Vebda xavfsiz qo‘lyozma shriftlar yo‘q, lekin w3-cursive klassidan bemalol foydalanishingiz mumkin.
Google Fonts
W3.CSS bilan tashqi shriftlardan ham foydalanishingiz mumkin.
Google Fonts veb-sahifalaringizga qo‘shish mumkin bo‘lgan ko‘plab shriftlarni taqdim etadi.
Misol
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<style>
body {
font-family: Roboto, sans-serif;
}
</style>
O‘zingiz sinab ko‘ring »
Batafsil:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!