Bazı metinleri oluşturmak için tarayıcının gerçekte hangi yazı tipini kullandığını nasıl belirleyebilirim?

175

CSS'm font-family: Helvetica, Arial, sans-serif;tüm sayfa için " " belirtiyor . Görünüşe göre bazı bölümlerde Verdana kullanılıyor. Bunu doğrulamak istiyorum.

Tarayıcımdan Word'e kopyalayıp yapıştırmayı denedim, ancak yazı tipini korumuyor.

Metnin bir bölümü için gerçekte hangi yazı tipinin kullanıldığını belirlemenin bir yolu var mı?

Firebug bana yukarıdaki yazı tiplerinin listesini verecektir [1], ancak hangi yazı tiplerinden birinin kullanıldığını belirlemenin bir yolunu göremiyorum.

  1. Orijinal Verdana sorunumu çözen yanlış listenin kullanıldığı anlaşılıyor. Ancak, gerçek oluşturma yazı tipini tanımlamanın bir yolu olup olmadığını merak ediyorum.
css  browser  fonts 
— lavaturtle
kaynak
— ajm
Aşağıdaki cevaplarda açıklanan FontFinder ve WhatFont, kullanılan yazı tipini tespit etmenin hala çok kaba yoludur. ؋Bu yazı tipinde bulunmayan bir Aghani sembolü seçtiğimde, her ikisi de yanlışlıkla "Quanttrocentro Sans" ı (birincil yazı tipi) gösterdi .
— Question Overflow
@QuestionOverflow, günümüzde Firefox ve Chrome'un yazı tipini belirlemek için yerleşik araçları var. Onlar olacak dolayısıyla yazı de o ؋ ne için kullanıldığını gösterecektir, Her simgeye için yazı tipini gösterir.
— Arjan
@Arjan: 2020'de durum hala böyle mi?
— elysium
@devouredelysium gördünüz mü cevabımı ? Hangi yazı tipinin kullanıldığını görmek için tek bir glif seçin.
— Arjan

Yanıtlar:

50

Başına Wilfred Hughes'un cevap Firefox şimdi doğal olarak bu destekler. Bu makalede daha fazla ayrıntı var .

Bu yanıt orijinal, "Font Finder" eklentisine referansta bulundu, ancak sadece 4 yıl önceydi. Eski cevapların bu şekilde devam etmesi ve topluluğun bunları güncelleyememesi, Stack Overflow'un kalan birkaç başarısızlığından biridir.

— Jeremy Kauffman
kaynak
7
Bunu kullanmak için bir neden yok, Firefox'un Araçları> Web Geliştiricisi> Müfettiş> Yazı Tipleri size (Wilfred Hughes'un cevabı)
— skierpage
1
Ne yazık ki, Firefox 47 artık bu blogda bağlantı verdiğiniz Yazı Tipleri sekmesine sahip değil: Bu makalede daha fazla ayrıntı var
— Zabba
3
"Firefox 47'den başlayarak, Yazı Tipleri görünümü varsayılan olarak devre dışıdır. Daha tam özellikli bir değiştirme üzerinde çalışıyoruz. Şimdilik, Yazı Tipleri görünümünü görmek istiyorsanız about: config, tercih devtools'u bulun. fontinspector.enabled öğesini seçin ve doğru olarak ayarlayın. " Developer.mozilla.org/tr-TR/docs/Tools/Page_Inspector/How_to/… adresine bakın .
— Daniel Le
1
Görünüşe göre, ayar devtools.fontinspector.enabledyalnızca Firefox 47'de gerekliydi: " Yalnızca Firefox 47'de Yazı Tipleri görünümü varsayılan olarak devre dışıdır. Firefox 47'deki Yazı Tipleri görünümünü görmek istiyorsanız, adresini ziyaret edin about:config, tercihi bulun devtools.fontinspector.enabledve olarak ayarlayın true. Önce ve sonra Firefox 47, Yazı Tipleri görünümü varsayılan olarak etkindir. " , @DanielLe.
— Arjan
1
@DanielLe, tabii ki metni kopyaladığınız zaman doğru olduğunu anladım :-)
— Arjan
151

Günümüzde Chrome ve Firefox'ta bunun için yerleşik araçlar var, ancak Safari'nin bazı metinleri kopyalamanız ve araştırmanız gerekiyor.

