कैसे पता लगाया जाए कि वेब पेज में परिभाषित फॉन्ट में से किसका इस्तेमाल किया गया था?

Question

मान लीजिए कि मेरे पृष्ठ में निम्नलिखित सीएसएस नियम हैं:

body {
  font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}

मैं कैसे पता लगा सकता हूं कि उपयोगकर्ता के ब्राउज़र में कौन से परिभाषित फोंट का उपयोग किया गया था?

लोगों के लिए यह सोचकर संपादित करें कि मैं ऐसा क्यों करना चाहता हूं: जिस फ़ॉन्ट का मैं पता लगा रहा हूं उसमें ग्लिफ़ है जो अन्य फ़ॉन्ट में उपलब्ध नहीं है और जब उपयोगकर्ता के पास वह फ़ॉन्ट नहीं है, तो मैं एक लिंक प्रदर्शित करना चाहता हूं जिससे उपयोगकर्ता उस फ़ॉन्ट को डाउनलोड करने के लिए कह सके। सही फ़ॉन्ट के साथ मेरे वेब एप्लिकेशन का उपयोग कर सकते हैं।

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

Comments

एक बात का ध्यान रखें कि कुछ ब्राउजर कुछ लापता फोंट को समान फोंट से बदल देंगे, जो जावास्क्रिप्ट / सीएसएस ट्रिक का उपयोग करके पता लगाना असंभव है। उदाहरण के लिए, विंडोज ब्राउजर एरियल को हेल्वेटिका के लिए स्थानापन्न करेगा यदि यह स्थापित नहीं है। चाल MojoFilter और ड्रैगनमाटक का उल्लेख अभी भी रिपोर्ट करेगा कि हेलवेटिका स्थापित है, भले ही यह नहीं है।

— tlrobinson

सावधानी का एक छोटा नोट: यदि आप कैलिब्री को डाउनलोड करने के लिए एक लिंक दे रहे हैं, तो ध्यान रखें कि हालांकि यह कई Microsoft उत्पादों के भीतर बंडल किया गया है, यह एक मुफ्त फ़ॉन्ट नहीं है, और आप इसे डाउनलोड करने की पेशकश करके कॉपीराइट का उल्लंघन कर रहे हैं।

— एडम हेप्टन

Answer 1

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

यहाँ यह कहाँ से आया है: जावास्क्रिप्ट / सीएसएस फ़ॉन्ट डिटेक्टर (ajaxian.com; 12 मार्च 2007)

Comments

तत्व measureTextसे उपयोग करने वाला एक और तरीका canvas: github.com/Wildhoney/DetectFont

— Wildhoney

Answer 2

मैंने एक साधारण जावास्क्रिप्ट टूल लिखा है जिसका उपयोग आप यह जांचने के लिए कर सकते हैं कि कोई फ़ॉन्ट स्थापित है या नहीं।
यह सरल तकनीक का उपयोग करता है और अधिकांश समय सही होना चाहिए।

gFub पर jFont चेकर

Comments

फ़ॉन्ट पहचान समस्या को हल नहीं करता है। आप इसे घोषित फोंट को पुनरावृत्त करने के लिए उपयोग कर सकते हैं और यह सत्यापित कर सकते हैं कि क्या मान्य है, लेकिन यह इस बारे में बहुत कम या कोई जानकारी नहीं देता है कि किसी दिए गए डिव के लिए कौन से फ़ॉन्ट का उपयोग किया जाता है। यदि आप JS से div बनाते हैं, तो हम कैसे जान सकते हैं कि किस फ़ॉन्ट का उपयोग किया गया है?

— जॉन लेनार्ट एसेनडेन

@JonLennartAasenden उपयोग किए गए फ़ॉन्ट को प्राप्त करने के लिए, मेरा मानना ​​है कि आप "कंप्यूटेड स्टाइल" संपत्ति का उपयोग कर सकते हैं (मैं सटीक नाम भूल गया लेकिन यह कुछ ऐसा है।)

— डेरेक 會 功夫 '

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

— जॉन लेन्नर्ट आसेंडेन

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

— ब्रैंडन इलियट

Answer 3

@ वास्तव में, सफारी उपयोग किए गए फ़ॉन्ट को नहीं देता है, सफारी इसके बजाय हमेशा स्टैक में पहला फ़ॉन्ट लौटाता है चाहे वह स्थापित हो, कम से कम मेरे अनुभव में।

font-family: "my fake font", helvetica, san-serif;

माना जाता है कि हेल्वेटिका एक स्थापित / उपयोग किया जाता है, आपको मिलेगा:

