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

Question

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

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

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

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

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

Answer 1

मैंने इसे एक प्रकार की iffy में देखा है, लेकिन बहुत विश्वसनीय तरीका है। असल में, एक तत्व एक विशिष्ट फ़ॉन्ट का उपयोग करने के लिए सेट होता है और एक स्ट्रिंग उस तत्व पर सेट होती है। यदि तत्व के लिए फ़ॉन्ट सेट मौजूद नहीं है, तो यह मूल तत्व का फ़ॉन्ट लेता है। तो, वे क्या करते हैं प्रस्तुत की गई स्ट्रिंग की चौड़ाई को मापते हैं। यदि यह व्युत्पन्न फ़ॉन्ट के विपरीत वांछित फ़ॉन्ट के लिए अपेक्षित चीज़ों से मेल खाता है, तो यह मौजूद है। Javascript/CSS Font Detector (ajaxian.com; 12 Mar 2007)

Answer 2

एक तकनीक है कि काम करता है तत्व की गणना शैली को देखने के लिए है:

यहाँ कहाँ से आया है। यह ओपेरा और फ़ायरफ़ॉक्स में समर्थित है (और मैं सफारी में recon recon, लेकिन परीक्षण नहीं किया है)। आईई (7 कम से कम), शैली पाने के लिए एक तरीका प्रदान करता है, लेकिन ऐसा लगता है कि स्टाइलशीट में जो कुछ भी था, गणना की गई शैली नहीं। 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; 
    } 
} 

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

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

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

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

Answer 3

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

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

Helvetica मान लिया जाये कि स्थापित/इस्तेमाल किया जाता है, आप प्राप्त करेंगे:

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

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

FontUnstack

Answer 4

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

jFont Checker GitHub पर

Answer 5

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

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

आप और अधिक संपूर्ण कुछ की जरूरत है, this की जाँच करें।

Answer 6

वहाँ एक सरल उपाय

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

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

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

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

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

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

यह वास्तव में आपको क्या करना चाहती है ...

Answer 9

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

https://fount.artequalswork.com/

Answer 10

मैं फ़ौवारा उपयोग कर रहा हूँ:

Answer 11

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

उदा:

font-family: Arial, 'Adobe Blank'; 

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

यह इस तथ्य से जटिल है कि ब्राउज़र में सेरिफ़/सैन्स-सेरिफ़/मोनोस्पेस फोंट के लिए उपयोगकर्ता सेटिंग्स हैं और उनके पास अपने स्वयं के हार्ड-कोडेड फॉल-बैक फोंट भी हैं जिनका उपयोग वे करेंगे यदि कोई ग्लाइफ किसी भी में नहीं मिलता है फ़ॉन्ट स्टैक में फोंट। तो ब्राउज़र फ़ॉन्ट में कुछ ग्लिफ प्रस्तुत कर सकता है जो फ़ॉन्ट स्टैक या उपयोगकर्ता की ब्राउज़र फ़ॉन्ट सेटिंग में नहीं है।Chrome Dev Tools will show you each rendered font for the glyphs in the selected element। तो आपकी मशीन पर आप देख सकते हैं कि यह क्या कर रहा है, लेकिन उपयोगकर्ता के मशीन पर क्या हो रहा है यह बताने का कोई तरीका नहीं है।

यह भी संभव है कि उपयोगकर्ता की प्रणाली इस में एक भूमिका निभा सके। ग्लाइफ स्तर पर Window does Font Substitution।

तो ...

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

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