3.1 Veb-şriftlər
Veb səhifələrdə şriftlərin qoşulması unikallıq və cazibədar dizayn yaratmaq üçün əsas rol oynayır. Veb-şriftlər istifadəçinın kompüterinə quraşdırılmamış şriftlərdən istifadəyə imkan yaradır, çünki onlar serverdən yüklənir. Google Fonts veb-şriftlərdən istifadə etmək üçün ən məşhur servislərdən biridir. Gəlin daha ətraflı baxaq, veb-şriftlərin və Google Fonts-un veb səhifələrdə necə qoşulacağına.
Veb-şriftlər — bunlar uzaq serverdən yüklənən və veb-səhifədə göstərilən şriftlərdir, hətta istifadəçinın cihazında quraşdırılmamış olsa belə. Bu, şriftlərin seçimində daha çox elastiklik təmin edir və daha cazibədar dizayn yaratmağa imkan verir.
Veb-şriftlərin qoşulması
Veb-şriftlərin @font-face ilə qoşulma nümunəsi:
İlk olaraq şrift fayllarını serverinizə yükləməlisiniz. Adətən, bu fayllar .woff, .woff2, .ttf, .eot və .svg formatlarında olur.
Addım 2. CSS-də @font-face-dən istifadə:
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
@font-face-dən istifadənin üstünlükləri:
- Nəzarət: şriftlərin seçilməsi və istifadəsi üzərində tam nəzarət
- Uyğunluq: müxtəlif brauzerlərlə uyğunluğu təmin etmək üçün fərqli şrift formatlarının dəstəklənməsi
- WOFF (Web Open Font Format): veb-şriftlər üçün geniş dəstəklənən format
- WOFF2: WOFF-un təkmilləşdirilmiş versiyası, daha yaxşı sıxılma ilə
- TTF (TrueType Font): əksər brauzerlər tərəfindən dəstəklənən standart şrift formatı
- EOT (Embedded OpenType): Internet Explorer tərəfindən dəstəklənən format
- SVG: SVG qrafikasında şriftlərin istifadəsi üçün format
3.2 Google Fonts
Google Fonts pulsuz şriftlər kolleksiyasını təqdim edir, hansı ki, onları asanlıqla veb-saytınıza inteqrasiya edə bilərsiniz. Google Fonts-dan istifadə etməyin üstünlükləri asan qoşulma və mövcud şriftlərin müxtəlifliyidir.
Google Fonts ilə şriftlərin qoşulması:
1. Google Fonts saytında şrift seçimi:
Google Fonts səhifəsinə keçin və istifadə etmək istədiyiniz şrift seçin.
2. Qoşulma üçün linkin əldə edilməsi:
Seçilmiş şrift səhifəsində lazımi format və stilləri seçin. Bundan sonra Google Fonts şriftin qoşulması üçün link yaradacaq.
3. HTML sənədinə linkin əlavə edilməsi:
Yaradılmış linki kopyalayın və onu HTML sənədinizin <head> bölməsinə əlavə edin.
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
1. Şriftin CSS-də tətbiqi:
font-family xüsusiyyətindən istifadə edərək şrifti səhifədəki elementlərə tətbiq edin.
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
HTML vasitəsilə Google Fonts-dan istifadə nümunəsi:
<html lang="az-AZ">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<p>Bu mətn Roboto şrifti istifadə edilərək göstərilir.</p>
</body>
</html>
3.3 CSS-də @import istifadə
Google Fonts şriftlərini @import qaydası ilə CSS-də qoşa bilərsiniz.
Google Fonts istifadə etməyin nümunəsi @import vasitəsilə:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
Google Fonts istifadə etməyin üstünlükləri:
- Sadə istifadə: Bir sətir kodla şriftlərinin inteqrasiyası asandır
- Böyük seçim: Fərqli üslub və kateqoriyalardan ibarət çoxlu şriftlərə çıxış imkanı
- Performans optimizasiyası: Şriftlər Google-un yüksək performanslı serverlərindən yüklənir
display="swap" atributu Google Fonts şriftlərinin qoşulmasında performansı və istifadəçi təcrübəsini yaxşılaşdırır. Veb şriftləri qoşarkən, brauzer əvvəlcə şrifti yükləməli və göstərməlidir ki, sonra mətn normal görsənsin. Bu, xüsusən də internet sürəti zəif olduqda gecikmələrə səbəb ola bilər. display="swap" bu problemi həll edir, brauzerə veb şrift yüklənənə qədər sistemdə mövcud olan şrifti göstərməyi təklif edir. Veb şrift yüklənən kimi sistem şrifti həmin şriftlə əvəz olunur.
Performansa təsiri:
Veb şriftlərdən istifadə edərkən onların veb səhifənin performansına təsirini nəzərə almaq vacibdir. Çoxlu sayda şrift və ya yazı tərzi (font weight) yükləmək səhifənin yüklənmə vaxtını artıra bilər. Bunun təsirini minimuma endirmək üçün aşağıdakı təkliflərə əməl edin:
- Minimal zəruri yazı tərzlərindən istifadə edin: yalnız həqiqətən ehtiyac duyduğunuz yazı tərzlərini seçin
display="swap"atributundan istifadə edin: bu istifadəçinin performans təəssüratını yaxşılaşdıraraq mətnin sistem şriftində göstərilməsini təmin edir- Şriftlərin çatdırılmasını optimizasiya edin: performansı artırmaq üçün keşləmə və ön yükləmə (preload) istifadə edin
GO TO FULL VERSION