Chrome & Firefox DevTools ile Font Bulma

Tarayıcı DevTools, herhangi bir öğede render edilen tam fontu incelemenize olanak tanır. Nasıl kullanılacağını ve URL tarayıcısının daha hızlı seçenek olduğu zamanları açıklıyoruz.

Chrome DevTools - Render Edilen Fontlar

  1. 1Herhangi bir metne sağ tıklayın ve İncele'yi seçin (ya da Ctrl+Shift+I / Cmd+Option+I tuşlarına basın).
    Chrome sağ tıklama bağlam menüsünde İncele mavi olarak vurgulanmış
    Tam ekran görüntüsünü görüntüle
    Herhangi bir metne sağ tıklayın, ardından İncele'ye tıklayın
  2. 2Chrome, tıklanan öğe DOM ağacında vurgulanmış şekilde Öğeler panelini açar.
  3. 3Sağ panelde Hesaplanan sekmesine (Stiller'in yanındaki ikinci sekme) tıklayın.
  4. 4CSS özelliklerinin altına kaydırarak Render Edilen Fontlar bölümünü bulun.
    Chrome DevTools Hesaplanan sekmesi Render Edilen Fontlar'ı gösteriyor: woff2 dosyasından Inter Variable
    Tam ekran görüntüsünü görüntüle
    Hesaplanan sekmesi - aktif yazı tipini görmek için "Render Edilen Fontlar"a kaydırın
  5. 5Tarayıcının kullandığı tam yazı tipini, yüklenen kaynak dosyayı ve çizilen glif sayısını görürsünüz.

Firefox DevTools - Fontlar Sekmesi

  1. 1Herhangi bir metne sağ tıklayın ve İncele'yi seçin (ya da F12'ye basın). İnceleyici paneli açılır.
  2. 2İnceleyici'nin sağ panelinde (normalde Kurallar ve Hesaplanan'ın göründüğü yerde) Fontlar sekmesine tıklayın.
  3. 3Sol sütun, sayfada yüklenen tüm fontları listeler. Örnek, ağırlık aralığı, format ve kaynak URL'yi görmek için bir font adına tıklayın.
    Firefox DevTools Fontlar sekmesi - Inter Variable seçili, örnek ve detaylar gösteriliyor
    Tam ekran görüntüsünü görüntüle
    Firefox Fontlar sekmesi - tüm sayfa fontları solda, detaylar sağda

DevTools Yaklaşımının Sınırları

DevTools, bireysel öğeleri incelemek için harika çalışır, ancak bir sayfa tarafından yüklenen tüm fontların tam envanterini vermez. Tam bir denetim için - aşağıya URL'yi yapıştırın.

Daha Hızlı: URL ile Tam Sayfayı Tara

Herhangi bir URL yapıştırın ve tek taramada kullanılan tüm web fontlarının tam listesini alın - her @font-face kuralı, Google Fonts içe aktarımı ve CDN bağlantısı.

Sıkça Sorulan Sorular

Chrome'daki "Render Edilen Fontlar" ne demek?

"Render Edilen Fontlar", font-family alternatiflerini uyguladıktan sonra tarayıcının seçilen metni çizmek için gerçekte kullandığı yazı tipini gösterir. CSS font-family bildiriminden farklı olabilir.

Render edilen font neden CSS font-family'den farklı?

font-family, öncelikli bir yedek listesidir. İlk font yüklenemezse (eksik dosya, CORS hatası), tarayıcı bir sonraki adaya geçer. Render Edilen Fontlar, gerçekte kullanılanı gösterir.

DevTools ile bir sayfadaki tüm fontları bulabilir miyim?

Firefox'un Fontlar sekmesi, sayfa tarafından yüklenen tüm fontları gösterir. Chrome, öğeleri tek tek incelemeyi gerektirir. Tam bir envanter için yukarıdaki URL tarayıcısını kullanın.

URL tarayıcısı Google Fonts'u da tespit ediyor mu?

Evet - tüm font kaynakları tespit edilir: Google Fonts, Bunny Fonts, Fontshare ve kendi sunucunuzda barındırılan @font-face fontları.

Font denetleyiciye geri dön