Web sitesi tarafından kullanılan yazı tipi nasıl bulunur
Daha ilginç bir web sitesi gördüyseniz ve web sitesi tarafından hangi yazı tiplerinin nasıl kullanılacağını merak ediyorsanız, cevap tarayıcı müfettişinizi açmak kadar basittir. Web sitesinin her biti tarayıcınızda yorumlanır. Dolayısıyla, bir tarayıcı muayenesini nasıl doğru kullanacağınızı biliyorsanız, sadece kaynağı değil, aynı zamanda sahip olduğu görüntüyü de bilebilirsiniz, sayfada bulunan diğer öğelerin CSS özelliği. Bu yazıda, web sitesi tarafından hangi yazı tipinin kullanıldığını ve hatta nasıl oynamaya başlayacağını bulmak için bir Chrome tarayıcısı muayenecisinin nasıl kullanılacağını göreceğiz. Ama önce, ona nasıl erişeceğinizi ve müfettiş üzerindeki özelliklerinizi açıklayacağım.
Access Chrome Müfettiş Bir Chrome tarayıcı kullanıyorsanız ve web sitesini kontrol etmek istiyorsanız, yapmanız gereken ilk şey Müfettiş penceresine erişmektir. Bunu yapmanın birkaç yolu var:
F12 düğmesine basarak veya
Belirli bir öğeye ve açık bir menüye doğru tıklayarak, seçenek erişimini inceleyin. Bu yöntemin avantajı, söz konusu öğeleri doğrudan vurgulamaktır veya
Control + Shift + I (Windows’ta) veya CMD + ALT + I (Mac’te) kombinasyonuna basarak veya
Chrome menüsüne erişerek (sağ üst bıçakta 3 nokta) »Diğer Araçlar» Geliştirici Araçları.
Müfettiş penceresi, tarayıcı penceresine entegre veya ayrı bir pencerede görüntülenebilir. Bu seçeneğe erişmek için bunu müfettişin sağ üst kısmındaki yapılandırma simgesini (3 puan) tıklayarak ve «rıhtım tarafı» ‘nın özellik değerini değiştirerek yapabilirsiniz.
Ayrıca bilgisayar görüntüleme modunda veya bir mobil cihazda görüyormuş gibi sayfa içeriğini görüntüleme seçeneğiniz de vardır. Müfettiş üzerindeki bıçağın sol tarafındaki ikinci düğmeyi tıklayın ve içeriğin mobil cihazdan erişmek gibi otomatik olarak nasıl görüntüleneceğini göreceksiniz. Sayfa İçerik Görüntüleme modunu seçin. Ayrıca görüntülemek istediğiniz cihaz türünü, boyutunu veya portre veya peyzaj modunda görüntülemek istiyorsanız da gösterebilirsiniz.
Mobil cihazlarda duyarlı ve yatay görüntüleme modlarını belirleyin. Gördüğünüz gibi ana sekme müfettişi, müfettiş farklı bir sekmeden oluşur.
Sekme Google Müfettişinde mevcuttur. Her birinden, çeşitli işlevlere ve özelliklere erişiminiz olacak: Eleman: HTML kodunu ve uygulanan kuvveti gösterir. Ayrıca değiştirebilir ve hızlı bir şekilde yeni kurallar ekleyebilirsiniz.
Konsol: Sayfada meydana gelen çeşitli hata mesajlarını ve uyarıları görüntüler (yüklenmeyen resimler, JavaScript hataları, …)
Kaynak: Sayfa için bir kaynak ağacı görüntüler. Farklı kaynakların nerede elde edildiğini görebilir ve değiştirebilirsiniz.
Ağ: Web sitelerinden yapılan çeşitli istekleri gösterir, talep içeriğine erişme, elde edilen yanıtlar, zaman …
Performans: Çalışan süreci gösterir ve sayfa performansını ölçmeye hizmet eder.
Bellek: Web sayfalarının yüklenmesi ve yürütülmesi sırasında kullanılan belleği gösterir.
Uygulama: Web uygulamaları tarafından kullanılan kaynaklar hakkında yararlı bilgiler görüntüler.
Güvenlik: İlgili sayfalarından ve sertifikalarından erişilen çeşitli siteler hakkında bilgi görüntüler. Denetim: Hataları kontrol etmek için bir denetim raporu yapmanızı sağlar.
Müfettişe sekmeler ve işlevsellik ekleyen bir eklenti var, bu nedenle daha fazla sekme olabilir. Önceki resimde, Devtools Redux eklentisini yükledik.
Element sekmesi Şimdi eldeki soruna geri dönelim: Web sayfasındaki herhangi bir içerik yazı tipini bilmek istiyoruz.
Daha önce de belirttiğim gibi, öğe sekmesinden HTML koduna ve sayfadaki çeşitli öğelerin stiline erişebilirsiniz.
Google Chrome Müfettişinin Öğe sekmesi. Yukarıdaki resimde görebileceğiniz gibi, sol tarafınızda kaynak kodunu gösteren bir ana pencere vardır. Ve sağda, çeşitli sayfa öğelerine uygulanan bir CSS tarzı kural paneliniz var. Aslında, stil panelinizde üç sekme var:
Stiller: Uygulanan CSS kurallarını gösterir ve yenilerini değiştirebilir ve ekleyebilirsiniz. Hesaplanan: Sınırları, kenar boşluklarını ve doldurma öğelerini temsil eden panellerle öğelere uygulanan tüm kuralları gösterir.
Etkinlik Dinleyicisi: Bahçede başlatılan ağaç ağacını ve ondan etkilenen kontrolleri gösterir.
Bitmiş öğenin ayrıntılarına bakın, örneğin, Nelio ana sayfalarımızı açarsanız, Nelio yazılımı kelimesini başlıktan seçin ve öğeyi kontrol etmek için sağ -tıklayın, müfettiş açar ve yukarıdaki resmi gösterecektir.
Nelio Software web sitesi ekran görüntüleri. Müfettiş görüntüsünde, ana pencerenin bana “Nelio Software” başlığının H1 olduğunu söyleyeceğini görebilirsiniz. Aynı pencerede, herhangi bir özniteliğe veya metne doğru tıklama ve değiştirme veya silme seçeneğiniz vardır. Açıkçası, burada yaptığınız değişiklikler ne olursa olsun orijinal içeriği değiştirmez, ancak bu bir sayfa tasarlarken ve oluşturduğunuz değişikliklerin görüntüsünün bir resmini almak istediğinizde çok kullanışlı bir araçtır. Sayfadaki öğe metnini düzenleme. Yazı tipini görün, başlık olduğunu biliyorsunuz, ama yazı tipi ne olacak?
Çok basit, hesaplanan Müfettiş sekmesinde seçilen öğenin tüm özelliklerini bulacaksınız. Yazı tipi-ailesi özniteliklerine gidin ve orada web sitesi başlığımız gibi tam yazı tipini bulacaksınız. Yazı tipi seçilen öğeye uygulanır. Yazı tipini değiştirmek istiyorsanız öğenin nasıl görüleceğini bilmek istiyorsanız, Styles sekmesine gidersiniz, yazı tipi-ailesi özniteliklerine gidersiniz ve doğrudan istediğiniz değerle değiştirebilirsiniz.
Müfettişte başlık yazı tipini değiştirin. Değiştirilen yazı tipi türüyle web sitenizi otomatik olarak göreceksiniz
Yazı tipi başlığı değiştirilmiş sayfa. Gördüğünüz gibi, Google Chrome Müfettişi, bir öğeye herhangi bir değişiklik uyguladıktan sonra bırakacağınız tasarımı oynamak ve denemek için çok rahat ve kullanımı kolay bir araçtır. Görüntü yazı tipi ne olacak? Google Chrome Müfettişi, gördüğünüz gibi, sayfanızdaki herhangi bir öğe özelliğini görmenizi sağlar. Ancak web sitesinde resim yazı tipini görmek istiyorsanız, müfettişle göremezsiniz. Müfettiş, sayfanıza eklenen görüntü özelliğini gösterecektir, ancak içerik içeriğinin ayrıntılarını göstermeyecektir. Bunu yapmak için, sincap eşleştiricileri veya yazı tiplerini tanımlamanıza yardımcı olabilecek WhatFontis.com yazı tipi gibi birkaç araç vardır. bir görüntüde kullanılır. Bunu yapmak için, her iki araçta da bir resim indirmeniz (Whatfontis.com’da görüntü URL’sini de gösterebilirsiniz) ve ardından tanımlamak istediğiniz harfleri içeren resim bölümünü seçmeniz gerekir. Her iki araç da size seçilen metinle eşleşen tüm yazı tipi devresini gösterecektir. Ancak bunun aynı eşleşme olmadığından şüpheleniyorsanız, araçta gösterilene benzer Google yazı tiplerinde arama yapabilirsiniz ve ne elde ettiğinizi göreceksiniz. Gemma Evans’ın Üstün Fıkra Üzerindeki Üstün Resmi.