• सफारी में "मेरा नकली फ़ॉन्ट" (और मुझे लगता है कि अन्य वेबकिट ब्राउज़र हैं)।
• "मेरे नकली फ़ॉन्ट, हेल्वेटिका, सैन-सेरिफ़" गेको ब्राउज़र और IE में।
• ओपेरा 9 में "हेल्वेटिका", हालांकि मैंने पढ़ा कि गेको से मेल खाने के लिए वे इसे ओपेरा 10 में बदल रहे हैं।

मैंने इस समस्या पर एक पास लिया और फॉन्ट अनस्टैक का निर्माण किया , जो स्टैक में प्रत्येक फॉन्ट का परीक्षण करता है और केवल पहले स्थापित एक को लौटाता है। यह उस ट्रिक का उपयोग करता है जो @MojoFilter का उल्लेख करता है, लेकिन केवल पहला ही लौटाता है यदि एकाधिक इंस्टॉल किए जाते हैं। हालाँकि यह इस कमजोरी से ग्रस्त है कि @tlrobinson उल्लेख करता है (विंडोज ने एरियल को हेल्वेटिका के लिए चुपचाप विकल्पित किया और रिपोर्ट किया कि हेलवेटिका स्थापित है), अन्यथा यह अच्छी तरह से काम करता है।

Answer 4

एक तकनीक जो काम करती है वह तत्व की गणना की गई शैली को देखना है। यह ओपेरा और फ़ायरफ़ॉक्स में समर्थित है (और मैं सफारी में पुन: व्यवस्थित करता हूं, लेकिन परीक्षण नहीं किया गया है)। IE (7 कम से कम), एक शैली प्राप्त करने के लिए एक विधि प्रदान करता है, लेकिन ऐसा लगता है कि स्टाइलशीट में जो कुछ था, वह गणना की गई शैली नहीं थी। Quirksmode पर अधिक जानकारी: शैलियाँ प्राप्त करें

यहां एक तत्व में प्रयुक्त फ़ॉन्ट को हथियाने का एक सरल कार्य है:

/**
 * Get the font used for a given element
 * @argument {HTMLElement} the element to check font for
 * @returns {string} The name of the used font or null if font could not be detected
 */
function getFontForElement(ele) {
    if (ele.currentStyle) { // sort of, but not really, works in IE
        return ele.currentStyle["fontFamily"];
    } else if (document.defaultView) { // works in Opera and FF
        return document.defaultView.getComputedStyle(ele,null).getPropertyValue("font-family");
    } else {
        return null;
    }
}

यदि इसके लिए CSS नियम था:

#fonttester {
    font-family: sans-serif, arial, helvetica;
}

फिर इसे हेल्वेटिका को वापस करना चाहिए यदि वह स्थापित है, यदि नहीं, तो एरियल, और अंत में, सिस्टम डिफ़ॉल्ट sans-serif फ़ॉन्ट का नाम। ध्यान दें कि आपके सीएसएस घोषणा में फोंट का क्रम महत्वपूर्ण है।

एक दिलचस्प हैक जो आप भी कर सकते हैं, वह यह है कि किसी मशीन पर कौन से फोंट इंस्टॉल किए गए हैं, यह पता लगाने की कोशिश करने के लिए कई अलग-अलग फोंट के साथ बहुत सारे छिपे हुए तत्व बनाने हैं। मुझे यकीन है कि कोई इस तकनीक के साथ एक निफ्टी फ़ॉन्ट आँकड़े एकत्र करने वाला पेज बना सकता है।

Comments

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

— टॉम किनकैड

Answer 5

एक सरलीकृत रूप है:

function getFont() {
    return document.getElementById('header').style.font;
}

यदि आपको कुछ और पूरा करने की आवश्यकता है, तो इसे देखें ।

Answer 6

एक सरल उपाय है - बस उपयोग करें element.style.font:

function getUserBrowsersFont() {
    var browserHeader = document.getElementById('header');
    return browserHeader.style.font;
}

यह फ़ंक्शन वही करेगा जो आप चाहते हैं। निष्पादन पर यह उपयोगकर्ता / ब्राउज़र का फ़ॉन्ट प्रकार लौटाएगा। आशा है कि यह मदद करेगा।

Comments

मैं सफारी में एक ऐसे तत्व पर कोशिश कर रहा हूं जिसमें निश्चित रूप से एरियल फ़ॉन्ट है और मुझे फ़ॉन्ट के रूप में "" मिल रहा है। कोई विचार कि ऐसा क्यों है?

— एलेसेंड्रो वर्म्यूलेन

