मैं यह कैसे निर्धारित कर सकता हूं कि किसी पाठ को रेंडर करने के लिए ब्राउज़र वास्तव में किस फ़ॉन्ट का उपयोग कर रहा है?

Question

मेरा CSS font-family: Helvetica, Arial, sans-serif;पूरे पेज के लिए निर्दिष्ट करता है । ऐसा लग रहा है कि वरदाना का इस्तेमाल कुछ हिस्सों के बजाय किया जा रहा है। मैं इसे सत्यापित करने में सक्षम होना चाहूंगा।

मैंने अपने ब्राउज़र से वर्ड में कॉपी और पेस्ट करने की कोशिश की है, लेकिन यह फ़ॉन्ट को संरक्षित नहीं कर रहा है।

क्या यह निर्धारित करने का कोई तरीका है कि पाठ के एक भाग के लिए वास्तव में किस फ़ॉन्ट का उपयोग किया जा रहा है?

फायरबग मुझे ऊपर [1] के रूप में फोंट की सूची देगा, लेकिन मुझे यह निर्धारित करने का कोई तरीका नहीं दिख रहा है कि कौन सा फोंट इस्तेमाल किया जा रहा है।

1. यह पता चला है कि गलत सूची का उपयोग किया जा रहा था, जिसने मेरी मूल वर्डडाना समस्या को हल कर दिया। लेकिन मैं अभी भी उत्सुक हूँ अगर वास्तविक रेंडरिंग फॉन्ट की पहचान करने का कोई तरीका है।

Comments

stackoverflow.com/questions/845/detecting-font-in-javascript

— ajm

नीचे दिए गए जवाबों में वर्णित FontFinder और WhatFont अभी भी उपयोग किए गए फ़ॉन्ट का पता लगाने के लिए बहुत ही कच्चे रास्ते हैं। दोनों ने गलत तरीके से "क्वांटट्रॉन्सरो सैंस" (प्राथमिक फ़ॉन्ट) का संकेत दिया जब मैं एक अघानी ؋प्रतीक का चयन करता हूं जो इस फ़ॉन्ट में उपलब्ध नहीं है।

— प्रश्न अतिप्रवाह

@QuestionOverflow, आजकल फ़ायरफ़ॉक्स और क्रोम में फ़ॉन्ट निर्धारित करने के लिए अंतर्निहित उपकरण हैं। वे होगा , प्रत्येक ग्लिफ़ के लिए फ़ॉन्ट दिखाने इसलिए तुम्हें दिखाता हूँ क्या फॉन्ट कि ؋ के लिए भी इस्तेमाल किया गया था।

— अर्जन

@ अर्जन: क्या 2020 में भी ऐसा ही है?

— भक्षण किया गया

@devouredelysium, क्या आपने मेरा उत्तर देखा ? फ़ॉन्ट का उपयोग करने के लिए बस एक ग्लिफ़ चुनें।

— अर्जन

Answer 1

प्रति विल्फ्रेड ह्यूजेस 'जवाब , फायरफॉक्स अब मूल रूप से इस का समर्थन करता है। इस लेख में अधिक विवरण हैं ।

यह उत्तर मूल "फ़ॉन्ट खोजक" प्लगइन को संदर्भित करता है, लेकिन केवल इसलिए कि यह 4 साल पहले से था। तथ्य यह है कि पुराने जवाब इस तरह से जवाब देते हैं और समुदाय उन्हें अपडेट नहीं कर सकता है, स्टैक ओवरफ्लो की कुछ शेष विफलताओं में से एक है।

Comments

इसका उपयोग करने का कोई कारण नहीं है कि फ़ायरफ़ॉक्स के उपकरण> वेब डेवलपर> इंस्पेक्टर> फ़ॉन्ट्स आपको बताते हैं (विल्फ्रेड ह्यूजेस का उत्तर)

— स्कीयरपेज

दुर्भाग्य से, फ़ायरफ़ॉक्स 47 में अब आपके द्वारा इस ब्लॉग से जुड़े फ़ॉन्ट टैब को संदर्भित नहीं किया गया है: इस लेख में अधिक विवरण हैं

— Zabba

"फ़ायरफ़ॉक्स 47 में शुरू, फोंट दृश्य डिफ़ॉल्ट रूप से अक्षम है। हम अधिक पूर्ण रूप से चित्रित प्रतिस्थापन पर काम कर रहे हैं। कुछ समय के लिए, यदि आप फ़ॉन्ट दृश्य देखना चाहते हैं, तो इसके बारे में देखें: कॉन्फिगरेशन, प्रेफरेंश डेविटल्स ढूंढें। fontinspector.enabled, और इसे सच करने के लिए सेट करें। " Developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/… देखें ।

