यह पता लगाने के लिए कि कौन सा फ़ॉन्ट किसी वेब पेज में उपयोग किया गया था

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

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

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

Edit for people wondering why I want to do this: The font I'm detecting contains glyph's that are not available in other fonts and when the user does not have the font I want to display a link asking the user to download that font so they can use my web application with the correct font.

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

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

11 उत्तर

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

Here's where it came from: Javascript/CSS Font Detector (ajaxian.com; 12 Mar 2007)

0
जोड़ा
canvas तत्व से measText का उपयोग करके एक और दृष्टिकोण: github.com / Wildhoney / DetectFont
जोड़ा लेखक Wildhoney, स्रोत

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

https://fount.artequalswork.com/

0
जोड़ा

I wrote a simple JavaScript tool that you can use it to check if a font is installed or not.
It uses simple technique and should be correct most of the time.

jFont Checker on github

0
जोड़ा
@JonLennartAasenden प्रयुक्त फ़ॉन्ट प्राप्त करने के लिए मेरा मानना ​​है कि आप "संगणित स्टाइल" संपत्ति का उपयोग कर सकते हैं (मैं सही नाम भूल गया लेकिन यह ऐसा कुछ है।)
जोड़ा लेखक Derek 朕會功夫, स्रोत
फ़ॉन्ट का पता लगाने से समस्या हल नहीं होती है। आप इसे घोषित फ़ॉन्ट्स को फिर से विचार करने और वैध होने की जांच करने के लिए उपयोग कर सकते हैं, लेकिन यह किसी भी दिए गए div के लिए फ़ॉन्ट का उपयोग करने के बारे में बहुत कम या कोई जानकारी नहीं देता है। यदि आप जेएस से div बनाते हैं, तो हम कैसे जान सकते हैं कि किस फ़ॉन्ट का उपयोग किया जाता है?
जोड़ा लेखक Jon Lennart Aasenden, स्रोत
मैंने एक कक्षा लिखी जो सभी ब्राउज़रों में काम करती है। यह स्मार्ट पास्कल में लिखा गया है जो जेएस को संकलित करता है, इसलिए मैं वास्तव में यहां समाधान पोस्ट नहीं कर सकता - लेकिन संक्षेप में, मुझे फ़ॉन्ट-पारिवारिक स्ट्रिंग निकालना पड़ा, फिर जांचें कि प्रत्येक फ़ॉन्ट मान्य था, पहले वैध को पकड़ो - और वह हर जगह काम करता है। मैंने स्मार्ट पास्कल को "फ़ॉन्ट डिटेक्टर" पर पोर्ट किया और कुछ बदलाव किए।
जोड़ा लेखक Jon Lennart Aasenden, स्रोत
यह स्वीकार्य जवाब होना चाहिए! महान काम @ डेरेक।
जोड़ा लेखक mkoistinen, स्रोत
@ जोनलेनर्टएसेन्डेन यह आपकी कक्षा की तरह नहीं लगता है मूर्खतापूर्ण है। ब्राउजर प्रत्येक फ़ॉन्ट को प्राथमिकता में देखते हैं, अगर इंस्टॉल किया गया है, लेकिन कभी-कभी सूची में निचले प्राथमिकता फ़ॉन्ट का उपयोग करने का विकल्प चुनता है, यदि उच्च प्राथमिकता, स्थापित फ़ॉन्ट में अक्षर या ग्लिफ अनुपलब्ध हैं जो अनुरोधित आकार से मेल नहीं खाते हैं।
जोड़ा लेखक Brandon Elliott, स्रोत

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

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

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

0
जोड़ा

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

उदा .:

font-family: Arial, 'Adobe Blank';

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

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

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

इसलिए...

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

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

0
जोड़ा

A technique that works is to look at the computed style of the element. This is supported in Opera and Firefox (and I recon in safari, but haven't tested). IE (7 at least), provides a method to get a style, but it seems to be whatever was in the stylesheet, not the computed style. More details on quirksmode: Get Styles

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

/**
 * 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;
    }
}

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

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

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

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

0
जोड़ा
यह "हेलवेटिका, एरियल, सैन्स-सेरिफ़" जैसे सीएसएस की पूरी स्ट्रिंग देता है। यह इस्तेमाल होने वाले वास्तविक फ़ॉन्ट को वापस नहीं करता है।
जोड़ा लेखक Tom Kincaid, स्रोत

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

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

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

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

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

FontUnstack

0
जोड़ा

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

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

अगर आपको कुछ और पूरा करने की ज़रूरत है, तो यह बाहर देखें ।

0
जोड़ा

एक सरल समाधान है

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

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

0
जोड़ा
सबसे संभावित कारण यह है कि यह केवल एक सेट फ़ॉन्ट के लिए जांच करता है, और यदि कोई फ़ॉन्ट सेट नहीं है, तो शायद यह एरियल को फ़ॉन्ट के रूप में उपयोग कर रहा है।
जोड़ा लेखक Josiah, स्रोत
मैं सफारी में इस तत्व पर कोशिश कर रहा हूं जिसमें निश्चित रूप से एरियल फ़ॉन्ट है और मैं फ़ॉन्ट के रूप में "" प्राप्त कर रहा हूं। कोई विचार कि ऐसा क्यों है?
जोड़ा लेखक Alessandro Vermeulen, स्रोत

एक और समाधान फ़ॉन्ट को @ 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");
}

Of course it wouldn't solve any copyright issues, however you could always use a freeware font or even make your own font. You will need both .eot & .ttf files to work best.

0
जोड़ा

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

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

0
जोड़ा
मैं कुछ भी खरीदने से पहले कुछ के लिए Google फ़ॉन्ट्स की जांच करने का सुझाव दूंगा।
जोड़ा लेखक OJFord, स्रोत
फ़ॉन्ट एम्बेडिंग के लिए +1। यह कुछ भी पता लगाने के बिना मुद्दा हल करता है।
जोड़ा लेखक Andrew Grothe, स्रोत
सिवाय इसके कि, यदि उपयोगकर्ता विंडोज मशीन पर है तो वे कैलिब्ररी देख सकते हैं। यह फ़ॉलबैक सूचियों का पूरा बिंदु है।
जोड़ा लेखक dudewad, स्रोत
और आपका उत्तर प्रश्न से संबंधित नहीं है, और एक टिप्पणी होना चाहिए।
जोड़ा लेखक dudewad, स्रोत