Bir Web Sitesinin Hangi Yazı Tiplerini Kullandığını Nasıl Öğrenirsiniz?

Özellikle çekici bir web sitesi gördüyseniz ve bir web sitesinin hangi yazı tiplerini kullandığını nasıl göreceğinizi merak ettiyseniz, yanıt tarayıcınızın denetçisini açmak kadar basittir. Bir web sitesinin her bir parçası tarayıcınızda yorumlanır. Böylece, tarayıcı denetçinizi nasıl doğru kullanacağınızı biliyorsanız, yalnızca kaynakları değil, sahip olduğu görüntüleri, sayfada bulunan diğer herhangi bir öğenin CSS özelliklerini de öğrenebilirsiniz.

Bu gönderide, bir web sitesinin hangi yazı tiplerini kullandığını bulmak için Chrome tarayıcı denetçisini nasıl kullanacağımızı ve hatta bunlarla oynamaya nasıl başlayacağımızı göreceğiz. Ama önce, ona nasıl erişileceğini ve denetçide hangi özelliklere sahip olduğunuzu açıklayacağım.

Chrome Inspector'a erişin

Chrome tarayıcı kullanıyorsanız ve bir web sitesini incelemek istiyorsanız, yapmanız gereken ilk şey denetçi penceresine erişmek. Bunu yapmanın birkaç yolu vardır:

• F12 tuşuna basarak veya
• Belirli bir öğeye sağ tıklayarak ve açılan menüden Inspect seçeneğine erişin. Bu yöntemin avantajı, söz konusu öğeyi doğrudan vurgulaması veya
• Control + Shift + I (Windows'ta) veya Cmd + Alt + I (Mac'te) tuş bileşimine basarak veya
• Chrome menüsüne (sağ üst çubukta 3 nokta) erişerek » Diğer araçlar » Geliştirici araçları.

Denetçi penceresi, tarayıcı penceresine entegre olarak veya ayrı bir pencerede görüntülenebilir. Bu seçeneklere erişmek için denetçinin sağ üst köşesindeki yapılandırma simgesine (3 nokta) tıklayarak ve «Dock Tarafı» özelliğinin değerini değiştirerek yapabilirsiniz.

Ayrıca sayfa içeriğini bilgisayar görüntüleme modunda veya bir mobil cihazda görüntülüyormuş gibi görüntüleme seçeneğiniz de vardır. Denetçinin üst çubuğunun sol tarafındaki ikinci düğmeye tıklayın ve içeriğin bir mobil cihazdan erişiyormuşsunuz gibi otomatik olarak nasıl görüntüleneceğini göreceksiniz.

Ayrıca, görüntülemesini istediğiniz cihazın türünü, boyutunu veya dikey veya yatay modda görüntülemek isteyip istemediğinizi belirtebilirsiniz.

Denetçi Ana Sekmeleri

Gördüğünüz gibi, denetçi farklı sekmelerden oluşuyor.

Her birinden farklı işlevlere ve özelliklere erişebileceksiniz:

• Elements : sayfanın HTML kodunu ve uygulanan stilleri gösterir. ayrıca bunları değiştirebilir ve hızlı bir şekilde yeni kurallar ekleyebilirsiniz.
• Konsol : sayfada oluşan farklı hata ve uyarı mesajlarını gösterir (yüklenmeyen resimler, javascript hataları,…)
• Kaynaklar : sayfanın kaynak ağacını görüntüler. Farklı kaynakların nereden elde edildiğini görebilir ve bunları değiştirebilirsiniz.
• Ağ : web sitesinden yapılan farklı istekleri, isteğin içeriğine erişimi, alınan yanıtı, süreleri…
• Performans : çalışan ve sayfanın performansını ölçmeye yarayan süreçleri gösterir.
• Bellek : web sayfasının yüklenmesi ve yürütülmesi sırasında tüketilen belleği gösterir.
• Uygulama : bir web uygulaması tarafından kullanılan kaynaklar hakkında faydalı bilgiler görüntüler.
• Güvenlik : sayfadan erişilen farklı siteler ve ilgili sertifikaları hakkında bilgileri görüntüler.
• Denetimler : hataları kontrol etmek için bir denetim raporu oluşturmanıza olanak tanır.
• Denetçiye sekmeler ve işlevler ekleyen eklentiler vardır, bu nedenle daha fazla sekme olabilir. Bir önceki görselde Redux DevTools eklentisini kurduğumuz gösterilmiştir.

