FontLens

Chrome için ücretsiz uzantı

Bu hangi font? Sağ tıklayın ve CSS'i görün

Herhangi bir web sitesindeki metni seçin, sağ tıklayın ve Inspect font with FontLens'i seçin. Sayfanın üzerinde açılan font inceleyici; aileyi, boyutu, kalınlığı, satır yüksekliğini ve rengi gösterir, kopyalamaya hazır CSS sunar ve fontu indirmek için bir düğme içerir.

Chrome'a ekle — ücretsiz

Ayrıca Edge, Brave, Opera ve diğer Chromium tabanlı tarayıcılarda da çalışır.

FontLens inceleyicisi: büyük harf yüksekliği, x yüksekliği ve taban çizgisi kılavuzları arasındaki Ag örneği, font özellikleri ve Tailwind kodu

Bir bakışta

Ne işe yarar
Seçtiğiniz metnin fontunu gösterir: aile, boyut, kalınlık, satır yüksekliği, renk ve varsayılandan farklı diğer stiller; CSS kopyalamaya hazırdır.
Nasıl başlanır
Metni seçin, sağ tıklayın ve Inspect font with FontLens'i seçin. Menü öğesi yalnızca metin seçiliyken görünür.
Şu biçimlerde kopyala
CSS, SCSS, SASS veya Tailwind; boyut px, rem, pt ya da em olarak ayarlanabilir.
Font dosyası
Download font, web fontunu @font-face kaynağından alır. Kullanmadan önce font lisansını kontrol edin.
Kimler için
Web tasarımcıları, front-end geliştiricileri, erişilebilirlik denetçileri ve CSS öğrenen öğrenciler.
Fiyat
Ücretsiz. Hesap veya ücretli sürüm yok.
Veriler
Tarayıcınızda çalışır. Sunucu veya analiz yok. Yalnızca sizin başlattığınız font indirme isteği yapılır.
Çalıştığı tarayıcılar
Chrome ve Chrome Web Store'dan uzantı yükleyen diğer Chromium tarayıcıları. Firefox ve Safari'de çalışmaz.
Sınırlar
Web sayfalarındaki gerçek metnin CSS'ini okur. Görsellerde, canvas'larda, PDF'lerde veya Chrome'un kendi sayfalarında bulunan metinleri okuyamaz.
Sürüm
2.2.0, güncellenme 23 Ekim 2026

Fonta ulaşmak için iki tık

  1. 1

    Metni seçin

    Herhangi bir web sayfasındaki başlık, paragraf veya düğme etiketi.

  2. 2

    Sağ tıklayın

    Inspect font with FontLens'i seçin. İnceleyici sayfanın üzerinde açılır; aileyi, boyutu, kalınlığı, satır yüksekliğini ve rengi gösterir.

  3. 3

    Kopyalayın veya ayarlayın

    CSS ya da Tailwind kodunu kopyalayın, canlı önizlemede başka bir boyut veya renk deneyin ya da font dosyasını indirin.

Neden açılıyor

Aa

Yazı tipini bulun

Beğendiğiniz bir başlık mı gördünüz? Seçip font ailesini, kalınlığını ve kaynağını öğrenin: Google Fonts, Adobe Fonts veya sitenin kendisi.

{ }

Tasarımla karşılaştırın

Canlı sayfadaki değerleri tasarım dosyasıyla karşılaştırın, ardından kuralları CSS, SCSS, SASS veya Tailwind olarak kopyalayın.

4.5:1

Kontrastı kontrol edin

AA ve AAA işaretleriyle kontrast oranını görün; tasarımı yayınlamadan önce daha koyu metin veya daha açık arka plan deneyin.

Ne işe yarar

  • Kılavuzlu font örneği

    Yığındaki ilk aile, fontun kendisinden ölçülen büyük harf yüksekliği, x yüksekliği ve taban çizgisi kılavuzları arasında gösterilir.

  • kod biçimi

    CSS, SCSS, SASS ve Tailwind. Kodun tamamını veya tek satırı kopyalayın; son kullandığınız biçim hatırlanır.

  • Birimleriniz

    Boyutu alanlarda ve kod parçasında px, rem, pt veya em olarak görün. rem, sayfanın kök boyutunu izler.

  • Font kaynağı

    Bir rozet fontun nereden geldiğini gösterir: Google Fonts, Adobe Fonts, sitenin barındırdığı font veya bilgisayarınızdaki sistem fontu.

  • Kontrast kontrolü

    Normal ve büyük metin için AA ve AAA işaretleriyle metin ve arka plan oranı; renkleri değiştirdikçe güncellenir.

  • Download font

    Dosyayı @font-face kaynağından alır ve aile adına göre adlandırır. Sunucu indirmeyi engellerse kaynak yeni sekmede açılır.

