Web Font CLS Sorunu: font-display ve Yedek Font Ayarı

Web font CLS sorunu, bir sayfa yüklenirken yazının önce yedek fontla çizilmesi, özel font gelince yeniden boyutlanması ve altındaki her şeyin kaymasıyla ortaya çıkar. Kısa cevap şu: fontu erken getirin, font-display değerini içerik türüne göre seçin ve yedek fontu özel fontun ölçülerine yaklaştırın. Bu yazı bu üç adımı sırayla açıyor, karar kurallarını ve bir ölçüm kontrol listesini veriyor. Bu bir teknik uygulama rehberidir ve hiçbir sıralama sonucu vaat etmez.

Bu rehber, tema fontunu değiştirdikten sonra sayfanın ilk saniyede zıpladığını fark eden site sahipleri, tasarımcıyla geliştirici arasındaki karar toplantısına hazırlanan SEO uzmanları ve Core Web Vitals raporundaki CLS uyarısının kaynağını arayan geliştiriciler için hazırlandı. Genel ölçüm çerçevesi için sayfa hızı ve Core Web Vitals rehberine bakabilirsiniz; burada yalnızca fontlara odaklanıyoruz.

Font Kaynaklı Kayma Nasıl Oluşur

Bir tarayıcı sayfayı çizmeye başladığında özel fontunuz henüz elinde olmayabilir. Bu anda iki seçeneği vardır: metni hiç göstermeyip beklemek ya da geçici olarak başka bir fontla göstermek. Hangisini yapacağı CSS'teki font-display ayarına ve tarayıcının varsayılanına bağlıdır. İki yol da yerleşimi bozabilir.

FOUT ve FOIT: iki farklı kayma biçimi

FOUT, stillenmemiş metnin kısa süre görünmesidir: yazı yedek fontla çıkar, özel font gelince değişir. FOIT ise görünmez metindir: yazı bir süre hiç çizilmez, font gelince belirir. web.dev'in CLS makalesi (yeni sekmede açılır) bu noktada açık konuşur: iki yaklaşım da yerleşim kaymasına yol açabilir.

Burada kafa karıştıran nokta şudur. Metin görünmez olsa bile yerleşim hesabına katılır. Makalenin ifadesiyle, metin görünmez olsa da yedek fontla yerleştirilir. Özel font gelince harf genişlikleri ve satır yükseklikleri değişir, satır sayısı artabilir ya da azalabilir ve metnin altındaki her öğe aşağı ya da yukarı hareket eder. Yani "metni gizleyelim, kayma olmasın" düşüncesi çoğu zaman işe yaramaz.

Kaymanın büyüklüğünü ne belirler

Kaymanın şiddeti üç şeye bağlıdır:

• Yedek fontla özel font arasındaki genişlik farkı. Daha geniş harfler daha çok satır kırılmasına yol açar.
• Satır yüksekliğini belirleyen üst ve alt ölçüler. Aynı punto ve aynı satır yüksekliğinde bile fontların kendi ascent ve descent değerleri farklıdır.
• Fontun ekranın neresinde kullanıldığı. Başlıkta ya da ilk ekrandaki büyük gövde metninde oluşan fark, altbilgideki küçük metinden çok daha fazla alanı etkiler.

Bir de ikon fontları vardır. web.dev font makalesine göre ikon fontlarının yedekleri çoğu zaman çok farklı görünür ve farklı anlam taşıyabilir; bu yüzden daha büyük kaymalara yol açarlar. Mümkünse SVG ile değiştirmek hem kaymayı hem erişilebilirliği iyileştirir.

CLS eşikleri

CLS için web.dev'in eşikleri şöyledir: 0,1 ve altı iyi, 0,25 üstü zayıf, ikisinin arası iyileştirme gerektirir. Makale, sayfa ziyaretlerinin en az yüzde 75'inde 0,1 veya altı hedeflemeyi öneriyor. Fontların CLS'ye katkısı genellikle tek başına büyük bir sayı değildir; ama görsel boyutları ve reklam yuvalarıyla toplandığında eşiği aşırtabilir. Bu yüzden fontu ayrı bir kalem olarak ölçmek gerekir.

