además de ver, ¿hay alguna manera de saber qué fuente se aplica actualmente en un elemento HTML

Question

Considere que tengo esta regla CSS para una etiqueta de ancla:

font-family: Helvetica, Verdana, Calibri, Arial, sans-serif; 

Por supuesto, viendo lo que está dictada en el navegador, puedo juzgar cuál de estas fuentes ya se ha utilizado (aplicado) para formatear el texto actual del elemento de anclaje.

Sin embargo, necesito saber qué fuente está actualmente en uso a través de JavaScript (jQuery, por ejemplo). Este código jQuery no me ayuda:

$('#anchor-id').css('font-family'); 

porque devuelve 'Helvetica, Verdana, Calibri, Arial, sans-serif;'. ¿Hay alguna manera de saber qué fuente está en acción ahora?

Actualización: Basado en la respuesta de @MC, creé este fiddle y puede comprobar que funciona bastante bien.

Answer 1

Primero, debe probar si se ha instalado una fuente. He usado algunas secuencias de comandos en Internet que probarán si una fuente está instalada o no.

Incluir este fragmento de código somewere (gracias a Lucas Smith):

var Font = { 

    isInstalled : function (name) { 
     name = name.replace(/['"<>]/g,''); 

     var body = document.body; 
     var test = document.createElement('div'); 
     var installed = false; 
     var teststring = "mmmmmmmmwwwwwwww"; 
     var template = '<b style="display:inline !important; width:auto !important; font:normal 10px/1 \'X\',sans-serif !important">' + teststring + '</b><b style="display:inline !important; width:auto !important; font:normal 10px/1 \'X\',monospace !important">' + teststring + '</b>'; 
     var ab; 

     if (name) { 
      test.innerHTML = template.replace(/X/g, name); 
      test.style.cssText = 'position: absolute; visibility: hidden; display: block !important'; 
      body.insertBefore(test, body.firstChild); 
      ab = test.getElementsByTagName('b'); 
      installed = ab[0].offsetWidth === ab[1].offsetWidth; 
      body.removeChild(test); 
     } 
     return installed; 
    } 
} 

Además, utilizar el siguiente fragmento (I escribió que yo) para obtener el valor font-family y dividir ese valor en partes. Cada parte es un tipo de letra, ya que están separados por una coma en el código CSS (por ejemplo font-family: "Nimbus", "Courier New";):

function workingFont(element) { 
    var fontString = $(element).css('font-family'); 
    var fonts = fontString.split(","); 
    for (var f in fonts) { 
     if (Font.isInstalled(fonts[f])) { 
      return fonts[f]; 
     } 
    } 
} 

Como se puede ver, se devolverá la primera fuente instalada.

Use workingFont(element), donde element es el elemento id, class o tagname. Esto es parte de jQuery API. Observe que debe tener jQuery incluido para que funcione el script antes mencionado.

Actualización: Creé este jsfiddle para probarlo.