Bir sitede kullanılan yazı tipini belirlemek için Yardımcı Programı? [kapalı]


9

Örneğin: Web sitesinde kullanılan yazı tiplerini seviyorum: NYTimes , bu yüzden web sitesi tarafından kullanılan tüm yazı tiplerini listeleyebilecek bir şey harika olurdu!

Ben do DEĞİL bir istediğiniz görüntü işleme programı ekran görüntüleri ya bir site analiz edebilirsiniz yazı hakkında soru sormak ve onun listeden daraltmak.

Sadece web sitesini tarayabilir ve yazı tiplerini listeleyebilecek bir şey ... Bölgelerdeki yazı tiplerini kaplarsa harika olurdu, ama bu çok ileri gidiyordu, sanırım.


@Arjan neden :-(? Aradığım şeyden açıkça bahsettim, bu da cevapların çoğunun konusu oldu.
Lazer

Firefox bugünlerde bunu tek bir sayfa için kolaylaştırdı; güncellenmiş cevabımı görün .
Arjan

Yanıtlar:


20

Bunu başarmanın birçok yolu vardır. Aslında bunu çok yapıyorum, çünkü CSS'nin nasıl çalıştığıyla çok ilgileniyorum ve aynı zamanda tipografiyi de seviyorum . Bunu yapmanın iki yolu:

  • Tarayıcınızla bir "müfettiş" kullanmak (aradığınız şey budur!) - Yerleşik bir Müfettiş aracı olan Google Chrome'u kullanıyorum (çünkü seviyorum) . Gerçekten denemelisin. Sadece bir siteye gidin, analiz etmek istediğiniz öğeye sağ tıklayın ve içerik menüsünden "Öğeyi İncele" ye tıklayın. Inspector , HTML ve CSS'nin dinamik özelliklerini görüntüler , bu nedenle bir metin öğesini inceleyecekseniz, css özelliğini görürsünüzfont-familymüfettişte (sağ taraftaki çubukta) size yazı tipinin ne olduğunu söyleyecektir (bu CSS'yi nasıl yorumlayacağınızla ilgili bilgi için aşağıya bakın). Firebug for Firefox'u benzer bir şey başarmak için kullanabilirsiniz, ancak Google Chrome Inspector aracının çok daha üstün olduğuna inanıyorum (bir web geliştiriciyim - her şey için kullanıyorum!).
  • Veya sayfanın kaynağını manuel olarak görüntüleyebilir ve CSS'yi analiz edebilirsiniz. Bunu nasıl yapacağınız aşağıda açıklanmıştır:

    1. Sayfadayken kaynağı görüntüleyin. Internet Explorer'daysanız Sayfa -> Kaynağı Görüntüle veya Görünüm -> Kaynak'a gidin. Firefox, Chrome veya başka bir modern tarayıcı kullanıyorsanız, Ctrl + U (veya işletim sisteminize bağlı olarak Apple + U) tuşlarına basın.

    2. HTML kodunda, analiz etmeye çalıştığınız metin içeriğini arayın. Metni içeren bazı etiketler bulmanız gerekir ve bunlar HTML'ye sabit olarak kodlanmış yazı tiplerine sahip olabilir (bir <font>etiket kullanarak veya stylebir <p>veya <div>muhafazanın niteliğinde ) veya bazı CSS'ye başvurabilir (bir classveya idniteliğine bakın ve bunları yazın).

    3. İkincisiyse (bazı CSS'ye referans verir), HTML'nin üst kısmına gidin ve sayfanın içindeki <link>etiketleri bulun <head>. Bağlantı bir stil sayfasına referans veriyorsa, onu göreceksiniz - şimdi tek yapmanız gereken o CSS stil sayfasına gidin ve not ettiğiniz sınıf veya kimlik tanımlayıcılarını aramaktır. Bir yerde, karşılık gelen bir font-familyproerpty bulacaksınız (unutma, site genelinde global olarak yazı tipleri de ayarlayabilirsiniz ve bu <body>etiketin altında veya başka bir şey olacaktır. ).

font-familyCss nasıl yorumlanır :

font-familyMülkiyet yazı ne belirleyecektir. Bu mülkte fontlar virgülle ayrılacaktır . Sayfayı oluştururken, bir tarayıcı bu listeyi gözden geçirecek ve bilgisayarda bulunan ilk yazı tipini kullanacaktır . Çoğu durumda, bu özelliğin sonunda bir yazı tipi kategorisi de vardır, bu da yalnızca "her ihtimale karşı "dır, böylece başka kategori yoksa bu kategorinin varsayılan yazı tipi kullanılır.

Bir örnek: Diyelim ki bu bir <p>kasa için bazı css .

p.thisisasampleclass
{
font-family: Calibri, "Comic Sans MS", Georgia, sans-serif;
}

Burada, eğer yazı tipi mevcutsa, tarayıcı önce Calibri'yi kullanmaya çalışacaktır. Değilse, Comic Sans MS veya Georgia'yı veya diğerleri mevcut değilse varsayılan sans-serif yazı tipini kullanır.

Hangi yazı tiplerinin kullanıldığını bu şekilde öğrenebilirsiniz. CSS'yi çok güzel bir şekilde görselleştiren iyi yapılandırılmış ve yararlı bir araç bulamadım, ancak Müfettiş seçeneğinin sizin için çalışacağını düşünüyorum ( çok kafa karıştırıcı değil !). Bence bu yol.

Inspector aracıyla NYTimes yazı tiplerini bulma örneği:

Google Chrome ile bir NYTimes makalesinin ana metin gövdesi için yazı tiplerini nasıl bulacağınız konusunda size yol göstereceğim .

  1. NYTimes.com'daki bir makaleye gidin, yazı tiplerini bulmak istediğiniz bir metin öğesine sağ tıklayın ve Öğeyi Denetle'ye basın .

    Müfettişin Açılması

  2. Sağ taraftaki kenar çubuğuna bakın. In Hesaplanan Stil açılır , bu öğenin CSS özelliklerini göreceksiniz. Ancak, görebileceğiniz gibi, şu anda burada font ailesi özelliği yoktur; bu, fontların yalnızca bu belirli öğe için değil, global olarak tanımlandığı anlamına gelir. Ancak, bunu aşmanın bir yolu var!

    Öğe özelliklerini görüntüleme

  3. Yapmanız gerekenler: "Devralınanları göster" in yanındaki radyo düğmesini seçin .

    Miras alınan şovu seç

  4. "Bilgisayarlı Stil" altında başka birçok global özellik görünecektir.

    Birçok global mülk ortaya çıkıyor

  5. Listede "font-family" seçeneğine ilerleyin . Gri renkte olmalı, yani kalıtsal bir küresel mülktür. Burada kullanılan yazı tiplerini görebilirsiniz! Sürpriz!

    İşte yazı tipleri!


Şimdi NYTimes için örnek bir açıklama ekleyeceğim.
Maxim Zaslavsky

thanks ppl Burası seviyorum - www.superuser.com, daha da şimdi :)
Lazer

@ Maximz2005, bazı seçimler için "Bilgisayarlı Stil açılır" alamıyorum. Sadece boş bir Stil açılır menüsü alıyorum. Neden?
Lazer

1
Müfettiş gerçekten WebKit müfettişi olduğundan, daha sonraki bir beta sürümünde WebKit'in daha yeni bir sürümünü de içerdiğini varsayıyorum? Yeni bir sürüm elbette yeni hatalar gösterebilir, ancak merak ediyorum muhtemelen bir tanesiyle karşılaşmışsınızdır. Chrome'da kullanılan WebKit sürümünü göstermenin bir yolu var mı?
Arjan

1
Benimki WebKit 532.0 @Maxim Z. Arkadaşımın krom (sürüm 3.something) denedim. Orada mükemmel çalışıyor. Sonunda yazı tiplerini istediğim gibi algılayabilirim. Şimdi "elementi incele" özelliğinin ne kadar havalı olduğunu anlıyorum.
Lazer

7

İki farklı şey vardır:

  1. Hangi yazı tipinin gerçekten kullanıldığı (tarayıcı / işletim sistemi tarafından).
  2. Hangi yazı tipi istendi (web sitesi yaratıcısı tarafından).

1. Hangi (yedek) yazı tipi kullanılır?

Bilgisayarınızdaki / işletim sisteminizdeki belirli bir tarayıcıda hangi yazı tipinin kullanıldığından emin olmak için , günümüzde Firefox ve Chrome'da bunun için yerleşik araçlar bulunmaktadır. Firefox Sayfa Denetçisinin bir Font Görünümü var gibi :

Firefox Fonts Görüntüle

Daha fazla ayrıntı için bkz. Tarayıcının bazı metni oluşturmak için gerçekte hangi yazı tipini kullandığını nasıl belirleyebilirim? Overflow üzerinde. Bu aşağıdakileri içerir:

  • Metin, CSS'de tanımlanan yazı tipinde olmayan Unicode karakterleri içerebilir, bu nedenle tek bir öğede birden fazla yazı tipi kullanılabilir.
  • Aynı makinedeki her tarayıcı aynı yazı tipini (TrueType, Apple Advanced Technology, Microsoft OpenType, OpenType PostScript gibi) kullanamaz ve bu nedenle farklı yazı tipleri kullanabilir. Bu nedenle, diğer tarayıcılarda hangi yazı tipinin kullanıldığını belirlemeniz gerekebilir.

2. Hangi yazı tipi istendi

Hangi yazı tipinin istendiğini (web sitesi yaratıcısı tarafından) söylemek için yerleşik Firefox Sayfa İnceleyicisi veya Firebug uzantısı gibi araçlar CSS kurallarının incelenmesine yardımcı olur. Bu tür araçlar size gerçekte hangi yazı tipinin kullanıldığını söylemez , ancak CSS stil sayfası göz önüne alındığında belirli bir bölge veya hatta belirli bir kelime için hangi yazı tipinin istendiğini gösterir :

Firebug'da CSS

Yukarıda Firebug gösterilir. Önce sağdaki Stil menüsünde "Hesaplanan stili göster" i seçin. Ardından, soldaki ok düğmesini tıklayın. Ve sonra sadece ilgilendiğiniz metne tıklayın. Bu, sağdaki CSS stil sayfası bilgilerini güncelleyecektir. CSS işlevleri hakkında bilgi edinmek için özelliklere bakın .

Bazı Firebug Lite diğer tarayıcılar için de kullanılabilir, ancak bunu hiç kullanmadım.

Safari'deki Web Denetçisi ve Chrome'daki Geliştirici Araçları benzer seçeneklere sahiptir. (Safari'de, Web Denetçisini tercihler aracılığıyla etkinleştirin: Menü çubuğunda Geliştirme menüsünü göster .) Internet Explorer'da F12 araçları vardır .

Belirtilen e-t172 gibi : Firefox için Web Geliştirici Araç Çubuğu da bu bilgileri gösterebilir. Bununla birlikte, CSS »Stil Bilgilerini Görüntüle size herhangi bir" miras alınan "(" basamaklı ") stil göstermez, sadece tıkladığınız bölgeye özgü bilgileri gösterir. Bunun yerine, bir tür kaplama elde etmek ve yazı tipi bilgilerini gerçekten görmek için bunun yerine Bilgi »Öğeyi Görüntüle Bilgilerini kullanabilirsiniz. Bu, sayfayı herhangi bir yere tıkladığınızda ayrıntıları gösterecektir.


+1 Benimkinden çok daha detaylı bir cevap için.
BinaryMisfit

Bu solmaya ekran görüntülerini nasıl aldınız? Mac gibi görünüyor, Vista veya XP üzerinde benzer etki alma şansı var mı?
Lazer

@Lazer, Mac'te Skitch (ancak OS X'in çok ince pencere kenarlıkları olduğu için gölgeler bir çeşit standart ve gerekli.) Windows'da nasıl yapılacağını bilmiyorum.
Arjan

4

Firefox kullanıyorsanız, Font Finder Eklentisi vardır . Temel olarak Maxim Z.'nin cevabında tarif ettiği şeyi yapar , ancak otomatik olarak, bu yüzden kullanımı gerçekten kolaydır.


Font Finder tam olarak aradığım şeydi. Chrome için yalnızca benzer bir uzantı olsaydı.
kanguru

@kangax, günümüzde var; bkz Alec'in cevabı
Arjan

Ve @kangax, bugünlerde Firefox ve Chrome'un gerçek yazı tipini belirlemek için yerleşik araçları var. Artık tahmin etmeye gerek yok.
Arjan

4

Bu şimdiye kadar karşılaştığım en iyi çözüm. Görüntülenen metnin piksellerini TypeKit ve Google Font API yazı tipleri dahil olmak üzere mevcut her yazı tipiyle karşılaştırarak , zamanın% 99'unun hangi yazı tipinin kullanıldığını kesin olarak söyleyecek bir yer imi / uzantıdır .

WhatFont Aracı

resim açıklamasını buraya girin

Bunu kontrol et.


Güzel, çok güzel, ama aslında pikselleri (bugünlerde) karşılaştırdığını sanmıyorum? CSS söylediğinde font-family: sans-serifrapor edilen de budur - ancak bu tek başına bir yazı tipi değildir. Kullanırken sonuç olarak font-family: someUnknownFontelde ediyorum (default font), o zaman aslında Mac'imde Times. ( Bu JS Bin kullanarak ekran imi ile test edildi ; ekran görüntüsü .) Yine de: güzel!
Arjan

@Arjun Birkaç ay önce biraz ayrıntılı olarak inceledim, bu yüzden hatırlayabildiğim kadar açıklayacağım. Kaputun altında iki şey yapar. window.getComputedStyleHesaplanan yazı tipi ailesini elde etmek için kullanır . Daha sonra, her bir yazı tipinin piksellerini görüntülenen piksellerle karşılaştırarak bu yığını yineler. İlk eşleme pop-up'ta italik olarak gösterilen eşleşmedir, geri kalanı normal olarak gösterilir. Eşleşme yoksa, gösterilir (default font). Görmenizin nedeni sans-serif, sans-serifyazı tipiyle doğru şekilde eşleşmesidir , ancak şu anda daha fazla ayırt etmemektedir.
Max

Firefox bunun için yeni en iyi arkadaşım; güncellenmiş cevabımı gör :-)
Arjan

3

Hiçbir yazılım bilmiyorum. Ben sadece Internet Explorer kullandım ve kullanılan yazı tipi olduğunu buldum:

font-family: gürcistan, "times new roman", kere, serif

Bu ana yazı tipidir. Stil sayfasını font-ailesi olan herhangi bir şey için aramak, geri kalanını sağlayacaktır.

Süreci:

  • Ana Sayfayı Sağ Tıklayın
  • Rel = stylesheet satırını ve ekli stylesheet URL'sini arar
  • Kopyalayıp tarayıcıya yapıştırın ve css dosyasını indirin.
  • Metin düzenleyicide aç.

Resimlerdeki yazı tipini görüntünün dışında tanımlamayacaksanız.

Evet çok sıkıldım. Ne de olsa Cuma öğleden sonra. Stil sayfasını düzenli olarak güncellediklerinden bağlantıyı yayınlamadım.


Uhuh, Firefox'ta Firebug veya Safari'de Web Müfettişi ...?
Arjan

1
Söylediğim gibi. Ben sıkılmıştım. Tarayıcı ve görüntüleme kaynağınız için değiştirin. Başka araçlar da var, ancak basit tutmak zorunlu olarak yanlış bir yaklaşım değil.
BinaryMisfit 18:09

Kullanıcıya her zaman Firefox'a güvenmekten başka bir şey öğrettiği gerçeği için iyi.
rastgele

Wikipedia göre her iki georgiave times new romanyazı karakterleri vardır. Peki, sonuç ne anlama geliyor? Bu iki yazı tipinin bir kombinasyonu mu?
Lazer

1

Web sayfasının belirli bir bölümü tarafından kullanılan tüm stilleri görmek için Web Geliştiricisi Firefox uzantısını kullanabilirsiniz. CSS menüsünü, Stil bilgilerini görüntüle'yi kullanın. Ardından, analiz etmek istediğiniz metni tıklayın ve sonuçlarda "font-family" özelliğini arayın.


Bilgi »Ekran Öğesi Bilgisi daha iyi çalışır (devralınan stilleri de gösterir ve kendinizi aramanıza gerek yoktur).
Arjan

1

Birçok insanın söylediklerinin aksine, her zaman sadece kaynak görüntüleme meselesi DEĞİLDİR - CSS'nin belgede mi yoksa harici bir css dosyasında mı olduğuna bağlıdır. Haricisa, kaynağı görüntüleyemez ve font-aile etiketini aslında dosyada olmadığı için bulamazsınız.

Google Chrome'u kullanmanızı öneren poster aslında çok iyi bir ipucu verdi - burada bir şey öğrendim ve ekstra bir ipucu eklemek istedim. Chrome'da gelen geliştirici araçlarında, "Bilgisayarlı Stili" tıklamanız ve "Miras Alınan" onay kutusunu tıklamanız ve bulmadan önce aşağı kaydırmanız gerekebilir - bu aşırı bir örnektir, ancak gösterdiği yer sayfanın nasıl yapılandırıldığı.



-1

bu satır içi bir css değilse, sayfayı kaynak görünümde açın. Tarayıcı URL'sine "/themes/01.css" yapıştır gibi css adresini kopyalayın. Dönüş hamurunu metin düzenleyicisine veya css düzenleyicisine kopyalayın. Yazı tipi veya yazı tipi ailesinin tamamlanması için find tuşunu kullanın. Boyut ve kalın, italik vb. Gibi diğer özellikler için sayfa yazı tipini görüntülemek için kullanılan listelenen yazı tipi ailesi.

Teşekkürler doronto

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.