Örnek senaryo: haber bülteni sayfası

Örnek senaryo olarak bir bülten sayfası düşünün. Başlık özel bir serif fontla, gövde metni sistem fontuyla yazılıyor. Başlık fontu geç geliyor ve başlık iki satırdan üç satıra çıkıyor. Altındaki giriş paragrafı, görsel ve abonelik formu bir satır yüksekliği kadar aşağı itiliyor. Kullanıcı tam o anda bir bağlantıya dokunmak üzereyse yanlış yere tıklar. Sorun fontun kendisinde değil, yedek ile özel fontun ölçülerinin uyuşmamasındadır.

font-display Seçenekleri ve Karar Kuralı

font-display, tarayıcıya fontun yüklenmesini beklerken ne yapacağını söyler. Değerler iki dönemle tarif edilir: engelleme dönemi (metin görünmez) ve değiştirme dönemi (yedek font görünür, özel font gelirse değişir). web.dev font makalesi (yeni sekmede açılır) varsayılan davranışı şöyle özetler: Chromium ve Firefox, web fontu yüklenirken metni 3 saniyeye kadar engeller; Safari süresiz engeller. Bu yüzden ayarı kendiniz yapmalısınız.

Değerlerin davranışı

Hangi durumda hangisi

Aşağıdaki kurallar web.dev'in önerilerini karar adımlarına çevirir:

1. Performans ve kararlılık öncelikliyse optional kullanın. Metin en fazla 100 ms gecikir ve font değişimi kaynaklı kayma olmaz. Font geç gelirse atlanır.
2. Metnin hemen görünmesini ve özel fontun yine de kullanılmasını istiyorsanız swap seçin, ancak fontu yeterince erken teslim edin ki kayma oluşmasın.
3. Metnin mutlaka özel fontla çıkması gerekiyorsa block seçin ve fontu erken getirin. Kayma yine olabilir; makale bunun swap kadar rahatsız edici olmayabileceğini söylüyor.
4. Tek bir sayfada tek strateji şart değildir. Marka ve ayırt edici öğeler için swap, gövde metni için optional kullanan karma bir düzen mümkündür.

Kısa kural: gövde metni için varsayılan tercihiniz optional olsun; yalnızca marka kimliği için özel fontun görünmesi şart olan küçük alanlarda swap kullanın.

optional'ın bedeli ve önyükleme ile birleşimi

optional kayma yaratmaz, ama bir bedeli vardır: font ilk çizimden önce gelmezse o sayfa yüklemesinde kullanılmaz. Bu, ilk ziyarette marka fontunu hiç görmeyen kullanıcı demektir. Çözüm fontu önyüklemektir. web.dev'in önyükleme makalesi (yeni sekmede açılır), preload ile font-display: optional birleşimini özel fontlarda yerleşim sıçramasını önlemenin en etkili yolu olarak tanımlar. Chrome 83'ten itibaren önyüklenen optional fontlarda tarayıcı ilk çizim turunu atlar ve font gelene ya da zaman aşımına kadar bekler; makale bu zaman aşımını 100 ms olarak veriyor ve değişebileceğini belirtiyor. Zaman aşımı kaçarsa yedek font kullanılır ve sonradan değişim olmaz.

Pratik not: genel yedek aile

Hangi font-display değerini seçerseniz seçin, font-family listesinin sonunda genel bir aile (sans-serif ya da serif) bulundurun. CLS makalesine göre bu olmadan Chrome varsayılan serif fontunu kullanır ve bu çoğu metin için daha kötü bir eşleşmedir.

Yedek Fontu Özel Fontun Ölçüsüne Yaklaştırma

