मैं कैसे जान सकता हूं कि वेबसाइट किस फॉन्ट का उपयोग कर रही है?

Question

मैं कैसे पता लगा सकता हूं कि वेबसाइट किस फ़ॉन्ट या फोंट का उपयोग कर रही है? क्या कोई उपकरण या ब्राउज़र एक्सटेंशन हैं जो काम को आसान बना सकते हैं?

Comments

क्रोम और फ़ायरफ़ॉक्स में अंतर्निहित टूल के लिए स्टैक ओवरफ़्लो पर मेरा जवाब देखें और सफारी के लिए एक कॉपी-पेस्ट विकल्प: stackoverflow.com/questions/884177/…

— Arjan

जवाब देने के लिए 10 प्रतिनिधि के बिना मैं इसे यहां करता हूं: जैसा कि इस क्षण (2018.3) के अनुसार, फाउंटेन उपलब्ध नहीं है, और फ़ायरफ़ॉक्स ऐड-ऑन स्टोर में व्हाट्सएप सुलभ नहीं है; अंत में मुझे Chrome / IE / FF / Opera के DevTool, "स्टाइल" टैब में प्रवेश करना होगा, प्रत्येक फ़ॉन्ट को हटाने के लिए संपत्ति को संपादित करें और देखें कि लागू फ़ॉन्ट क्या है। यह एक बड़ी अफ़सोस की बात है कि सभी DevTools केवल फोंट का पूरा ढेर दिखाते हैं और वास्तव में लागू नहीं होते हैं । एफएफ में भी, "सबसे अच्छा मिलान" सबसे अच्छा मिलान नहीं है; ढेर में हर फ़ॉन्ट पर "सबसे अच्छा मिलान" पॉप-अप शो ........ मूर्खतापूर्ण सही?

— पश्चिमीगुन

@WesternGun, "सभी DevTools" से आपका क्या तात्पर्य है ? फ़ायरफ़ॉक्स और क्रोम वास्तविक फ़ॉन्ट को ठीक दिखाते हैं; मेरे पहले की टिप्पणी से जुड़े उत्तर में स्क्रीनशॉट देखें।

— अर्जन

ठीक है मैंने स्क्रीनशॉट @Arjan को अनदेखा कर दिया। अब यह स्पष्ट है।

— पश्चिमीगंज

Answer 1

विकल्प 1: ब्राउज़र एक्सटेंशन का उपयोग करें (आसान)

व्हाट्सएप (क्रोम, फ़ायरफ़ॉक्स और सफारी के लिए उपलब्ध) जैसे एक्सटेंशन एक वेबपेज में किसी भी टेक्स्ट के फ़ॉन्ट परिवारों का पता लगाने में काफी आसान बनाते हैं। आपको केवल एक्सटेंशन इंस्टॉल करने की आवश्यकता है, इसे एक साइट पर सक्रिय करें और उस तत्व पर क्लिक करें जिसे आप निरीक्षण करना चाहते हैं। परिणाम एक फ्लोटिंग बॉक्स में दिखाए जाते हैं, हमेशा आपकी पसंद के संदर्भ में।

---

विकल्प 2: मैन्युअल रूप से ब्राउज़र निरीक्षकों के साथ CSS की जाँच करें (उन्नत)

अधिकांश वेब ब्राउज़र आपको right-click→ 'निरीक्षण' या 'निरीक्षण तत्व' का उपयोग करके आसानी से फोंट ढूंढने देते हैं । इसे दबाकर भी किया जा सकता है F12। यह वेबसाइट से जुड़ी शैलियों की एक सूची दिखाएगा, जिसे आप किसी भी HTML तत्व में उपयोग किए गए फोंट को खोजने के लिए देख सकते हैं।

इंस्पेक्टर का उपयोग विस्तार के रूप में सीधा नहीं है, लेकिन इसके कई फायदे हैं। कुछ सीएसएस समझ की आवश्यकता है, क्योंकि आपको आमतौर पर लागू होने के लिए कई शैलियों से गुजरना होगा। एक सामान्य नियम के रूप में, जिन शैलियों को पार किया गया है, उन्हें ओवरराइट किया जा रहा है, इसलिए हमेशा उन लोगों की तलाश करें जिन्हें अंतिम रूप से लागू किया जा रहा है।

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