— डैनियल ले

जाहिरा तौर पर, devtools.fontinspector.enabledफ़ायरफ़ॉक्स 47 में सेटिंग की आवश्यकता थी: "फ़ायरफ़ॉक्स 47 में केवल , फ़ॉन्ट दृश्य डिफ़ॉल्ट रूप से अक्षम है। यदि आप फ़ायरफ़ॉक्स 47 में फ़ॉन्ट्स व्यू देखना चाहते हैं, तो देखें about:config, वरीयता प्राप्त करें devtools.fontinspector.enabled, और इसे trueपहले और बाद में सेट करें । फ़ायरफ़ॉक्स 47, फ़ॉन्ट दृश्य डिफ़ॉल्ट रूप से सक्षम है। " , @ दानिएल।

— अर्जन

@ डैनियल, निश्चित रूप से मैं समझ गया था कि यह उस समय सही था जब आपने पाठ की प्रतिलिपि बनाई थी :-)

— अर्जन

Answer 2

आजकल क्रोम और फ़ायरफ़ॉक्स में इसके लिए बिल्ट-इन टूल हैं, लेकिन सफारी के लिए आपको कुछ टेक्स्ट कॉपी करने और उस की जांच करने की आवश्यकता है।

सबसे पहले, कुछ पाठ का चयन करें। फ़ायरफ़ॉक्स में, पेज इंस्पेक्टर को एक फ़ॉन्ट दृश्य है :

यह आपको यह भी बताएगा कि क्या फोंट डाउनलोड किया गया था, और कौन सी शैली का उपयोग किया जाता है, जैसे कि नियमित, एक्स्ट्रालाइट, इटैलिक, बोल्ड इटैलिक और सभी।

Chrome के लिए, DevTools '' एलीमेंट्स '' में जाएँ, इसके "Computed" टैब पर जाएँ, और "रेन्डर्ड फॉन्ट्स" नामक सेक्शन में नीचे जाएँ। फ़ायरफ़ॉक्स के विपरीत, यह केवल आधार फ़ॉन्ट नाम दिखाता है, किसी विशिष्ट शैली का उपयोग नहीं करता है:

उपरोक्त स्क्रीनशॉट दिखाते हैं कि यूनिकोड पाठ के लिए कई फोंट दिखाए जा सकते हैं। Chrome आपको 6 ग्लिफ़्स ("पेकका" और स्थान) "एरियल" का उपयोग कर रहा है, और एक ("using") "एप्पल एसडी गॉथिक नियो" का उपयोग कर रहा है:

एरियल - स्थानीय फ़ाइल (6 ग्लिफ़)
Apple SD गोथिक नियो - स्थानीय फ़ाइल (1 ग्लिफ़)

वास्तविक सीएसएस परिभाषित करता है:

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

लेकिन उन फोंट में अक्सर कई विशेष वर्ण शामिल नहीं होते हैं। जैसा कि फ़ॉन्ट जानकारी HTML तत्व के अनुसार काम करती है, जहां एक तत्व में यूनिकोड पाठ वास्तव में कई फोंट का उपयोग कर सकता है, यह कई फोंट भी दिखाता है। जब संदेह हो, तो बस HTML फलक में पाठ को डबल-क्लिक करें और उस पाठ से छुटकारा पाएं जिसमें आप रुचि नहीं रखते हैं। फिर, जब आसपास के तत्व को फिर से चुनते हैं, तो आपको बस एक विकल्प दिखाई देगा। इस मामले में यह आपको बताएगा कि दोनों ब्राउज़रों ने "웃" चरित्र के लिए "Apple SD गोथिक नियो रेगुलर" का उपयोग किया था।

दुर्भाग्य से, एक ही मशीन पर अलग-अलग ब्राउज़र (और यहां तक ​​कि एक ही ब्राउज़र के अलग-अलग संस्करण) अलग-अलग फोंट का उपयोग कर सकते हैं, क्योंकि ब्राउज़र द्वारा समर्थित / पसंदीदा फ़ॉन्ट प्रकार। एक मैक पर, उदाहरण के लिए, सफारी Apple एडवांस्ड टेक्नोलॉजी पसंद कर सकती है जबकि फ़ायरफ़ॉक्स Microsoft ओपन टाइप का समर्थन करता है (जो मैक पर माइक्रोसॉफ्ट ऑफिस स्थापित करने के बाद अरबी के लिए समस्याएं पैदा कर सकता है )। या ऊपर के स्क्रीनशॉट में "for" वर्ण के लिए, मेरे मैक पर क्रोम और फ़ायरफ़ॉक्स आजकल "Apple SD गोथिक नियो" (जो OpenType PostScript है) पसंद करते हैं लेकिन फ़ायरफ़ॉक्स के पुराने संस्करणों ने इसके बजाय "AppleGothic Regular" का उपयोग किया (जो ट्रू टाइप फ़ॉन्ट है) ।