Fontu erken getirmek kaymayı azaltır ama sıfırlamaz. Özellikle swap kullandığınız yerlerde ya da ilk ziyarette font geç geldiğinde yedek fontun özel fonta benzemesi gerekir. CLS makalesi bunun için size-adjust, ascent-override, descent-override ve line-gap-override alanlarını anar. font-display'in aksine bunlar fontun kendisini değil, yedek fontun ölçüsünü ayarlar.

Dört alan ne yapar

• size-adjust: Yedek fontun harf genişliğini ve yüksekliğini orantılı olarak büyütür ya da küçültür. Özel fontun ortalama harf genişliğine yaklaşmak için kullanılır.
• ascent-override: Satır kutusunun üst kısmının ölçüsünü ayarlar.
• descent-override: Satır kutusunun alt kısmının ölçüsünü ayarlar.
• line-gap-override: Satırlar arasındaki ek boşluğu ayarlar.

Bu alanlar bir @font-face kuralı içinde tanımlanır. Kural, yedek olarak kullanacağınız sistem fontunu local() ile işaret eder ve bir takma ad alır (örneğin "Marka Yedek"). Sonra font-family listesinde özel fontun ardına bu takma adı, en sona da genel aileyi yazarsınız.

Değerler nasıl hesaplanır

Chrome ekibinin yedek font yazısı (yeni sekmede açılır) formülleri verir. Önce yalnızca ölçü alanları için: ascent-override, fontun ascent değerinin UPM (em başına birim) değerine bölünmesidir; descent ve line gap için de aynısı geçerlidir. size-adjust de kullanıyorsanız:

• size-adjust = özel fontun ortalama harf genişliği / yedek fontun ortalama harf genişliği
• ascent-override = ascent / (UPM x size-adjust); descent ve line gap aynı biçimde

Değerler yüzde olarak yazılır. Ortalama harf genişliği genel olarak ancak yaklaşık hesaplanabilir. Yazı, İngilizce için harf sıklığına göre ağırlıklandırılmış küçük harf ve boşluk ortalamasını ya da yazı tipi tablosundaki xAvgCharWidth değerini kullanmayı öneriyor; ikincisinin sınırlamaları vardır. Türkçe metin için harf dağılımı farklı olduğundan, kendi içeriğinizden örnek bir paragraf alıp yedek ve özel fontla ölçmek daha güvenilir sonuç verir.

Yedek olarak hangi sistem fontu

Yazıdaki tavsiyeye göre sans-serif için Arial, serif için Times New Roman iyi yedeklerdir (Windows ve Mac'te bulunur, Android'de yoktur); Android'deki tek sistem fontu Roboto'dur. Windows'a özgü Calibri gibi fontlar yalnızca kullanıcının işletim sistemini biliyorsanız anlamlıdır. Pratikte sans-serif bir özel font için biri Arial, biri Roboto olmak üzere iki ayrı yedek tanımlanır; böylece iki platform da kapsanır.

Araçlar ve dikkat edilecek noktalar

Metrikleri okumak için yazı fontkit, Capsize, fontdrop.info ve FontForge'u sayar; Next.js ve Nuxt kullananlar için bu değerleri otomatik üreten paketler vardır. Hazır örnek değerleri kopyalamak yerine formülü kendi fontunuz için yeniden hesaplayın ve sonucu tarayıcıda doğrulayın. Platformlar dikey metrikleri farklı font tablolarından okuyabildiği için kontrolü en az iki tarayıcıda ve iki işletim sisteminde yapmak, küçük sapmaları baştan görmenizi sağlar. Yazı ayrıca line-height ile bu tekniğin yerine geçmeye çalışmamayı öğütler.