DevTools'ta font bulmak neden bu kadar uzun sürüyor?

Bir sayfa font listesini tanımlar ve tarayıcı elindeki ilk fontu kullanır. Hangisi olduğunu bulmak için DevTools'u açar, öğeyi bulur, Computed panelini okur, sonra font dosyasını Network panelinde ararsınız. Boyut, kalınlık, satır yüksekliği ve renk farklı yerlerde bulunur.

FontLens, seçtiğiniz metnin hesaplanan stilini okuyup tek panelde toplar: font ailesi yığını, ilk ailenin örneği, değerler, fontun kaynağı ve CSS. Sayfanın CSS'ini okuduğu için görselin içindeki fontu bulamaz.

Hiçbir şey tarayıcınızdan çıkmaz

  • Hesap ve sunucu yok

    FontLens tarayıcınızda çalışır. Analiz veya izleme yapmaz.

  • Seçtiğiniz metni okur

    İnceleyici, sağ tıkladığınız metnin stillerini okur. Sayfayla ilgili hiçbir bilgi gönderilmez.

  • Dört izin

    Sağ tıklama menü öğesi için bağlam menüsü, inceleyicinin açılması için etkin sekme ve sayfa erişimi; örnek metninizi, birimi ve kod biçimini saklamak için depolama.

Chrome DevTools ve FontLens

Chrome DevTools ve FontLensChrome DevToolsFontLens
Metindeki fontu bulmaİncele, öğeyi bul, Computed panelini açMetni seç, sağ tıkla, menüden tek seçenek
Tailwind veya SCSS olarak kopyalamaHayır, değerleri tek tek kopyalayınCSS, SCSS, SASS veya Tailwind sekmesi
Fontun kaynağıFont dosyasını Network panelinde arayınRozet: Google Fonts, Adobe Fonts, barındırılan veya sistem fontu
Font dosyasını indirmeNetwork veya Sources'ta bulup kaydedinTek düğme
Kontrast kontrolüStyles panelinin renk seçicisindeCanlı önizlemenin yanında AA ve AAA işaretleri
FiyatYerleşikÜcretsiz

Sorular

Bir web sitesinin hangi fontu kullandığını nasıl bulurum?

FontLens'i Chrome'a ekleyin, sitedeki bir metni seçin, sağ tıklayın ve Inspect font with FontLens'i seçin. Font ailesini, boyutu, kalınlığı, satır yüksekliğini, rengi ve fontun kaynağını görürsünüz.

Bir web sitesindeki fontun CSS'ini nasıl kopyalarım?

İnceleyicide CSS, SCSS, SASS veya Tailwind sekmesini seçip Copy all'a basın ya da tek satırı kopyalayın. Gerekirse önce birimi px, rem, pt veya em olarak değiştirin.

Bir web sitesinden font indirebilir miyim?

Metin web fontu kullanıyorsa Download font, dosyayı @font-face kaynağından alır. Sistem fontunun indirilecek dosyası yoktur. Kendi projenizde kullanmadan önce font lisansını kontrol edin.

FontLens bir görseldeki veya PDF'teki fontu bulabilir mi?

Hayır. Web sayfalarındaki gerçek metnin CSS'ini okur; görsellerde, canvas'larda veya PDF'lerdeki fontları bulamaz.

WCAG için metin kontrastını nasıl kontrol ederim?

Önizleme, metin rengi ile arka plan arasındaki kontrast oranını normal ve büyük metin için AA ve AAA işaretleriyle gösterir. İki renkten birini değiştirince işaretler güncellenir.

Boyutu px yerine rem olarak gösterebilir mi?

Evet. Birimi px, rem, pt veya em olarak değiştirin; alanlar ve kod parçası da buna uyar. rem, sayfanın kök font boyutuna göre hesaplanır ve seçiminiz hatırlanır.

Ücretsiz mi? Veri topluyor mu?

Ücretsizdir ve hesap gerektirmez. Sunucu veya analiz yoktur; yalnızca sizin başlattığınız font indirme isteği yapılır.

Edge, Brave veya Opera'da çalışıyor mu?

Edge, Brave, Opera ve Vivaldi dahil olmak üzere çoğu Chromium tabanlı tarayıcı, Chrome Web Store'dan uzantı yükler. Firefox ve Safari desteklenmez.

PYROCTAL'ın diğer ücretsiz uzantıları

Bu hangi font? İki tıkta bulun.

Chrome'a ekle — ücretsiz