İlk önce bir metin seçin. Firefox'ta, Sayfa Denetçisinin bir Yazı Tipleri görünümü vardır :

Firefox Fonts Görüntüle

Bu ayrıca yazı tiplerinin indirilip indirilmediğini ve Düzenli, Ekstra Işık, İtalik, BoldItalic ve tümü gibi hangi stilin kullanıldığını size bildirir.

Chrome için DevTools'un "Öğeleri" ne gidin, "Hesaplanmış" sekmesine gidin ve "Oluşturulmuş Fontlar" adlı bölüme kadar aşağı kaydırın. Firefox'tan farklı olarak, bu yalnızca temel yazı tipi adını gösterir, kullanıyor olabileceği belirli bir stili göstermez:

Chrome web denetçisi

Yukarıdaki ekran görüntüleri Unicode metni için birden fazla yazı tipinin gösterilebileceğini göstermektedir. Chrome size 6 glif ("Pekka" ve boşluk) "Arial" ve bir ("웃") "Apple SD Gothic Neo" kullandığını bildirir:

Arial - Yerel dosya (6 glif)
Apple SD Gothic Neo - Yerel dosya (1 glif)

Gerçek CSS şunları tanımlar:

font-family: Arial,"Helvetica Neue",Helvetica,sans-serif

Ancak bu yazı tipleri genellikle çok sayıda özel karakter içermez. Yazı tipi bilgileri, bir öğedeki Unicode metninin aslında birden çok yazı tipi kullanabileceği her HTML öğesi için çalıştığından, birden fazla yazı tipi de gösterir. Şüphe duyduğunuzda, HTML bölmesindeki metni çift tıklayın ve ilgilenmediğiniz metinden kurtulun. Ardından, çevreleyen öğeyi tekrar seçerken, sadece bir seçenek göreceksiniz. Bu durumda, her iki tarayıcının "웃" karakteri için "Apple SD Gothic Neo Regular" kullandığını söyler.

Ne yazık ki, aynı makinedeki farklı tarayıcılar (ve hatta tek bir tarayıcının farklı sürümleri), bir tarayıcı tarafından desteklenen / tercih edilen yazı tipi türleri nedeniyle farklı yazı tipleri kullanabilir. Örneğin bir Mac'te, Firefox Microsoft OpenType'ı ( Microsoft Office'i bir Mac'e yükledikten sonra Arapça için sorunlara neden olabilir) desteklerken Safari, Apple Gelişmiş Teknolojisini tercih edebilir . Veya yukarıdaki ekran görüntülerindeki "웃" karakteri için, Mac'imdeki Chrome ve Firefox bugünlerde "Apple SD Gothic Neo" yu (OpenType PostScript) tercih ediyor, ancak Firefox'un eski sürümleri bunun yerine "AppleGothic Regular" kullanıyor (TrueType yazı tipi) .

Benzer yazı tipi görünümüne sahip olmayan tarayıcılar için, metnin bir kısmını kopyalayıp bir kelime işlemciye veya Zengin Metin düzenleyicisine yapıştırın, belirli bir metin seçin ve bazı yazı tipi açılır listesinde hangi adın göründüğüne bakın. Mac bilgisayarımda bu, Firefox'tan yapıştırırken çalışmaz ("웃" Firefox'un "Apple SD Gothic Neo" ifadesi yapıştırma sırasında "AppleMyungjo" ya dönüştürülür), ancak Safari ve Chrome için iyi çalışır:

Tarayıcıdan zengin metin düzenleyicisine yapıştırılan metin

— Arjan
kaynak
1
Safari'de bunun için bir eklenti veya başka bir şey olup olmadığını biliyor musunuz?
— Andry
4
Chrome 47'de, Hesaplanan bölümünün altına kaydırdığınızdan emin olun. font-familyÖzelliğin göründüğü gibi genişletilmesi (alfabetik sırayla) hangi yazı tipinin yüklendiğini göstermez. Bu bilgi en altta görünür.
— Merchako
1
@Merchako, Hesaplanan yazı tipiniz "serif" ve "sans-serif" gibi genel bir yazı tipi olduğunda ne olur? Peki gerçek yazı tipini nasıl elde edersiniz?
— Pacerier
2
@Pacerier, Chrome'da Hesaplanan sekmesinde aşağı doğru kaydırın ; Firefox'ta ayrı sekmeye bakın.
— Arjan
1
@TMG, web yazı tiplerinin takma ada gerekmeyebileceğini, ancak doğrudan bazı URL'lere başvurabileceğini hayal edebiliyorum. Bu, bakabileceğimiz herkese açık bir web sitesi mi? Değilse, Firefox ne gösterir?
— Arjan
30