Tarayıcılar farklı kaynaklardan ölçü okur: örneğin Windows'ta Chromium için typo ya da win tablosu, Mac'te hhea tablosu kullanılır. Bu yüzden yedek eşleme ile bir Mac'te mükemmel görünen sonuç Windows'ta biraz farklı olabilir. Yazı, Google Fonts içindeki fontların yaklaşık yüzde 90'ında tek bir geçersiz kılma kümesinin işletim sistemleri arasında kullanılabildiğini belirtiyor; kendi fontunuz için bunu denemeden varsaymayın.

Karar kuralı: yedek eşleme ne zaman değer

Yedek font eşleme emek ister. Şu durumlarda karşılığını verir: özel fontu swap ile kullanıyorsanız, ilk ekranda büyük başlık ya da gövde metni özel fontla çiziliyorsa ve ölçümde font kaynaklı kayma görünüyorsa. Fontunuz optional ve önyüklemeliyse, çoğu ziyarette bu çalışmaya gerek kalmaz; yine de önbelleksiz ilk ziyaret için yedek eşleme bir güvenlik ağıdır.

Önyükleme, Alt Küme ve Teslim Hızı

Kayma çoğu zaman fontun geç gelmesinin sonucudur. Geç gelmeyen font az kayar. web.dev font makalesi ilk ilke olarak fontları olabildiğince erken yüklemeyi koyar.

Fontun indirilmesini ne tetikler

Önemli bir ayrıntı: bir @font-face tanımı tek başına indirme başlatmaz. Font, sayfada o fontu kullanan stil olduğunda iner. Dolayısıyla stil dosyasının içeriğini ve teslimini değiştirmek fontun ne zaman geleceğini değiştirir. Kullanılmayan CSS'i temizlemek, yüklenen font sayısını da azaltabilir. Makale, font tanımlarını ve kritik CSS'i head içine satır içi yazmayı çoğu site için faydalı bulur; ama font dosyalarını satır içi vermeyin, çünkü büyük gömülü kaynaklar ana belgeyi geciktirir. CSS'in yalnız bir kısmı satır içiyse tarayıcı gerekli fontları keşfetmeden önce tüm CSS'i bekler.

preload: güçlü ama dikkatli

preload fontu erken keşfettirir. Ancak makale üç uyarı yapar:

• Tarayıcı kaynaklarını diğer kaynaklardan çalar.
• unicode-range tanımlarını yok sayar.
• Tek bir font biçimi için kullanın.

Makalenin önerisine göre preload en çok, fontların harici stil dosyalarından başvurulduğu durumda en önemli fontlar için yararlıdır. Kök nedene daha yakın çözüm, tanımları satır içine almak ve stil dosyalarını ayarlamaktır. Kısa kural: yalnızca ilk ekranda kullanılan bir ya da iki font dosyasını önyükleyin, geri kalanı kendi akışında gelsin.

Üçüncü taraf font sunucuları ve bağlantı kurma

Fontları başka bir kaynaktan alıyorsanız bağlantı kurma süresi eklenir. Makale, stil dosyası kaynağı için preconnect ve font dosyasının kaynağı için ayrı bir crossorigin nitelikli preconnect önerir, çünkü font dosyaları CORS gerektirir. Google Fonts için bu, fonts.googleapis.com ve fonts.gstatic.com (crossorigin ile) demektir. Ayrıca Google Fonts için @import yerine link kullanılmasını önerir; çünkü link sürümü bir preconnect ipucu içerir ve stil dosyasının daha hızlı gelmesi olasıdır.

Kendi sunucunuzda barındırmak otomatik olarak daha hızlı değildir

Makale, Web Almanac verisine dayanarak üçüncü taraf fontların daha hızlı çizildiği örnekleri anar ve kendi sunucuda barındırmanın yalnızca CDN ve HTTP/2 kullanılıyorsa daha olası biçimde yardımcı olduğunu söyler. Karar vermek için bağlantı kurma dahil aktarım sürelerini karşılaştırın. Kendi sunucunuza alırsanız WOFF2 sıkıştırması ve alt kümeleme gibi sağlayıcının normalde yaptığı iyileştirmeleri sizin yapmanız gerekir.

