FontLens

Herhangi bir metni seçin, sağ tıklayın ve yazı tipini, boyutunu, ağırlığını, rengini ve CSS'sini anında inceleyin; kopyalayın,…

Hiç bir sayfaya geldiniz mi, yazıya hayran kaldınız mı ve "bu hangi yazı tipi?" diye merak ettiniz mi? FontLens, bu soruyu tek bir tıklamayla yanıtlar. Herhangi bir web sitesindeki herhangi bir metni seçin, sağ tıklayın ve "FontLens ile yazı tipini incele"yi seçin. Sayfanın hemen üzerinde temiz, odaklanmış bir panel açılır ve metnin nasıl biçimlendirildiğini tam olarak gösterir: yazı tipi, boyutu, ağırlığı, satır yüksekliği, rengi ve tasarımın arkasındaki diğer tüm ayrıntılar. İster bir düzeni tersine mühendislik yapan bir tasarımcı olun, ister bir spesifikasyonu eşleştiren bir geliştirici, ister sadece güzel bir başlıkla ilgili meraklı olun, bu araç her web sayfasını açık bir tipografi kitabına dönüştürür. FontLens, bir yazı tipi bulucu ve CSS denetleyicisini bir arada sunar. Sadece yazı tipi ailesini size söylemekle kalmaz, aynı zamanda kullanıma hazır kod, fikirleri test etmek için etkileşimli bir oyun alanı ve metninizin okunabilir olduğundan emin olmak için erişilebilirlik araçları sunar. Hesap yok. Kayıt yok. Sadece seçin, sağ tıklayın ve inceleyin. 🔍 Neler yapabilirsiniz - Seçilen kelimelerin tüm tipografisini ortaya çıkarın: yazı tipi ailesi, yazı tipi boyutu, yazı tipi ağırlığı, satır yüksekliği ve rengi bir bakışta - Harf aralığı, metin dönüştürme ve yazı tipi stili gibi kaçırılması kolay ek stilleri görün - Tek bir özelliğin tamamını tek tıklamayla kopyalayın veya tüm kural setini eksiksiz bir CSS snippet'i olarak alın - Bu snippet'i basit sekmeler aracılığıyla Tailwind, SCSS veya SASS'a dönüştürün, ardından tamamını veya satır satır kopyalayın - Canlı, düzenlenebilir bir önizlemede deney yapın: örnek kelimeleri yeniden yazın, değerleri ayarlayın, arka planı değiştirin ve anında güncellendiğini izleyin - Bir web yazı tipinin nereden geldiğini bir sağlayıcı rozetiyle tanımlayın (Google Fonts, Adobe Fonts, kendi barındırılan veya yerleşik bir sistem yazı tipi) - "Yazı tipini indir" düğmesiyle bir web yazı tipini bilgisayarınıza kaydedin, doğrudan kendi kaynağından çekilir - WCAG standartlarına göre renk kontrastını kontrol edin, tam oran ve AA ve AAA geçme veya başarısız olma sonuçlarıyla birlikte - Ekrandaki herhangi bir pikseli almak için göz damlası dahil tam bir seçici ile renkleri seçin ve örnekleyin - Hem alanlara hem de dışa aktarılan koda uygulanan ölçü birimlerini px, rem, pt ve em arasında değiştirin 🖱️ Nasıl çalışır FontLens'i kullanmak saniyeler sürer. İncelemek istediğiniz kelimeleri vurgulayın, seçimin üzerine sağ tıklayın ve menüden "FontLens ile yazı tipini incele"yi seçin. Panel, sitenin kendi görünümüyle asla çakışmayacak şekilde düzenli bir şekilde stilize edilmiş olarak mevcut sayfanın üzerinde görünür. Buradan ayrıntıları okuyabilir, ihtiyacınız olanı kopyalayabilir veya düzenlemeye başlayabilirsiniz. Canlı önizleme işlerin eğlenceli hale geldiği yerdir. Gerçek bir başlığı test etmek için ifadeyi değiştirin, boyutu ayarlayın, ağırlığı ayarlayın veya türün nasıl göründüğünü görmek için yeni bir arka plan rengi ayarlayın. Sayfalar arasında gezinirken ve daha sonra geri döndüğünüzde düzenlemeleriniz kalır, böylece bir sitede başladığınız bir fikir bir sonraki sitede sizi bekler. Orijinal değerleri geri almak istediğinizde, "Siteye sıfırla" düğmesi sayfanın gerçekten kullandığı her şeyi geri yükler. Ham varlığa mı ihtiyacınız var? İndirilebilir bir web yazı tipi için, bir düğme gerçek dosyayı @font-face konumundan getirir. İşletim sisteminizle birlikte gelen bir yazı tipi için FontLens, bunun yerleşik bir yazı tipi olduğunu size söyler, böylece indirme yapmadan kullanılabilir olduğunu bilirsiniz. 🔒 Önce gizlilik FontLens tamamen tarayıcınızın içinde çalışır. Metni incelemede hiçbir veri toplama, izleme, analiz veya harici sunucu yoktur. İncelediğiniz her şey makinenizde kalır. Uzantı tam olarak bir ağ isteği yapar ve yalnızca "Yazı tipini indir" düğmesine bilerek bastığınızda, o noktada dosyayı almak için o yazı tipinin kendi kaynağına ulaşır. Başka hiçbir şey cihazınızdan ayrılmaz. İzinler kasıtlı olarak dardır. Bağlam menüsü izni, sağ tıklama girişini ekler. Etkin sekme izni, aracın, onu çağırdığınız sekmede seçtiğiniz metni okumasına olanak tanır ve başka hiçbir yerde olmaz. Depolama, önizleme metninizi ve birim ve biçim tercihlerinizi bir sonraki seferde hatırlanmaları için tutar. Tarama geçmişinize geniş erişim ve kapsamlı ana bilgisayar izinleri yoktur. 👥 Kimler için - Bir yazı tipini tanımlamak, bir palet yakalamak ve stilleri hızlı bir şekilde yeniden kullanmak isteyen web tasarımcıları - Bir mockup'ı eşleştiren veya tam yazı tipi ailesi ve aralık değerlerini koda dönüştüren ön uç geliştiricileri - Tutarlı, marka kimliğine uygun yazı tipi sistemleri oluşturan UI ve UX mühendisleri - Gerçek sitelerin nasıl bir araya getirildiğini görmek isteyen CSS ve tipografi öğrenen öğrenciler - Metnin WCAG kontrast gereksinimlerini karşıladığını göndermeden önce doğrulayan erişilebilirlik denetçileri - Sadece bir sitenin hangi yazı tipini kullandığını bilmek isteyen blog yazarları, pazarlamacılar ve meraklı okuyucular ✨ İnsanlar neden saklıyor - Geliştirici araçlarını karıştırmak yerine bir sağ tıklama size cevabı verir - Kod, düz CSS, Tailwind, SCSS veya SASS'ta kopyalamaya hazırdır, böylece doğrudan projenize eklenebilir - Düzenlenebilir önizleme, tek bir kod satırına dokunmadan yazı tipi seçeneklerini prototiplemenizi sağlar - Kontrast denetleyicisi, erişilebilirliği iş akışınıza sonradan düşünmek yerine dahil eder - Renk seçici ve göz damlası, sayfanın herhangi bir yerinden kesin renkleri örneklemenizi ve yeniden kullanmanızı sağlar - Açık ve koyu temalar işletim sisteminizi otomatik olarak takip eder, böylece gece gündüz evinde hisseder - px, rem, pt ve em arasındaki birim değiştirme, çıktıyı kod tabanınızın yazıldığı şekle uygun tutar 🎨 Ayrıntılara daha yakından bir bakış Tipografi bir isimden daha fazlasıdır. FontLens, bir başlığın ağırlığından satır yüksekliğindeki nefes alma boşluğuna ve harf aralığının ince takibine kadar metnin doğru hissettirmesini sağlayan küçük kararları ortaya koyar. Bu değerleri yan yana görmek, bir tasarımın neden çalıştığını ve onu nasıl yeniden oluşturacağınızı anlamanıza yardımcı olur. Sağlayıcı rozeti de bağlam ekler, bir Google Fonts varlığına, bir Adobe Fonts yazı tipine, kendi barındırılan bir dosyaya veya bir sistem varsayılanına bakıp bakmadığınızı bir bakışta söyler, bu da bir yazı tipini eşleştirmeye veya kaynaklandırmaya başladığınızda genellikle ilk ipucudur. Renk araçları statik bir okumadan daha fazlasını sunar. Seçici, ton ve alfa kaydırıcılarla HSV karesi sunar ve istediğiniz biçimde çalışabilmeniz için HEX, RGB ve HSL konuşur. Bunu göz damlası ile birleştirin ve herhangi bir öğenin kesin gölgesini alıp önizlemenize veya notlarınıza bırakabilirsiniz. 🚀 İncelemeye başlayın FontLens'i ekleyin, bazı kelimeleri vurgulayın ve herhangi bir sayfanın arkasındaki tipografiyi, stilleri ve renkleri ortaya çıkarmak için sağ tıklayın. Web'in nasıl okunacağına önem veren herkes için hızlı, özel ve gerçekten kullanışlı bir arkadaştır. Kurun, elinizin altında bulundurun ve bir daha asla gizemli bir yazı tipi hakkında merak etmeyin.