Font display swap məhsuldarlığı mətnsiz ekranların nə qədər sürətlə render olunduğuna təsir edən müasir veb-inkon inkişafının əsas amilidir. CSS font-display xassəsini swap dəyəri ilə istifadə etməklə tərtibatçılar brauzerə xüsusi veb-şrift arxa planda endirilərkən dərhal ehtiyat sistem şriftindən istifadə etməyi tapşırırlar. Bu yanaşma veb-səhifənin kritik ilkin yüklənmə mərhələsində istifadəçi təcrübəsinə və saytın istifadəyə yararlılıq göstəricilərinə mənfi təsir göstərə bilən, bəzən Görünməz Mətnin Parıltısı adlandırılan görünməz mətn ümumi problemini həll edir.
font-display: swap xassəsi nədir?
Font-display xassəsi şrift simasının endirilib-endirilməməsindən və nə vaxt endirilməsindən asılı olaraq necə render olunduğunu müəyyən edir. MDN Web Docs-a görə, font-display: swap şrift simasına həddindən artıq kiçik blok dövrü və sonsuz dəyişmə dövrü verir. Bu o deməkdir ki, əgər xüsusi şrift hazır deyilsə, brauzer dərhal ehtiyat şrifti göstərəcək. Xüsusi şrift faylı endirilməsini başa çatdırdıqdan sonra brauzer avtomatik olaraq ehtiyat şrifti nəzərdə tutulan dizayn şrifti ilə əvəz edir.
Şriftin yüklənmə vaxtı məhsuldarlıq üçün nə üçün vacibdir?
Veb məhsuldarlığı yalnız xam sürətlə deyil, həm də istifadəçilərin yüklənmə prosesini necə qavraması ilə bağlıdır. Brauzer xüsusi şriftlə qarşılaşdıqda həmin şrift əlçatan olana qədər mətnin render edilməsini dayandıra bilər ki, bu da istifadəçi təcrübəsində boşluq yaradır. Swap-ı seçməklə siz məzmunu müəyyən şrift növünün estetik seçimindən üstün tutursunuz. Daha yavaş mobil şəbəkələrdə olan istifadəçilər üçün bu dəyişiklik əhəmiyyətlidir, ஏünki bu, onlara başlıqları və əsas mətni oxumağa imkan verir.
font-display: swap-ı necə düzgün tətbiq etmək olar?
Tətbiq birbaşa olaraq həyata keçirilir və CSS fayllarınız daxilində @font-face bəyannamələrinizi yeniləməyi əhatə edir. Siz adətən mövzu qovluğunuzda və ya aktivlər kataloqunuzda tapılan əsas üslub cədvəlinizi tapmalı və xassəni hər bir şrift siması tərifinə əlavə etməlisiniz. Əgər Google Fonts kimi üçüncü tərəf xidmətindən istifadə edirsinizsə, siz adətən displey swap parametrini birbaşa xidmət tərəfindən təmin edilən idxal URL-sinə əlavə edə bilərsiniz.
- Əsas CSS faylınızda @font-face CSS bloklarınızı tapın.
- Hər @font-face bloku daxilində font-display: swap; sətrini əlavə edin.
- Brauzer tərtibatçı alətlərində Şəbəkə (Network) tabını yoxlayaraq tətbiqi təsdiqləyin.
- Məhdudlaşdırılmış şəbəkə mühitində səhifənin yüklənməsini müşahidə edərək tərtibat dəyişikliklərini yoxlayın.
- Vizual sıçrayışları minimuma endirmək üçün ehtiyat şriftlərinizin xüsusi şriftinizə bənzər şəkildə üslublaşdırıldığından əmin olun.
font-display dəyərlərinin müqayisəsi
| Dəyər | Blok Dövrü | Dəyişmə Dövrü |
|---|---|---|
| auto | Brauzerdən asılıdır | Brauzerdən asılıdır |
| block | Qısa blok, sonsuz dəyişmə | Yoxdur |
| swap | Həddindən artıq kiçik | Sonsuz |
| fallback | Həddindən artıq kiçik | Qısa |
Alien Road font-display strategiyalarını necə tətbiq edir
Alien Road olaraq biz istifadəçi əlçatanlığını və sürəti üstün tutan texniki auditlərə diqqət yetiririk. Tipik əməkdaşlıqda biz müştərinin şrift yüklənməsi dar boğazlarını müəyyən etmək üçün cari CSS arxitekturasını nəzərdən keçirməklə başlayırıq. Biz xüsusi şriftlərin yerli olaraq, yoxsa üçüncü tərəf provayderləri vasitəsilə host edildiyini yoxlayırıq. Yerli olaraq host edəriksə, fayl ölçüsünü azaltmaq üçün WOFF2 formatlarından istifadə edirik.
font-display: swap istifadə etməyin mənfi cəhətləri varmı?
Bu üsul sürət qavrayışını yaxşılaşdırsa da, əgər ehtiyat şrift xüsusi şriftdən fərqli ölçülərə malikdirsə, Layout Shift (Dərtibat Dəyişikliyi) yarada bilər. Əgər ehtiyat şrift əhəmiyyətli dərəcədə kiçik və ya genişdirsə, dəyişmə baş verdikdə mətn bloku genişlənə və ya darala bilər. Bunu yumşaltmaq üçün tərtibatçılar CSS font-size-adjust istifadə etməli və ya ehtiyat şrift ölçülərinin hədəf şriflə sıx uyğunlaşdırıldığından əmin olmalıdırlar.
font-display: swap-dan nə vaxt çəkinməlisiniz?
Dəyişmənin arzuolunmaz ola biləcəyi niş dizayn halları mövcuddur. Məsələn, əgər brendiniz eyniləşdirmə üçün yüksək dərəcədə spesifik şriftdən asılıdırsa və əsas sistem şriftindən keçid həddindən artıq kəskindirsə, blok seçə bilərsiniz. Lakin əksər e-ticarət saytları və ya məlumat bloqları üçün swap tərəfindən təmin edilən oxunaqlılıq kiçik estetik keçidi üstələyir.
Bu həftə haradan başlamaq lazımdır
Brauzer konsolunuzdakı Lighthouse hesabatından istifadə edərək cari şrift yüklənməsi konfiqurasiyanızı yoxlamaqla başlaya bilərsiniz. Yüklənmə mərhələsində görünməz mətnlə bağlı xəbərdarlıqları axtarın. Problemin səbəbi olan şriftləri müəyyən etdikdən sonra saytınızın CSS-ə swap xassəsini əlavə edin. Bunu əvvəlcə səhnələşdirmə saytında (staging site) yerinə yetirin.
- Chrome DevTools Coverage tabından istifadə edərək mövcud şrift fayllarını yoxlayın.
- Bütün qeyri-vacib şriftlər üçün font-display: swap daxil etmək üçün CSS fayllarını yeniləyin.
- Dəyişiklikdən əvvəl və sonra səhifə renderini müqayisə edərək Dərtibat Dəyişikliyini (Layout Shift) sınayın.
- Ehtiyat şriftlərin xarici görünüşcə oxşar olmasını təmin etmək üçün font-family yığınlarını təkmilləşdirin.
- Gələcəkdə istinad etmək üçün daxili sayt performansı jurnalınızda dəyişiklikləri sənədləşdirin.
Tez-Tez Verilən Suallar
font-display: swap SEO-ma zərər verəcəkmi?
Xeyr, o, adətən məzmunun görünməsi ilə əlaqədar əsas veb göstəricilərinə kömək etməklə SEO-nu yaxşılaşdırır. Mətnin dərhal oxunaqlı olmasını təmin etməklə siz axtarış sistemlərinin səhifə keyfiyyətini necə qiymətləndirdiyinin amili olan daha yaxşı istifadəçi təcrübəsi təmin edirsiniz.
Bu, bütün brauzerlərdə işləyirmi?
Əksər müasir brauzerlər font-display xassəsini dəstəkləyir. Köhnəlmiş brauzerlər xassəni tanımasa da, onu sadəcə olaraq nəzərə almayacaq və susmaya görə olan davranışlarını davam etdirəcəklər ki, bu da adətən mətnin yalnız şrift hazır olduqda göstərilməsidir.
Dəyişmə nəticəsində yaranan tərtibat dəyişikliyini necə düzəldə bilərəm?
Tərtibat dəyişikliyini düzəltməyin ən yaxşı yolu ehtiyat şrift ölçülərini xüsusi şriftinizə uyğunlaşdırmaqdır. Sistem şriftini hədəf şriftlə sıx uyğunlaşdırmaq üçün line-height və letter-spacing kimi CSS xassələrindən istifadə edin.
Google Fonts ilə swap istifadə edə bilərəmmi?
Bəli, şrift idxal URL-nizin sonuna &display=swap əlavə etməklə onu asanlıqla Google Fonts ilə istifadə edə bilərsiniz. Bu, faylları öz serverinizdə və ya məzmun çatdırılma şəbəkənizdə yükləmədən və host etmədən xüsusiyyəti tətbiq etməyin ən sadə yoludur.
Oxumağa davam edin: Veb Dizayn və İnkişaf · Veb Dizayn