अंत में, विश्व स्तर पर फोंट का उपयोग जल्दी से करने का एक और तरीका है (लेकिन नहीं है कि कैसे या कहां) 'एप्लीकेशन → फ्रेम्स → फोंट' पर जाना है । वहां, आपको सभी संदर्भित (गैर-सिस्टम) फोंट की एक सूची मिलेगी।

यह दूसरी विधि धीमी है, लेकिन इंस्पेक्टर का उपयोग आपको पूरे पृष्ठ के निर्माण के तरीके में महान अंतर्दृष्टि प्रदान कर सकता है। इसके अलावा, बहुत से डिज़ाइनर और डेवलपर इसे वास्तव में स्टाइलशीट पर लिखने से पहले परिवर्तनों के परीक्षण के लिए एक उपकरण के रूप में उपयोग करते हैं (क्योंकि निरीक्षक में सीएसएस लाइन बदलने से ब्राउज़र में एक वास्तविक समय पूर्वावलोकन ट्रिगर होता है)।

Comments

अच्छा कदम :-) एक विचार - कैसे बताएं कि फ़ॉन्ट परिवार स्टैक में कौन सा फ़ॉन्ट है जिसे आप वास्तव में स्क्रीन पर देख रहे हैं? मैं आमतौर पर इसे ट्रायल-एंड-एरर के द्वारा करता हूं, पहले फॉन्ट से डिलीट होने तक यह दिखने में बदलाव का कारण बनता है, लेकिन मुझे यकीन है कि इसका एक बेहतर तरीका है। WhatFont में इटैलिक में एक है? (ps welcome back!)

— user56reinstatemonica8

@ user568458 धन्यवाद :) मैं निश्चित रूप से निरीक्षक के साथ फ़ॉन्ट खोजने की प्रक्रिया के स्क्रीनशॉट जोड़ना चाहता हूं। मेरे पास इसका उपयोग करने के वर्षों बाद भी एक कठिन समय है! लेकिन ईमानदार होने के लिए, मेरे पास वास्तव में एक उचित तकनीक नहीं है, मैं परीक्षण और त्रुटि भी करता हूं। व्हाट्सएप में मेरा मानना ​​है कि इटैलिक में होने का मतलब है कि यह सिस्टम फॉन्ट नहीं है।

— यिसेला

