Iconka va Google Fonts

DarslarWeb dasturlash

Iconka va Google Fonts

Saytga professional shrift va zamonaviy iconkalar qo'shish. Online va offline usullari bilan.

30 daqiqa
CSS Advanced — Dars 13

Iconka va Google Fonts

Ikki kichik qadam — sayt ikki barobar professional ko'rinadi: to'g'ri shrift va to'g'ri iconka.

@font-faceGoogle Fontsiconsvg

Dars rejasi

5 ta mavzu
  1. 01Shrift nima uchun muhim?
  2. 02Google Fonts — online ulash
  3. 03Shriftni offline ulash (@font-face)
  4. 04Iconkalar — bepul manbalar
  5. 05Lucide va SVG iconkalar

1. Shrift nima uchun muhim?

Shrift — saytning ovozi. Bir xil matn turli shriftlarda mutlaqo boshqacha his uyg'otadi. Oddiy Arial va chiroyli Inter o'rtasidagi farq — saytni «arzon» yoki «professional» qilishi mumkin.

  • Sans-serif (Inter, Poppins) — zamonaviy, toza.
  • Serif (Playfair, Lora) — klassik, jurnalistik.
  • Mono (JetBrains Mono, Fira Code) — kod uchun.
  • Display (Bebas Neue) — katta sarlavhalar uchun.

2. Google Fonts — online ulash

Google Fonts — 1500+ dan ortiq bepul shriftlar to'plami. Ulashning eng oson usuli — <link> tegi orqali.

  1. fonts.google.com saytiga kiring.
  2. Yoqqan shriftni tanlang (masalan, Inter).
  3. Kerakli qalinliklarni tanlang (400, 500, 700).
  4. «Get embed code» tugmasini bosing.
  5. Berilgan <link> kodini HTML faylning <head> ichiga qo'ying.
  6. CSS'da font-family: 'Inter', sans-serif; deb yozing.
index.html
1<head>
2  <link rel="preconnect" href="https://fonts.googleapis.com">
3  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
4  <link
5    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap"
6    rel="stylesheet"
7  >
8</head>
style.css
1body {
2  font-family: 'Inter', sans-serif;
3}
4

5h1 {
6  font-family: 'Inter', sans-serif;
7  font-weight: 800;
8}
3 xil Google shriftni solishtiring
Natijajonli

3. Shriftni offline ulash (@font-face)

Ba'zan internet bo'lmasligi mumkin yoki siz saytni tezroq ishlatishni istaysiz. Shunda shrift faylini kompyuteringizga yuklab olib, loyihaga qo'shib ishlatasiz.

  1. Google Fonts yoki fonts.google.com'dan shriftni ZIP bilan yuklab oling.
  2. Loyihangizda fonts/ papka yarating.
  3. .ttf yoki .woff2 fayllarni o'sha papkaga joylang.
  4. CSS'da @font-face yozib, shriftga nom bering.
style.css
1@font-face {
2  font-family: 'MeningShriftim';
3  src: url('fonts/Inter-Regular.woff2') format('woff2'),
4       url('fonts/Inter-Regular.ttf')   format('truetype');
5  font-weight: 400;
6  font-display: swap;
7}
8

9@font-face {
10  font-family: 'MeningShriftim';
11  src: url('fonts/Inter-Bold.woff2') format('woff2');
12  font-weight: 700;
13  font-display: swap;
14}
15

16body {
17  font-family: 'MeningShriftim', sans-serif;
18}

4. Iconkalar — bepul manbalar

Iconka — saytning vizual tilidir. To'g'ri tanlangan iconka matnga qaraganda tezroq tushuntiradi. Quyida zamonaviy saytlar ishlatadigan eng yaxshi bepul manbalar.

Tavsiya etiladi

Lucide Icons

1400+ toza, zamonaviy iconka. SVG va React formatda. Aynan shu sayt ham Lucide ishlatadi.

Klassik

Font Awesome

Eng mashhur iconka to'plami. <link> orqali ulash va CSS klass bilan ishlatish juda oson.

Google

Material Symbols

Google'ning rasmiy iconkalari — 2500+ ta. Google Fonts orqali ulanadi.

Katta tanlov

Heroicons

TailwindCSS jamoasining iconkalari. Outline va solid, juda toza dizayn.

5. Lucide va SVG iconkalar

SVG — eng zamonaviy usul. Iconka matn kabi — rangi color, kattaligi width/height orqali boshqariladi.

1<!-- Lucide iconkasini to'g'ridan-to'g'ri SVG sifatida qo'yasiz -->
2<svg xmlns="http://www.w3.org/2000/svg"
3     width="24" height="24" viewBox="0 0 24 24"
4     fill="none" stroke="currentColor"
5     stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
6  <path d="M20 6 9 17l-5-5"/>
7</svg>
SVG iconka + matn
Natijajonli

Font Awesome ishlatsangiz — <link> qo'shasiz, keyin shunchaki <i class="fa-solid fa-heart"></i> deb yozasiz. Google Material Symbols esa <span class="material-symbols-outlined">favorite</span> shaklida ishlatiladi.

Kichik test

0 / 4

1.Google Fonts'ni eng oson ulash usuli qanday?

2.Shriftni offline ishlatish uchun qaysi CSS qoidasi kerak?

3.SVG iconka matn rangiga mos bo'lishi uchun qanday qiymat kerak?

4.display=swap nimaga kerak?

Mustaqil ish

0 / 6