WOFF2 ve unicode-range ile alt kümeleme

Makale WOFF2'yi en yeni, en geniş desteğe sahip ve en iyi sıkıştıran biçim olarak tanımlar; Brotli kullanır ve WOFF'tan yaklaşık yüzde 30 daha iyi sıkıştırır. unicode-range alanı, fontun hangi karakterleri kapsadığını söyler ve sayfada eşleşen karakter yoksa dosya inmez. Latin fontlar tipik olarak yaklaşık 100 ila 1000 glif içerir; CJK fontlarda bu 10 bini aşabilir. Google Fonts varsayılan olarak alt kümeleme yapar; kendi barındırmada bu adım kolay unutulur ve dosyalar gereğinden büyük kalır. Türkçe için seçtiğiniz alt kümenin ğ, ş, ı, İ gibi harfleri içerdiğini kontrol edin; eksik harf yedek fontla çizilir ve satır içinde tek tek kayma yaratabilir. Alt kümeleme ve kendi barındırma için font lisansının izin verip vermediğini de denetleyin.

Daha az font

En hızlı font hiç indirilmeyendir. Sistem fontları indirme gerektirmez ve gövde metni için iyi çalışır, görünümleri işletim sistemine göre değişir. Değişken fontlar birden çok statik dosyanın (ince, normal, kalın, ekstra kalın) yerini tutabilir; genellikle tek stil dosyasından büyüktür, bu yüzden çok sayıda stil ve ağırlık kullanan siteler için kazanç sağlar. Yalnızca iki ağırlık kullanıyorsanız değişken font sizi büyütebilir. Tipografiyi seçerken okunabilir içerik biçimlendirme rehberindeki ilkeleri de göz önünde bulundurun.

Sayfa Türüne Göre Uygulama Planı

Aynı kural her sayfada aynı sonucu vermez. Sayfanın ne iş yaptığına göre başlangıç noktasını seçin.

Uzun makale ve blog sayfaları

Okunacak çok metin vardır ve kullanıcı sayfayı kaydırarak ilerler. Burada gövde metninin kararlı kalması, markalı görünümden daha değerlidir. Gövde için optional, başlık için gerekiyorsa swap kullanın. Başlık fontunu önyükleyin ve yedek eşlemeyi öncelikle başlıkta uygulayın; çünkü başlık ekranın en üstündedir ve altındaki her şeyi itebilir.

Kategori ve liste sayfaları

Kartlar içinde kısa başlıklar, fiyat ya da etiket gibi küçük metinler çoktur. Burada tek tek metin kaymaları küçüktür ama kart sayısıyla çarpılır. Kartın metin alanına sabit bir minimum yükseklik vermek, satır kırılması değişse bile kartların altındaki öğelerin yerinde kalmasını sağlar. Font sayısını mümkün olduğunca azaltın ve kart metinleri için sistem fontunu düşünün.

Reklam yuvası içeren sayfalar

Reklam kapları genellikle kendi yüksekliklerini ayırarak yüklenir; font değişimi onların hemen üstündeki metnin satır sayısını değiştirirse yuva yer değiştirir ve CLS iki kaynaktan birikir. Bu tür sayfalarda önce font kaynaklı kaymayı sıfırlamak, geriye kalan kaymanın reklam kaynaklı olduğunu netleştirir. Reklam ve sayfa hızı dengesi için ayrı bir yaklaşım gerekir; bu rehber yalnızca fontu kapsar.

Sık yapılan hatalar

