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

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

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

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

https://fount.artequalswork.com/

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

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

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

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

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

उदा .:

font-family: Arial, 'Adobe Blank';

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

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

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

इसलिए...

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

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

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 फ़ॉन्ट का नाम। ध्यान दें कि आपके सीएसएस घोषणा में फोंट का क्रम महत्वपूर्ण है।

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

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

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

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

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

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

FontUnstack

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

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

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

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

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

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

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

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

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