Bir web sitesinin hangi fontları kullandığını nasıl bilebilirim?

Bir web sitesinin hangi fontu veya fontu kullandığını nasıl öğrenebilirim? İşi kolaylaştıracak herhangi bir araç veya tarayıcı uzantısı var mı?

Seçenek 1: Bir tarayıcı uzantısı kullanın (Kolay)

WhatFont (Chrome, Firefox ve Safari için kullanılabilir) gibi uzantılar , web sayfasındaki herhangi bir metnin font ailelerini tespit etmeyi oldukça kolaylaştırır. Sadece eklentiyi yüklemeniz, bir sitede aktif hale getirmeniz ve incelemek istediğiniz öğeye tıklamanız yeterlidir. Sonuçlar, daima seçtiğiniz bağlamda, kayan bir kutuda gösterilir.

Seçenek 2: CSS'yi tarayıcı denetçileriyle manuel olarak kontrol edin (Gelişmiş)

Çoğu web tarayıcısı fontları right-click→ 'Denetle' veya 'Öğeyi İncele' seçeneğini kullanarak kolayca bulmanıza izin verir . Tuşuna basarak da yapılabilir F12. Bu, herhangi bir HTML öğesinde kullanılan yazı tiplerini bulmak için bulabileceğiniz, web sitesine ekli stillerin bir listesini gösterir.

Müfettişin kullanılması, bir uzatma kullanmak kadar kolay değildir, ancak birkaç avantajı vardır. Bazı CSS anlayışları gereklidir, çünkü uygulanacak olanı bulmak için genellikle birkaç stilden geçmeniz gerekecektir. Genel bir kural olarak, üzerine çizilen stillerin üzerine yazılır, bu nedenle daima en son uygulananları arayın.

Sayfadaki tüm stiller Stil sekmesinde listelenir , ancak bunun yerine Bilgisayarlı sekmesini kullanırsanız, tabii ki font ailesi de dahil olmak üzere seçtiğiniz öğeye aktif olarak uygulanan özellikleri bulabilirsiniz.

Son olarak, hangi fontların global olarak kullanıldığını hızlı bir şekilde kontrol etmenin başka bir yolu (ancak nasıl veya nerede DEĞİLDİR) 'Uygulama → Çerçeveler → Fontlar'a gitmektir . Burada tüm başvurulan (sistem dışı) yazı tiplerinin bir listesini bulacaksınız.

Bu ikinci yöntem daha yavaştır, ancak denetçiyi kullanmak, tüm sayfanın nasıl oluşturulduğuna dair size büyük bir fikir verebilir. Ayrıca, pek çok tasarımcı ve geliştirici, değişiklikleri stil sayfasına yazmadan önce değişiklikleri test etmek için bir araç olarak kullanıyor (çünkü denetçideki bir CSS satırını değiştirmek tarayıcıda gerçek zamanlı bir önizlemeyi tetikliyor).

Tarayıcının 'denetim elemanı' mükemmel değil

Tarayıcınızın geliştirici araçlarını kullanmak, bir web sitesinin CSS'sinde hangi yazı tiplerinin bildirildiğini görmek için iyi bir yoldur. Bu, gerçekte hangi fontun görüntülendiğini göstermez - yalnızca uygulanan font yığınını gösterir - oluşturulan gerçek font yüklü fontlara bağlı olarak değişebilir.

Başka bir yararlı araç Fount .

Fount, yazı tipi yığınınızda hangi web fontunu gördüğünüzü söyleyecektir - yalnızca görülmesi gerekenleri değil. Ayrıca yazı tipi boyutunu, ağırlığını ve stilini de söyleyecektir.

Fount'u kullanmak, yer imi eklemek kadar kolaydır. Bir uygulama veya uzantı yüklemenize gerek yok.

Yer imini ekledikten sonra:

1. Herhangi bir siteye gidin ve Fount bookmarklet'i tıklayın.
2. Tanımlamak istediğiniz herhangi bir türe tıklayın. Tekrar et.
3. Fount'u kapatmak için yer imini tekrar tıklamanız yeterlidir.

Fount, Safari, Chrome, Firefox ve IE8 + ile çalışır.

Chrome tarayıcı uzantısı CSSViewer'ı seviyorum . Sadece tıklayın ve tanımlamak istediğiniz yazı tipinin üzerine gelin ve yazı tipi ailesini gösterir.

FontFinder tasarımcıları, geliştiricileri ve yazımcıları için yaratılmıştır. Bir kullanıcının bir sayfadaki herhangi bir öğenin font bilgisini analiz etmesini, bu bilginin herhangi bir parçasını / parçalarını panoya kopyalamasını ve yeni mizanpajları test etmek için satır içi değiştirmeleri gerçekleştirmesini sağlar.

Bu eklenti yazı tipi ve yazı tipi ağırlığı, boyutu ve daha birçok form web sayfası gibi diğer css bulmak için en iyisidir.