• Tüm ağırlıkları ve stilleri önyüklemek. Her önyükleme diğer kaynakların bant genişliğinden çalar.
• Font tanımını yalnızca harici stil dosyasında tutup bu dosyayı geç yüklemek.
• Genel yedek aileyi unutmak; tarayıcı varsayılan serif fontuna düşer.
• Yedek eşleme değerlerini başka bir fonttan kopyalamak.
• Ölçümü yalnızca hızlı bir masaüstü bağlantısında, önbellek açıkken yapmak. Font sorunu çoğunlukla ilk ziyarette ve yavaş ağda görünür.
• Başlığı ve ikonları aynı strateji içinde düşünmek. İkon fontları ayrı ele alınmalıdır.

Sonucu Ölçmek ve Doğrulamak

Düzeltmenin işe yaradığını görmeden bitmiş saymayın. Ölçüm iki katmanda yapılır.

Laboratuvarda hızlı döngü

Chrome DevTools'ta Ağ panelinin Zamanlama sekmesi fontların ne zaman geldiğini gösterir. Performans panelinde yerleşim kaymaları işaretlenir ve hangi öğenin kaydığı görülür. Ağı yavaşlatıp önbelleği kapatın; font gecikmesi ancak o koşulda ortaya çıkar. Yedek eşlemeyi denerken aynı sayfayı özel font engelliyken ve yüklüyken karşılaştırın: iki görünümde satır kırılmaları aynıysa eşleme başarılıdır.

Sahadan doğrulama

Laboratuvar tek bir cihaz ve ağ simülasyonudur. Gerçek kullanıcılarda font gecikmesi çok değişkendir. Raporlamayı CrUX alan verisi ile laboratuvar verisi farkını anlatan yazıdaki gibi okuyun: alan verisi 28 günlük kayan pencere olduğu için düzeltme raporda kademeli görünür. Tek günlük bir dalgalanmaya bakarak karar vermeyin. Mobil davranış da ayrıca doğrulanmalıdır; ayrıntı için mobil öncelikli indeksleme kontrol listesine göz atın.

Değişiklik sonrası bakım

Font kaynaklı kayma bir kez çözülüp unutulan bir iş değildir. Tema güncellemesi, yeni bir font ağırlığı, yeni bir başlık stili ya da bir yazı tipi sağlayıcısının dosya adresini değiştirmesi, düzgün çalışan düzeni sessizce bozabilir. Üç alışkanlık bunu önler:

1. Font tanımlarının ve yedek eşleme değerlerinin tek bir yerde, tek bir stil dosyasında tutulması. Dağınık tanımlar, hangi ağırlığın ne zaman indiğini anlamayı zorlaştırır.
2. Her tema ya da tasarım değişikliğinden sonra ağ yavaşlatılmış, önbelleksiz ve mobil ekran boyutunda tek bir kontrol turu yapılması. Bu tur birkaç dakika sürer ve sorunu yayına çıkmadan yakalar.
3. Font değiştirildiğinde yedek eşleme değerlerinin yeniden hesaplanması. Yeni fontun ortalama harf genişliği ve ölçüleri farklıdır; eski değerler artık yanlış yönde düzeltme yapar.

Ekip içinde bir kişinin bu kontrolden sorumlu olması, sorunun "kimseye ait olmayan performans maddesi" olarak ortada kalmasını engeller. SEO tarafında yapılacak iş de basittir: raporda CLS kötüleştiğinde, fontlar ayrı bir şüpheli olarak kontrol listesine alınır.

Kontrol listesi

• Gövde metni fontunun font-display değeri bilinçli seçilmiş mi (varsayılan olarak optional)?
• font-family listesinin sonunda genel bir aile var mı?
• İlk ekranda kullanılan en fazla bir ya da iki font dosyası önyükleniyor mu ve crossorigin niteliği var mı?
• Fontlar WOFF2 biçiminde mi ve gerekiyorsa unicode-range ile alt kümelenmiş mi?
• Türkçe karakterler alt kümede mevcut mu?
• Üçüncü taraf font kaynağı için iki preconnect (biri crossorigin) var mı?
• İkon fontları SVG ile değiştirilebilir mi?
• Yedek font için size-adjust ve ascent, descent, line-gap değerleri formülle hesaplanıp tarayıcıda doğrulandı mı?
• Yavaş ağda font gelmeden ve geldikten sonra aynı sayfanın satır kırılmaları karşılaştırıldı mı?
• Font kaynaklı kayma ayrı bir kalem olarak ölçüldü mü?