WhatFont , özellikle yazı tipi yığınındaki hangi yazı tipinin yüklendiğini söyleyen bir Chrome uzantısıdır.

— user1100745
kaynak
6
Benim için hangi yazı tipinin bildirildiğini söylüyor, ama aslında hangi yazı tipinin kullanıldığını söylemiyor.
— panzi
3
Bu makaleye göre ( updates.html5rocks.com/2013/09/… ), Dev Tools artık gerçek yazı tipinin ne olduğunu söyleyebilir.
— 01
WhatFont, oluşturulan yazı tipini algılamaya çalışır ancak başarılı olamıyor
— Chris Marisic
7

Firefox'un mevcut sürümleri için (v7'den beri), tarayıcının geri düştüğü durumları dikkate alarak, kullanılan gerçek yazı tipini (CSS yazı tipi-aile özelliğinin söylediklerinden ziyade) raporlayacak "fontinfo" adlı bir eklenti vardır. istenen yazı tipi ailesi kullanılamıyor veya metinde kullanılan karakterleri desteklemediğinden farklı bir yazı tipi.

— Jonathan
kaynak
Şimdiye kadar, bu en iyi cevap
— Ingo Kegel
1

Firefox için Firebug ile ilgili bölümü kontrol etmeyi deneyebilirsiniz. Size tüm özellikleri vermelidir.

— jeroen
kaynak
Bu hala bana listeyi veriyor, kullandığı özel listeyi vermiyor ... Ama ikinci bir kontrolde, Verdana bir şekilde font-aile listesine girdi, bu da orijinal sorunumun nedeni olurdu. Çok teşekkürler.
— lavaturtle
1
Firebug ayrıca öğeye yazı tipini vermek için hangi kuralların tetiklendiğini söyleyecektir - CSS'nizin nerede yanlış gittiğini bulmak için çok yararlıdır.
— RichieHindle
Safari 4 Beta da bir WebInspector'a sahip (derili bir kundakçı olabilir)
— vikingosegundo
1
Kullandığınız araç ne olursa olsun her zaman tam listeyi alacağınızı düşünüyorum. Kullanılan yazı tipi, bilgisayarınızda yüklü olan listedeki ilk fonttur.
— jeroen
2
Şu anda kundakçı (1.11.4, belki de daha önce) geçerli yazı tipini mavi renkte vurgular.
— Mark Vrabel
1

Jeremy tarafından bahsedilen "FontFinder" eklentisi burada işe yaramıyor gibi görünüyor, aslında CSS listesinin ilk yazı tipini (aslında Linux'ta Firefox 4.0rc1) oluşturuyor. Aşağıdaki eklenti size "doğru" yazı tipini veriyor, öyle görünüyor.

Bağlam Yazı Tipi

— Dave Vogt
kaynak
Ne yazık ki, Bağlam Yazı Tipi bile sadece serif veya sans-serif olabilecek hesaplanmış CSS ailesini gösterir. Ayrıca, hesaplanan yazı tipinde bir karakter yoksa ve tarayıcı onu farklı bir yazı tipinden alırsa, Bağlam Yazı Tipi hala gerçek yazı tipini değil, hesaplanan yazı tipi ailesini gösterir.
— Jukka K. Korpela
0

Lalit Patel'in metin ölçme yaklaşımına ve komut dosyasına dayanarak, seçili olan metin (veya hiçbir şey seçilmemişse) için kullanılan yazı tipini tahmin edebilen yer imleri oluşturdum body. Bir yığındaki hangi yazı tipinin kullanıldığını anlamak için benim için çok iyi çalışıyor gibi görünüyor! (Bununla birlikte, sans-serifaslında neyin eşleştiğini söyleyemez .)

Onları buradan alın: https://alanhogan.com/bookmarklets#font-stack-full

Kaynak GitHub'da .

Ayrıca bkz: çoğunlukla aynı kodu kullanan bu CodePen . Seçilen farklı paragrafları deneyerek ve tablo / tahmin güncellemesini izleyerek deneyin!

— Alan H.
kaynak
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.