जावास्क्रिप्ट के साथ पता लगाना कि कोई ब्राउज़र वेब ओपन फ़ॉन्ट प्रारूप (Woff) का समर्थन करता है या नहीं

Question

मुझे जेएस (jQuery) गीलेर के साथ पता लगाना है कि ब्राउज़र वॉफ का समर्थन करता है और फिर शरीर में एक कक्षा जोड़ता है। कुछ इस तरह:

if(woffIsSupported){ 

    $('body').addClass('modern'); 

    } 

इस किसी भी तरह संभव है? आपके उत्तरों के लिए धन्यवाद।

Answer 1

this post पर isFontFaceSupported पर एक फ़ंक्शन है जो ब्राउज़र सुविधाओं (अच्छा तरीका, यानी उपयोगकर्ता एजेंट स्ट्रिंग पर निर्भर नहीं है) के आधार पर समर्थन की जांच करता है।

कॉपी कि ढंग से काम करने और अपने कोड बन सकता है:

if(isFontFaceSupported()) { 
    $('body').addClass('modern'); 
} 

---

यहाँ पद से समारोह है:

/*! 
* isFontFaceSupported - v0.9 - 12/19/2009 
* http://paulirish.com/2009/font-face-feature-detection/ 
* 
* Copyright (c) 2009 Paul Irish 
* MIT license 
*/ 

var isFontFaceSupported = (function(){ 


    var fontret, 
     fontfaceCheckDelay = 100; 

     // IE supports EOT and has had EOT support since IE 5. 
     // This is a proprietary standard (ATOW) and thus this off-spec, 
     // proprietary test for it is acceptable. 
    if (!(!/*@cc_on@if(@_jscript_version>=5)!@end@*/0)) fontret = true; 

    else { 

    // Create variables for dedicated @font-face test 
     var doc = document, docElement = doc.documentElement, 
      st = doc.createElement('style'), 
      spn = doc.createElement('span'), 
      wid, nwid, body = doc.body, 
      callback, isCallbackCalled; 

     // The following is a font, only containing the - character. Thanks Ethan Dunham. 
     st.textContent = "@font-face{font-family:testfont;src:url(data:font/opentype;base64,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)}"; 
     doc.getElementsByTagName('head')[0].appendChild(st); 


     spn.setAttribute('style','font:99px _,serif;position:absolute;visibility:hidden'); 

     if (!body){ 
     body = docElement.appendChild(doc.createElement('fontface')); 
     } 

     // the data-uri'd font only has the - character 
     spn.innerHTML = '-------'; 
     spn.id  = 'fonttest'; 

     body.appendChild(spn); 
     wid = spn.offsetWidth; 

     spn.style.font = '99px testfont,_,serif'; 

     // needed for the CSSFontFaceRule false positives (ff3, chrome, op9) 
     fontret = wid !== spn.offsetWidth; 

     var delayedCheck = function(){ 
     if (isCallbackCalled) return; 
     fontret = wid !== spn.offsetWidth; 
     callback && (isCallbackCalled = true) && callback(fontret); 
     } 

     addEventListener('load',delayedCheck,false); 
     setTimeout(delayedCheck,fontfaceCheckDelay); 
    } 

    function ret(){ return fontret || wid !== spn.offsetWidth; }; 

    // allow for a callback 
    ret.ready = function(fn){ 
     (isCallbackCalled || fontret) ? fn(fontret) : (callback = fn); 
    } 

    return ret; 
})(); 

Answer 2

क्योंकि यह परीक्षण करने के लिए मुश्किल है कि मैं सिर्फ उपयोग कर रहा हूँ ब्राउज़र का पता लगाने:

//test ie 6, 7, 8 
var div = document.createElement("div"); 
div.innerHTML = "<!--[if lte IE 8]><i></i><![endif]-->"; 
var isIe8orLower = !!div.getElementsByTagName("i").length; 

if (!isIe8orLower && !navigator.userAgent.match(/Opera Mini/i)) { 
    $('body').addClass('modern'); 
} 

यह उपयोग से मेल खाता है: http://caniuse.com/#feat=woff