¿Cómo detectar cuál de las fuentes definidas se utilizó en una página web?

Supongamos que tengo la siguiente regla CSS en mi página:

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

¿Cómo puedo detectar cuál de las fuentes definidas se utilizó en el navegador del usuario?

Edite para las personas que se preguntan por qué quiero hacer esto: la fuente que estoy detectando contiene glifos que no están disponibles en otras fuentes y cuando el usuario no tiene la fuente, quiero mostrar un enlace pidiéndole al usuario que descargue esa fuente para que puedan puedo usar mi aplicación web con la fuente correcta.

Actualmente estoy mostrando el enlace de descarga de la fuente para todos los usuarios, solo quiero mostrar esto para las personas que no tienen instalada la fuente correcta.

Lo he visto hecho de una manera dudosa, pero bastante confiable. Básicamente, un elemento está configurado para usar una fuente específica y una cadena está configurada para ese elemento. Si la fuente establecida para el elemento no existe, toma la fuente del elemento padre. Entonces, lo que hacen es medir el ancho de la cadena representada. Si coincide con lo que esperaban para la fuente deseada en lugar de la fuente derivada, está presente. Esto no funcionará para fuentes monoespaciadas.

Aquí es de dónde vino: Detector de fuentes Javascript / CSS (ajaxian.com; 12 de marzo de 2007)

Escribí una herramienta JavaScript simple que puede usar para verificar si una fuente está instalada o no.
Utiliza una técnica simple y debe ser correcta la mayor parte del tiempo.

jFont Checker en github

@pat En realidad, Safari no da la fuente utilizada, Safari siempre devuelve la primera fuente en la pila independientemente de si está instalada, al menos en mi experiencia.

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

Asumiendo que Helvetica es la que está instalada / utilizada, obtendrá:

• "mi fuente falsa" en Safari (y creo que otros navegadores webkit).
• "mi fuente falsa, helvetica, san-serif" en los navegadores Gecko e IE.
• "helvetica" en Opera 9, aunque leí que están cambiando esto en Opera 10 para que coincida con Gecko.

Pasé por este problema y creé Font Unstack , que prueba cada fuente en una pila y devuelve solo la primera instalada. Utiliza el truco que menciona @MojoFilter, pero solo devuelve el primero si hay varios instalados. Aunque sufre la debilidad que menciona @tlrobinson (Windows sustituirá a Arial por Helvetica en silencio e informará que Helvetica está instalada), de lo contrario funciona bien.

Una técnica que funciona es mirar el estilo calculado del elemento. Esto es compatible con Opera y Firefox (y lo reconozco en safari, pero no lo he probado). IE (7 al menos), proporciona un método para obtener un estilo, pero parece ser lo que haya en la hoja de estilo, no el estilo calculado. Más detalles sobre quirksmode: Obtener estilos

Aquí hay una función simple para tomar la fuente utilizada en un elemento:

/**
 * 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;
    }
}

Si la regla CSS para esto era:

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

Entonces debería devolver helvetica si está instalado, si no, arial y, por último, el nombre de la fuente sans-serif predeterminada del sistema. Tenga en cuenta que el orden de las fuentes en su declaración CSS es significativo.

Un truco interesante que también podrías probar es crear muchos elementos ocultos con muchas fuentes diferentes para tratar de detectar qué fuentes están instaladas en una máquina. Estoy seguro de que alguien podría hacer una ingeniosa página de recopilación de estadísticas de fuentes con esta técnica.

Una forma simplificada es:

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

Si necesitas algo más completo, mira esto .

Hay una solución simple: solo use element.style.font:

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

Esta función hará exactamente lo que quieras. En la ejecución, devolverá el tipo de fuente del usuario / navegador. Espero que esto ayude.

Otra solución sería instalar la fuente automáticamente a través de lo @font-facecual podría negar la necesidad de detección.

@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");
}

Por supuesto, no resolvería ningún problema de derechos de autor, sin embargo, siempre puede usar una fuente gratuita o incluso hacer su propia fuente. Necesitará tanto .eoty .ttfarchivos para funcionar mejor.

Calibri es una fuente propiedad de Microsoft, y no debe distribuirse de forma gratuita. Además, exigir a un usuario que descargue una fuente específica no es muy fácil de usar.

Sugeriría comprar una licencia para la fuente e incrustarla en su aplicación.

Estoy usando Fount. Solo tiene que arrastrar el botón Fount a la barra de marcadores, hacer clic en él y luego hacer clic en un texto específico en el sitio web. Luego mostrará la fuente de ese texto.

https://fount.artequalswork.com/

Puedes usar este sitio web:

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

Hace exactamente lo que quieres ...

Puede colocar Adobe Blank en la familia de fuentes después de la fuente que desea ver, y luego no se representarán los glifos que no estén en esa fuente.

p.ej:

font-family: Arial, 'Adobe Blank';

Hasta donde yo sé, no hay un método JS para saber qué glifos en un elemento se representan con qué fuente en la pila de fuentes para ese elemento.

Esto se complica por el hecho de que los navegadores tienen configuraciones de usuario para las fuentes serif / sans-serif / monospace y también tienen sus propias fuentes alternativas codificadas que usarán si no se encuentra un glifo en ninguna de las fuentes de un pila de fuentes Por lo tanto, el navegador puede representar algunos glifos en una fuente que no está en la pila de fuentes o en la configuración de fuente del navegador del usuario. Chrome Dev Tools le mostrará cada fuente renderizada para los glifos en el elemento seleccionado . Entonces, en su máquina puede ver lo que está haciendo, pero no hay forma de saber qué está sucediendo en la máquina de un usuario.

También es posible que el sistema del usuario pueda desempeñar un papel en esto, por ejemplo, Window realiza la sustitución de fuentes a nivel de glifo.

entonces...

Para los glifos que le interesan, no tiene forma de saber si serán representados por el navegador del usuario / sistema de respaldo, incluso si no tienen la fuente que especifique.

Si desea probarlo en JS, puede renderizar glifos individuales con una familia de fuentes que incluya Adobe Blank y medir su ancho para ver si es cero, PERO tendría que repetir cada glifo y cada fuente que desea probar , pero aunque puede conocer las fuentes en una pila de fuentes de elementos, no hay forma de saber qué fuentes está configurado para usar el navegador del usuario, por lo que, al menos para algunos de sus usuarios, la lista de fuentes con las que itera estará incompleta. (Tampoco es una prueba futura si salen nuevas fuentes y comienzan a usarse).