Öğeler Sekmesi

Şimdi elimizdeki konuya dönelim: Bir web sayfasındaki herhangi bir içeriğin yazı tipini bilmek istedik.

Daha önce de bahsettiğim gibi Elements sekmesinden HTML koduna ve bulunduğunuz sayfadaki farklı elementlerin stillerine ulaşabilirsiniz.

Yukarıdaki resimde de görebileceğiniz gibi, sol tarafta size kaynak kodunu gösteren ana pencere bulunmaktadır. Ve sağda, sayfanın farklı öğelerine uygulanan CSS stil kuralları paneline sahipsiniz.

Aslında, stiller panelinde üç sekmeniz var:

• Stiller : uygulanan CSS kurallarını gösterir ve değiştirip yenilerini ekleyebilirsiniz.
• Hesaplanmış : öğenin sınırlarını, kenar boşluklarını ve dolgusunu temsil eden bir panel ile öğeye uygulanan tüm kuralları gösterir.
• Olay Dinleyicileri : sayfada başlatılan olayların ağacını ve bunlardan etkilenen kontrolleri gösterir.

Bir öğenin ayrıntılarını görüntüleyin

Örneğin, ana Nelio Software sayfamıza giderseniz, başlıktan Nelio Software kelimelerini seçin ve öğenin ne olduğunu incelemek için sağ tıklayın, denetçi açılır ve yukarıdaki resmi size gösterir.

Denetçi görüntüsünde, ana pencerenin bana “Nelio Software” başlık stilinin h1 olduğunu söylediğini görebilirsiniz.

Aynı pencerede, herhangi bir öznitelik veya metne sağ tıklayıp değiştirme veya silme seçeneğine sahipsiniz. Açıkçası, burada yaptığınız herhangi bir değişiklik orijinal içeriği değiştirmeyecektir, ancak sayfaları tasarlarken ve yaptığınız herhangi bir değişikliğin nasıl göründüğüne dair bir fikir edinmek istediğinizde kesinlikle çok kullanışlı bir araçtır.

Yazı Tipine Bakın

Artık bunun bir manşet olduğunu biliyorsunuz, peki ya yazı tipi?

Çok basit, denetçinin Hesaplanan sekmesinde seçilen öğenin tüm özelliklerini bulacaksınız. Yazı tipi ailesi niteliğine ilerleyin ve orada tam olarak web sitemizin başlığına sahip olan yazı tipini bulacaksınız.

Ve eğer yazı tipini değiştirmek isteseniz o elemanın nasıl görüneceğini merak ediyorsanız, Stiller sekmesine gidin, yazı tipi-aile niteliğine inin ve onu doğrudan istediğiniz değerle değiştirebilirsiniz.

Web sitenizi değiştirilen yazı tipiyle otomatik olarak göreceksiniz

Gördüğünüz gibi, Google Chrome denetçisi, bir öğeye herhangi bir değişiklik uyguladıktan sonra bırakacağınız tasarımı denemek ve oynamak için çok rahat ve kullanımı kolay bir araçtır.

Bir Resmin Yazı Tipi Hakkında Ne?

Google Chrome denetçisi, gördüğünüz gibi, sayfanızdaki herhangi bir öğenin özelliklerini görüntülemenize olanak tanır. Ancak bir web sitesinde bir resmin yazı tipini görmek istiyorsanız, bunu denetçi ile göremezsiniz. Denetçi, sayfanıza eklenen görüntünün özelliklerini size gösterecek, ancak o görüntünün içeriğinin ayrıntılarını size göstermeyecektir.

Bunu yapmak için, bir görüntüde kullanılan yazı tipini belirlemenize yardımcı olabilecek Font Squirrel Matcherator veya Whatfontis.com gibi bazı araçlar vardır. Bunu yapmak için, her iki araçta da resmi indirmeniz (whatfontis.com'da resmin URL'sini de belirtebilirsiniz) ve ardından resmin tanımlamak istediğiniz harfi içeren bölümünü seçmeniz gerekir.

Her iki araç da, seçilen metinle kabaca eşleşen bir dizi yazı tipi gösterecektir. Ancak bunun tam bir eşleşme olmadığından şüpheleniyorsanız, araç tarafından belirtilenlere benzer yazı tiplerini google'da aratabilirsiniz ve ne elde ettiğinizi göreceksiniz.

Unsplash'ta Gemma Evans'ın öne çıkan görüntüsü.