ऐसे ब्राउज़र जिनके लिए एक समान फ़ॉन्ट दृश्य नहीं है, बस किसी शब्द प्रोसेसर या रिच टेक्स्ट एडिटर में टेक्स्ट के एक टुकड़े को कॉपी और पेस्ट करें, कुछ विशिष्ट टेक्स्ट का चयन करें, और देखें कि कुछ फ़ॉन्ट ड्रॉपडाउन सूची में कौन सा नाम दिखाता है। मेरे मैक पर, यह फ़ायरफ़ॉक्स से पेस्ट करने पर काम नहीं करता है (जहां "Firefox" फ़ायरफ़ॉक्स के "Apple SD गोथिक नियो" को पेस्ट करने पर "AppleMyungjo" में बदल दिया जाता है), लेकिन सफारी और क्रोम के लिए अच्छा काम करता है:

Comments

क्या आपको पता है कि सफारी में इसके लिए कोई प्लगइन या कुछ है?

— एंड्री

Chrome 47 में, सुनिश्चित करें कि आप कम्प्यूटेड अनुभाग के नीचे स्क्रॉल करें। font-familyविशेषता के विस्तार के रूप में यह प्रकट होता है (वर्णानुक्रम में) प्रदर्शित नहीं होगा कि कौन सा फ़ॉन्ट लोड किया जा रहा है। यह जानकारी सबसे नीचे दिखाई देती है।

— मर्चको

@ मिरचको, क्या होता है जब आपका संगणित फ़ॉन्ट "सेरिफ़" और "सेन्स-सेरिफ़" जैसा एक सामान्य फ़ॉन्ट होता है? फिर आपको वास्तविक फ़ॉन्ट कैसे मिलेगा ?

— पचेरियर

Chrome में @Pacerier, कम्प्यूटेड टैब में सभी तरह से नीचे स्क्रॉल करें ; फ़ायरफ़ॉक्स में अलग टैब देखें।

— अर्जन

@ टीएमजी, मैं कल्पना कर सकता हूं कि वेब फोंट को किसी अन्य व्यक्ति की आवश्यकता नहीं हो सकती है, लेकिन सीधे कुछ URL को संदर्भित कर सकता है। क्या यह एक सार्वजनिक वेबसाइट है जिसे हम देख सकते हैं? यदि नहीं, तो फ़ायरफ़ॉक्स क्या दिखाता है?

— अर्जन

Answer 3

फ़ायरफ़ॉक्स 22+ आपको दिखाएगा कि वर्तमान में कौन सा फ़ॉन्ट उपयोग में है , बिना किसी एक्सटेंशन के।

Comments

यह वास्तव में अब निश्चित उत्तर होना चाहिए। एक्सटेंशन स्थापित करने की आवश्यकता नहीं है।

— डेन ईस्टवेल

लेकिन एक ब्राउज़र जो शायद कोई उपयोग नहीं करता है। इस अर्थ में विस्तार अधिक हल्का होता है।

— b1nary

Answer 4

व्हाट्सएप एक क्रोम एक्सटेंशन है जो आपको विशेष रूप से बताएगा कि फॉन्ट स्टैक में कौन सा फ़ॉन्ट लोड किया जा रहा है।

Comments

मेरे लिए यह कहता है कि कौन सा फ़ॉन्ट घोषित किया गया है, लेकिन वह नहीं जो वास्तव में फ़ॉन्ट का उपयोग किया जाता है।

— 17

इस लेख के अनुसार ( updates.html5rocks.com/2013/09/… ), देव टूल्स अब आपको बता सकते हैं कि वास्तविक फ़ॉन्ट क्या है।

— 1

व्हाट्सएप ने प्रदान किए गए फ़ॉन्ट का पता लगाने का प्रयास किया है, लेकिन ऐसा सफलतापूर्वक दिखाई नहीं देता है github.com/chengyin/WhatFont-Bookmarklet/issues/13

— क्रिस मैरिसिक

Answer 5