Karar tablosu

Sık Sorulan Sorular

font-display: swap CLS'yi tamamen çözer mi?

Hayır. swap metni hemen gösterir, ama özel font geldiğinde yedek fontla ölçüler farklıysa yerleşim kayar. web.dev'e göre swap, kayma yaratabilen seçenekler arasında metin çizimini en az geciktirenidir, fakat kaymayı yok etmez. Kaymayı azaltmak için fontu erken teslim edin ve yedek fontu size-adjust ile özel fonta yaklaştırın.

font-display: optional ne zaman kullanılmalı?

Performansı ve yerleşim kararlılığını öncelediğinizde, özellikle gövde metninde. Metin en fazla 100 ms gecikir ve font yeniden yerleşim yaratmaz. Bedeli, font ilk çizimden önce gelmezse o yüklemede kullanılmamasıdır. Önyükleme ile birleştirmek fontun zamanında gelme olasılığını artırır.

Yedek font ölçüleri nasıl hesaplanır?

size-adjust, özel fontun ortalama harf genişliğinin yedek fontunkine oranıdır. ascent-override, descent-override ve line-gap-override değerleri ilgili ölçünün UPM ile size-adjust çarpımına bölünmesiyle bulunur. Metrikleri fontkit, Capsize veya fontdrop.info gibi araçlarla okuyabilirsiniz. Sonucu her zaman tarayıcıda doğrulayın.

Fontu önyüklemek her zaman iyi mi?

Hayır. Önyükleme fontu erken keşfettirir ama diğer kaynakların bant genişliğinden çalar, unicode-range tanımlarını yok sayar ve tek biçim için kullanılmalıdır. Yalnızca ilk ekranda kullanılan kritik bir ya da iki font için uygulayın.

Google Fonts kullanmak mı, kendi sunucuma almak mı daha hızlı?

Belgeler ikisinin de otomatik olarak daha hızlı olmadığını söylüyor. Kendi barındırma, CDN ve HTTP/2 varsa yardımcı olma olasılığı daha yüksektir ve WOFF2 ile alt kümeleme sizin sorumluluğunuza geçer. Karar için bağlantı kurma dahil aktarım sürelerini ölçerek karşılaştırın.

İkon fontları neden daha büyük kayma yaratır?

İkon fontlarının yedekleri genellikle çok farklı görünür ve başka anlam taşıyabilir, bu yüzden yer değişimi büyük olur. Mümkünse SVG ile değiştirmek hem kaymayı azaltır hem de erişilebilirliği artırır.

Sonuç

Font kaynaklı CLS üç yerden ele alınır. Birincisi zamanlama: fontu erken getirin, yalnızca gerekli olanı önyükleyin, WOFF2 ve alt kümeleme kullanın. İkincisi davranış: gövde metninde optional, marka öğelerinde gerekirse swap seçin. Üçüncüsü ölçü: yedek fontu size-adjust ve ascent, descent, line-gap değerleriyle özel fonta yaklaştırın. Her değişikliği önce laboratuvarda satır kırılmalarını karşılaştırarak, sonra alan verisinde 28 günlük pencerede doğrulayın. Bu adımlar kullanıcı deneyimini iyileştirmeyi hedefler ve belirli bir sıralama sonucu garanti etmez.

Teknik rehber ve karşılaştırma içeriklerinin tutarlı, okunabilir ve kaynaklı yazılmasına ihtiyacınız varsa Akua Adforce'taki makale yazımı hizmetine göz atabilirsiniz; kapsam ve koşullar ürün sayfasında listelenir.