सबसे संभावित कारण यह है कि यह केवल एक सेट फ़ॉन्ट के लिए जाँच करता है, और अगर कोई फ़ॉन्ट सेट नहीं है, तो यह संभवतः एरियल को फ़ॉन्ट के रूप में उपयोग कर रहा है।

— योशिय्याह

@AlessandroVermeulen यह इसलिए है क्योंकि तत्व.स्टाइल केवल शैली विशेषताओं में निर्धारित मान लौटाता है, और कहीं से कोई मान नहीं लौटाएगा (अर्थात शैली तत्वों से मान, बाहरी सीएसएस या उपयोगकर्ता-एजेंट डिफ़ॉल्ट वापस नहीं मिलेगा)। यह उत्तर हटा दिया जाना चाहिए क्योंकि यह भ्रामक / गलत है। अविश्वसनीय है कि यह एक इनाम मिला!

— ब्रेननियॉन्ग

मुझे खेद है, लेकिन मुझे नहीं लगता कि यह सही उत्तर है। हालांकि यह उस सीएसएस संपत्ति के मूल्य को प्रिंट करता है, यह ब्राउज़र द्वारा उपयोग किए जा रहे वास्तविक प्रदान किए गए फ़ॉन्ट को वापस नहीं करता है।

— गूजर

Answer 7

एक अन्य समाधान यह होगा कि फ़ॉन्ट को स्वचालित रूप से स्थापित किया जाए @font-faceजिसके माध्यम से पता लगाने की आवश्यकता को नकारा जा सके।

@font-face { 
font-family: "Calibri"; 
src: url("http://www.yourwebsite.com/fonts/Calibri.eot"); 
src: local("Calibri"), url("http://www.yourwebsite.com/fonts/Calibri.ttf") format("truetype");
}

बेशक यह किसी भी कॉपीराइट मुद्दों को हल नहीं करेगा, हालांकि आप हमेशा फ्रीवेयर फ़ॉन्ट का उपयोग कर सकते हैं या अपना खुद का फ़ॉन्ट भी बना सकते हैं। आपको सबसे अच्छा काम करने के लिए दोनों .eotऔर .ttfफाइलों की आवश्यकता होगी ।

Answer 8

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

मैं फ़ॉन्ट के लिए एक लाइसेंस खरीदने और इसे आपके आवेदन में एम्बेड करने का सुझाव दूंगा।

Comments

फ़ॉन्ट एम्बेडिंग के लिए +1। यह कुछ भी पता लगाने के बिना मुद्दे को हल करती है।

— एंड्रयू ग्रोथ

मैं सुझाव दूंगा कि कुछ भी खरीदने से पहले कुछ इसी तरह से Google फ़ॉन्ट्स की जाँच करें ।

— OJFord

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

— ड्यूडेवड

और आपका उत्तर प्रश्न से संबंधित नहीं है, और टिप्पणी होनी चाहिए।

— दुवेद

Answer 9

मैं फाउंटेन का उपयोग कर रहा हूं। आपको बस अपने बुकमार्क बार पर फाउंटेन बटन को खींचना है, उस पर क्लिक करें और फिर वेबसाइट पर एक विशिष्ट टेक्स्ट पर क्लिक करें। इसके बाद उस पाठ का फ़ॉन्ट दिखाई देगा।

https://fount.artequalswork.com/

Answer 10

आप इस वेबसाइट का उपयोग कर सकते हैं:

http://website-font-analyzer.com/

यह वही करता है जो आप चाहते हैं ...

Answer 11

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

उदाहरण के लिए:

font-family: Arial, 'Adobe Blank';

जहां तक ​​मुझे पता है कि किसी तत्व में ग्लिफ़ को यह बताने के लिए कोई जेएस तरीका नहीं है कि उस तत्व के लिए फ़ॉन्ट स्टैक में किस फ़ॉन्ट द्वारा प्रस्तुत किया जा रहा है।

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

यह भी संभव है कि उपयोगकर्ता का सिस्टम इसमें एक भूमिका निभा सकता है जैसे कि उदाहरण के लिए विंडो ग्लिफ़ स्तर पर फ़ॉन्ट प्रतिस्थापन है।

इसलिए...

जिन ग्लिफ़ों में आप रुचि रखते हैं, उनके लिए आपके पास यह जानने का कोई तरीका नहीं है कि क्या वे उपयोगकर्ता के ब्राउज़र / सिस्टम फ़ॉलबैक द्वारा प्रदान किए जाएंगे, भले ही उनके पास आपके द्वारा निर्दिष्ट फ़ॉन्ट न हो।

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