Tüm Yazı Tiplerini Listele, herhangi bir web sayfasını tarar ve kullanımdaki her yazı tipi ailesinin eksiksiz bir envanterini sunar — CDN'lerden yüklenen web yazı tipleri, kendi kendine barındırılan yazı tipleri ve sistem yazı tipi yedekleri. Her yazı tipi canlı bir metin önizlemesi, yüklenen ağırlıkları ve stilleri, onu kullanan öğe sayısını ve CSS font-family bildirimi için tek tıklama kopyalama gösterir.
Beğendiğiniz bir web sitesinde yazı tiplerini tanımlamak, DevTools'ta öğeleri tek tek incelemeyi, hesaplanmış font-family özelliğini kontrol etmeyi veya aynı anda yalnızca bir yazı tipini algılayan tarayıcı uzantılarını kullanmayı gerektirirdi. Tüm Yazı Tiplerini Listele size tek bir görünümde tam resmi verir — sayfada yüklenen ve kullanılan her yazı tipi, her yazı tipinin tam olarak nasıl oluşturulduğunu gösteren canlı metin örnekleriyle. Araç, web yazı tipleri (@font-face veya Google Fonts aracılığıyla yüklenen) ile sistem yazı tipleri (Arial, Helvetica, Georgia, vb.) arasında ayrım yapar ve tam font-family yığınını gösterir. Her yazı tipi için hangi ağırlıkların yüklendiğini (400, 600, 700), hangi öğelerin kullandığını ve hangi yazı tipi boyutlarının uygulandığını görürsünüz. CSS bildirimini kopyalamak için herhangi bir yazı tipine tıklayın — kendi projenize yapıştırmaya hazır. Canlı önizleme, genel bir önizleme değil, sayfadan gerçek yazı tipi işlemeyi kullanır, böylece yazı tipinin sitedeki kullanılan boyutlarda ve ağırlıklarda tam olarak nasıl göründüğünü görürsünüz.
Sayfada gerçekten oluşturulan her font-family'yi listeler, Google Fonts, Adobe Fonts veya özel @font-face bildirimlerinden web yazı tipleri ve sistem yazı tipi yedekleri dahil. Bulunan benzersiz yazı tipi ailelerinin toplam sayısını gösterir.
Her yazı tipi, sayfaya yüklenen gerçek yazı tipi dosyası kullanılarak oluşturulan canlı bir metin örneği ("The quick brown fox jumps over the lazy dog") ile görüntülenir. Genel bir önizleme değil — gerçek oluşturmayı görürsünüz.
Her yazı tipi için hangi ağırlıkların yüklendiğini (Regular 400, Medium 500, SemiBold 600, Bold 700) ve italik varyantların mevcut olup olmadığını görün. Yazı tipinin yüklenen alt kümesini anlamanıza yardımcı olur.
Sayfadaki kaç öğenin her yazı tipini kullandığını görün. En çok kullanılan yazı tipi ilk olarak listelenir. Hangi yazı tiplerinin birincil (gövde metni) ve hangilerinin ikincil (yalnızca birkaç öğede kullanılıyor) olduğunu öğrenin.
Tam CSS font-family bildirimini (örn. font-family: 'Inter', sans-serif) panonuza kopyalamak için herhangi bir yazı tipi girişine tıklayın. Doğrudan stil sayfanıza yapıştırmaya hazır.
Her yazı tipi kaynağını gösterir: Google Fonts (belirli URL ile), Adobe Fonts, kendi kendine barındırılan (@font-face URL ile) veya sistem yazı tipi. Her yazı tipinin tam olarak nereden geldiğini öğrenin.
Güzel tipografiye sahip bir web sitesini ziyaret edin ve kullandığı her yazı tipini anında görün — adlar, ağırlıklar ve nereden geldikleri. Artık "bu yazı tipi ne?" tahminleri veya güvenilmez yazı tipi tanımlama araçları kullanmak yok.
Sayfanız kaç yazı tipi yüklüyor? İndirilen ancak uygulanmayan kullanılmamış yazı tipleri var mı? Tüm Yazı Tiplerini Listele gerçek kullanımı gösterir — yüklenen bir yazı tipini kullanan 0 öğe varsa, bu boşa harcanan bant genişliğidir.
Her sayfada Tüm Yazı Tiplerini Listele'yi çalıştırarak projenizin tipografisini belgeleyin. Doğru yazı tiplerinin ve ağırlıkların site genelinde tutarlı bir şekilde kullanıldığını doğrulayın — hileli font-family bildirimlerini yakalayın.
Beğendiğiniz bir yazı tipi tanımladınız ancak ücretli mi? Yazı tipi adını kopyalayın ve benzer özelliklere sahip ücretsiz alternatifleri arayın. Canlı önizleme tam olarak nasıl göründüğünü hatırlamanıza yardımcı olur.
Aynı yazı tiplerinin her yerde oluşturulduğunu doğrulamak için farklı tarayıcılarda aynı sayfada Tüm Yazı Tiplerini Listele'yi çalıştırın. Sistem yazı tipi yığınları işletim sistemleri arasında farklı şekilde çözülür — tutarsızlıkları yakalayın.
DevSuite Pro yüzen yuvasını açın ve Tüm Yazı Tiplerini Listele simgesine tıklayın. Araç sayfanın hesaplanmış stillerini ve @font-face kurallarını tarar.
Bir panel, kullanım sıklığına göre sıralanmış sayfada bulunan tüm yazı tiplerini görüntüler. Her giriş yazı tipi adını, önizleme metnini, ağırlıkları ve öğe sayısını gösterir.
Her yazı tipinin nasıl oluşturulduğunu görmek için canlı önizlemeler arasında kaydırın. Sayfanın başlık yazı tipini gövde yazı tipiyle vurgu yazı tipiyle karşılaştırın.
font-family CSS bildirimini kopyalamak için herhangi bir yazı tipi girişine tıklayın. Yazı tipinin kaynağını (Google Fonts sayfası, CDN URL'si vb.) ziyaret etmek için kaynak bağlantısına tıklayın.
font-family bildirimini CSS'nize yapıştırın ve kendi projenizde kullanmak için yazı tipini aynı kaynaktan yükleyin.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 39'dan fazla geliştirici aracının kilidini açın.