फ़ायरफ़ॉक्स के वर्तमान संस्करणों के लिए (v7 के बाद से), "fontinfo" नामक एक ऐड-ऑन है जो वास्तविक फ़ॉन्ट का उपयोग करने की रिपोर्ट करेगा (बजाय सीएसएस फ़ॉन्ट-पारिवारिक संपत्ति का कहना है), उन मामलों का ध्यान रखते हुए जहां ब्राउज़र वापस आता है। एक भिन्न फ़ॉन्ट क्योंकि अनुरोधित फ़ॉन्ट-परिवार उपलब्ध नहीं था या पाठ में प्रयुक्त वर्णों का समर्थन नहीं करता था।

Comments

अब तक, यह सबसे अच्छा जवाब है

— इंगो केगेल

Answer 6

आप फ़ायरफ़ॉक्स के लिए फ़ायरबग के साथ उस विशिष्ट अनुभाग की जाँच करने की कोशिश कर सकते हैं। यह आपको सभी सटीक गुण प्रदान करना चाहिए।

Comments

यह अभी भी मुझे सूची देता है, वह विशिष्ट नहीं जिसे यह उपयोग कर रहा है ... लेकिन एक दूसरे चेक पर, वरदाना ने किसी तरह फ़ॉन्ट-परिवार सूची में प्रवेश किया, जो मेरी मूल समस्या का कारण होगा। तो धन्यवाद।

— दोपहर

फायरबग आपको यह भी बताएगा कि कौन से नियम उस फॉन्ट को देने के लिए फायरिंग कर रहे हैं - वर्कआउट के लिए बहुत उपयोगी है जहां आपका सीएसएस गलत हो रहा है।

— रिचीहिंडले

सफारी 4 बीटा में एक वेब इंस्पेक्टर है, (एक चमड़ी वाली फायरबग भी हो सकती है)

— vikingosegundo

मुझे लगता है कि आप हमेशा पूरी सूची प्राप्त करेंगे, जो भी उपकरण आप उपयोग करते हैं। उपयोग किया गया फ़ॉन्ट उस सूची में पहला है जो आपके कंप्यूटर पर स्थापित है।

— जेरोइन

Firebug वर्तमान में (1.11.4, शायद पहले भी) नीले रंग में वर्तमान फ़ॉन्ट पर प्रकाश डालता है।

— मार्क Vrabel

Answer 7

जेरेमी द्वारा उल्लिखित "FontFinder" प्लगइन यहां काम नहीं करता है, सीएसएस सूची का पहला फ़ॉन्ट वास्तव में प्रदान किए गए फ़ॉन्ट (लिनक्स पर फ़ायरफ़ॉक्स 4.0rc1) की परवाह किए बिना देता है। निम्नलिखित प्लगइन आपको "सही" फ़ॉन्ट देता है, ऐसा लगता है।

प्रसंग फ़ॉन्ट

Comments

दुर्भाग्य से, यहां तक ​​कि कॉन्टेक्ट फ़ॉन्ट भी उदाहरण के लिए सीरेड या सींस-सेरिफ़ हो सकता है, जो केवल गणना किए गए सीएसएस परिवार को दर्शाता है। इसके अलावा, अगर कुछ चरित्र गणना किए गए फ़ॉन्ट में मौजूद नहीं है और ब्राउज़र इसे एक अलग फ़ॉन्ट से चुनता है, तो संदर्भ फ़ॉन्ट अभी भी गणना किए गए फ़ॉन्ट परिवार को दिखाता है, वास्तविक फ़ॉन्ट को नहीं।

— जुका के। कोर्पेला

Answer 8

ललित पटेल से पाठ-मापने के दृष्टिकोण और स्क्रिप्ट के आधार पर, मैंने ऐसे बुकमार्क बनाए हैं जो अनुमान लगा सकते हैं कि वर्तमान में चयनित पाठ के लिए उपयोग किया जा रहा है (या body, यदि कुछ नहीं चुना गया है)। यह मेरे लिए बहुत अच्छी तरह से काम करने के लिए लगता है कि एक स्टैक में किस फ़ॉन्ट का उपयोग किया जाता है! (यह आपको नहीं बता सकता है कि sans-serifवास्तव में नक्शे क्या हैं , हालांकि)

उन्हें यहाँ पकड़ो: https://alanhogan.com/bookmarklets#font-stack-full

स्रोत GitHub पर है ।

यह भी देखें: यह कोडपैन , जो ज्यादातर एक ही कोड का उपयोग करता है। चयनित विभिन्न पैराग्राफों द्वारा इसे आज़माएं और तालिका / अनुमान अपडेट देखें!