W3.CSS shriftlar
W3.CSS yordamida yangi shriftlarni qo‘shish juda oson.
- Foydalanish juda oson (faqat CSS va HTML)
- Tashqi shrift kutubxonalaridan (masalan, Google Fonts) cheklovsiz foydalanish
- Barcha zamonaviy brauzerlarda ishlaydi
Bu Roboto shrifti
Bu Sofia shrifti
Olovli Sofia
Making the Web!
Making the Web!
Making the Web!
Making the Web!
Making the Web!
Google Fonts shriftlaridan foydalanish
Google Fonts shriftlaridan bepul foydalanish mumkin va ular orasida tanlash uchun 1000 dan ortiq shrift bor.
Veb-sahifangizning head qismida Google shriftiga havola qiling:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
So‘ngra shriftni qayerda ishlatishni belgilovchi CSS kodini qo‘shing:
body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}
O‘zingiz sinab ko‘ring »
Yana bir misol
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
body,h1,h2,h3,h4,h5,h6 {font-family: Sofia, serif;}
O‘zingiz sinab ko‘ring »
Shrift klassini yaratish
Veb-sahifangizning head qismida Google shriftiga havola qiling:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
So‘ngra shrift klassini yarating:
Misol
.w3-sofia {
font-family: Sofia, cursive;
}
Veb-sahifangizda shrift klassidan foydalaning:
Making the Web!
Misol
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
.w3-tangerine {
font-family: 'Tangerine', serif;
}
<p class="w3-tangerine">Making the Web Beautiful!</p>
O‘zingiz sinab ko‘ring »
Making the Web!
Misol
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
O‘zingiz sinab ko‘ring »
Making the Web!
Misol
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">
O‘zingiz sinab ko‘ring »
Making the Web!
Misol
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
O‘zingiz sinab ko‘ring »
Making the Web!
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!