Detectando con Javascript si un navegador admite Web Open Font Format (Woff) o no

Question

tengo que detectar con JS (jQuery) si un navegador es compatible con Woff y luego agrega una clase al cuerpo. Algo como esto:

if(woffIsSupported){ 

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

    } 

es posible esto de alguna manera? Gracias por sus respuestas.

Answer 1

Hay una función en this post llamada isFontFaceSupported que busca soporte en función de las características del explorador (lo cual es bueno, es decir, no depender de la cadena de agente de usuario).

Copia esa función y su código puede llegar a ser:

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

---

Aquí es la función del mensaje:

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

Debido a que es difícil de probar que estoy usando sólo el detección del navegador:

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

Coincide con el uso: http://caniuse.com/#feat=woff