Google shriftlari
Google shriftlari
HTML’dagi standart shriftlardan birortasini ishlatishni istamasangiz, Google shriftlaridan foydalanishingiz mumkin.
Google shriftlari bepul ishlatiladi va 1000 dan ortiq shrift taklif etadi.
Google shriftlaridan qanday foydalaniladi
<head> bo‘limiga maxsus uslublar jadvali havolasini qo‘shing va so‘ng shriftga CSS’da murojaat qiling.
Misol
Bu yerda biz Google Fonts-dan "Sofiya" nomli shriftdan foydalanmoqchimiz:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
Natija:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Misol
Bu yerda biz Google Fonts-dan "Trirong" nomli shriftdan foydalanmoqchimiz:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
Natija:
Trirong Font
Lorem ipsum dolor sit amet.
123456790
Misol
Bu yerda biz Google Fonts-dan "Audiowide" nomli shriftdan foydalanmoqchimiz:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
Natija:
Audiowide Font
Lorem ipsum dolor sit amet.
123456790
Eslatma: CSS’da shrift ko‘rsatganda, har doim kamida bitta zaxira shriftni ko‘rsatib qo‘ying (kutilmagan xatti-harakatlardan qochish uchun). Shuning uchun bu yerda ham ro‘yxat oxiriga umumiy shrift oilasini (serif yoki sans-serif kabi) qo‘shishingiz kerak.
Barcha mavjud Google Shriftlari ro‘yxati uchun How To - Google Fonts qo‘llanmamizga tashrif buyuring.
Bir nechta Google shriftlaridan foydalanish
Bir nechta Google shriftini ishlatish uchun shrift nomlarini vertikal chiziq belgisi (|) bilan ajratib qo‘ying:
Misol
Request multiple fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia",
sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
Natija:
Audiowide Font
Sofia Font
Trirong Font
O‘zingiz sinab ko‘ring »
Eslatma: Bir nechta shrift so‘rash veb-sahifalaringizni sekinlashtirishi mumkin! Bunga e’tiborli bo‘ling.
Google shriftlarini uslublash
Albatta Google shriftlarini CSS bilan xohlagancha ushlab kelishingiz mumkin!
Misol
"Sofia" shriftini ushlab kelish:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
Natija:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Shrift effektlarini yoqish
Google ishlatishingiz mumkin bo‘lgan turli shrift effektlarini ham yoqib qo‘ygan.
Avval Google API’ga effect= qo‘shing, keyin maxsus effekt ishlatadigan elementga maxsus klass nomini qo‘shing. Klass nomi har doim effectnamefont-effect- bilan boshlanib, effectname bilan tugaydi.
Misol
"Sofia" shriftiga fire (olov) effektini qo‘shish:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on
Fire</h1>
</body>
Natija:
Sofia on Fire
O‘zingiz sinab ko‘ring »
Bir nechta shrift effekti so‘rash uchun effekt nomlarini vertikal chiziq belgisi (|) bilan ajratib qo‘ying:
Misol
"Sofia" shriftiga bir nechta effekt qo‘shish:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline
Effect</h1>
<h1 class="font-effect-emboss">Emboss
Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple
Shadow Effect</h1>
</body>
Natija:
Neon Effect
Outline Effect
Emboss Effect
Multiple Shadow Effect
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!