@ यिसेला उत्सुकता से बाहर क्यों व्हाट्सएप स्क्रीनशॉट एक नीले रंग के फ़ॉन्ट का लाल रंग हड़पने (# ea4858) दिखाता है? क्या यह सिर्फ आपके द्वारा पकड़ा गया रंग है या कोई त्रुटि है? संपादित करें: ओह, मैं देख रहा हूं कि जब आप उस तत्व का चयन कर रहे थे, तो यह संभवत: हॉवर का रंग है, जो अन-आइडेंटल लगता है, लेकिन फिर भी ठंडा है।

— दासबस्तो

@DasBeasto हां, यह हॉवर रंग है! i.imgur.com/5NLjaEV.png अच्छा बिंदु हालांकि, मैनुअल निरीक्षण के लिए एक और जीत, क्योंकि यह आपको विभिन्न इंटरैक्शन स्टेट्स चुनने देता है।

— यिशेला

इसके अलावा, जोड़ना चाहता था, फ़ायरफ़ॉक्स (v35.0) फोंट के लिए एक अच्छा तत्व निरीक्षक है। आप फ़ॉन्ट टैब का चयन कर सकते हैं जो आपको आपके द्वारा चुने गए तत्व (फ़ॉन्ट परिवार, शैली, फ़ाइल टाइप) के बारे में सभी विवरण बताएगा, या "पृष्ठ में उपयोग किए गए सभी फ़ॉन्ट दिखा सकता है" जो सर्वर से डाउनलोड किए गए सभी को दिखाएगा। फिर आप गणना किए गए टैब पर जा सकते हैं जो आपको क्रोम के अतिरिक्त अव्यवस्था और विरासत के बिना रंग आकार आदि जैसी चीजें भी बताएगा।

— दासबस्तो

Answer 2

ब्राउज़र का 'निरीक्षण तत्व' सही नहीं है

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

एक अन्य उपयोगी उपकरण फाउंटेन है ।

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

फ़ाउंटेन का उपयोग करना बुकमार्क को जोड़ना जितना आसान है। कोई ऐप या कोई एक्सटेंशन इंस्टॉल करने की आवश्यकता नहीं है।

बुकमार्क जोड़ने के बाद:

1. किसी भी साइट पर जाएं और फाउंटेन बुकमार्क पर क्लिक करें।
2. किसी भी प्रकार पर क्लिक करें जिसे आप पहचानना चाहते हैं। दोहराएँ।
3. Fount बंद करने के लिए, बस बुकमार्कलेट पर फिर से क्लिक करें।

फाउंटेन सफारी, क्रोम, फायरफॉक्स और IE8 + में काम करता है।

Comments

फाउंटेन अच्छा है कि यह IE के लिए भी काम करता है, लेकिन व्हाट्सएप बेहतर किराया देता है क्योंकि यह आपको वास्तविक दृश्यमान फ़ॉन्ट और साथ ही HTML मार्कअप में निर्दिष्ट फ़ॉन्ट दिखाता है। इसलिए तुलना जल्दी है।

— मोइज़ टंकीवाला

साइट डाउन ... 2018 में उपलब्ध नहीं

— वेस्टर्नगुन

@FaithR सस्ता साइट (और स्क्रिप्ट) अभी भी मेरे लिए पूरी तरह से अच्छी तरह से काम करता है

— कै

मैं साइट में प्रवेश करता हूं और बस बाईं ओर एक ग्रे ब्लॉक देखता हूं, बिना किसी निर्देश के या कुछ भी नहीं? मैं चित्र अपलोड नहीं कर पा रहा हूं लेकिन यह अजीब लग रहा है। fount.artequalswork.com/

— WesternGun

@FaithR सस्ता साइट इस तरह दिखना चाहिए: i.stack.imgur.com/goShP.png (हालांकि आप छवियों को अपलोड नहीं करते हैं, यह सिर्फ एक बुकमार्क है जिसका उपयोग आप लाइव साइटों पर उपयोग किए जाने वाले फोंट का निरीक्षण करने के लिए करते हैं)

— कै

Answer 3

मुझे Chrome ब्राउज़र एक्सटेंशन CSSViewer बहुत पसंद है । आप बस इसे क्लिक करें और उस फ़ॉन्ट पर होवर करें जिसे आप पहचानना चाहते हैं और यह आपको फ़ॉन्ट-परिवार दिखाता है।

Answer 4

FontFinder डिज़ाइनर्स, डेवलपर्स और टाइपोग्राफ़रों के लिए बनाया गया है। यह एक उपयोगकर्ता को किसी भी पृष्ठ पर किसी भी तत्व की फ़ॉन्ट जानकारी का विश्लेषण करने, क्लिपबोर्ड पर उस जानकारी के किसी भी टुकड़े की प्रतिलिपि बनाने और नए लेआउट का परीक्षण करने के लिए इनलाइन प्रतिस्थापन करने की अनुमति देता है।

यह ऐड फॉन्ट और अन्य सीएसएस जैसे कि फॉन्ट वेट, साइज और कई और फॉर्म वेबपेज खोजने के लिए सबसे अच्छा है।

Comments

खुशबु, जीडीएसई में आपका स्वागत है। क्या आप हमें बता सकते हैं कि हम "FontFinder" क्या और कहाँ कर सकते हैं? इसके अलावा, यदि आप उत्पाद से संबद्ध हैं, तो आपको अपने उत्तरों में अपनी संबद्धता का खुलासा करना होगा । देखें कि कैसे एक स्पैमर नहीं है ।

— कै

ऊपर दिए गए उत्तर का पाठ chrome.google.com/webstore/detail/font-finder/… और / या add0n.com/font-finder.html

— क्रिस डब्ल्यूएन