Rilevare con Javascript se un browser supporta Web Open Font Format (Woff) o no

Question

Devo rilevare con JS (jQuery) se un browser supporta Woff e quindi aggiungere una classe al corpo. Qualcosa di simile a questo:

if(woffIsSupported){ 

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

    } 

è questo in qualche modo possibile? Grazie per le tue risposte.

Answer 1

C'è una funzione su chiamata isFontFaceSupported che controlla il supporto in base alle funzionalità del browser (il modo migliore, cioè non fare affidamento sulla stringa dell'agente utente).

Copia quella funzione e il codice può diventare:

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

---

Ecco la funzione da posta:

/*! 
* 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

Perché è difficile per testare che sto usando solo la rilevamento del browser:

//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'); 
} 

Corrisponde all'utilizzo: http://caniuse.com/#feat=woff