Detección de la fuente utilizada en una página web

Escribí una sencilla herramienta JavaScript que puedes usar para comprobar si hay una fuente instalada o no.
Utiliza una técnica simple y debe ser correcta la mayor parte del tiempo.

JFont Checker en github

Hay una solución simple

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 de los Navegadores Usuario/visitante. Espero que esto ayude

@ pat En realidad, Safari no da la fuente utilizada, Safari en su lugar 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;

Suponiendo que Helvetica es la que se instala / utiliza, obtendrá:

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

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 @ MojoFilter menciona, pero solo devuelve el primero si se instalan varios. Aunque sufre de la debilidad que menciona @ tlrobinson (Windows sustituirá Arial por Helvetica silenciosamente e informará que Helvetica está instalada), por lo demás funciona bien.

FontUnstack

Una forma simplificada es:

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

Si necesitas algo más completo, revisa this out.

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

Aquí hay una función simple para agarrar 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 volver helvetica si está instalado, si no, arial, y por último, el nombre de la fuente por defecto del sistema sans-serif. Tenga en cuenta que el orden de las fuentes en su declaración CSS es significativo.

Un truco interesante que también podría intentar 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 página de recopilación de estadísticas de fuentes ingeniosa con esta técnica.

Otra solución sería instalar la fuente automáticamente a través de @font-face lo que 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 que no resolvería ningún problema de derechos de autor, sin embargo, siempre se puede utilizar una fuente freeware o incluso hacer su propia fuente. Necesitarás ambos .eot & .ttf archivos para que funcionen mejor.

Calibri es una fuente propiedad de Microsoft, y no debería distribuirse de forma gratuita. Además, requerir que un usuario 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.

Puede utilizar este sitio web :

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

Hace exactamente lo que quieres...

Estoy usando Fount. Solo tienes que arrastrar el botón Fount a tu 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 /

Puede poner Adobe Blank en la familia de fuentes después de la fuente que desea ver, y luego cualquier glifo que no esté en esa fuente no se procesará.

Ej:

font-family: Arial, 'Adobe Blank';

Por lo que sé, no hay un método JS para decir qué glifos en un elemento están siendo renderizados por 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 fuentes serif/sans-serif/monospace y también tienen sus propias fuentes de reserva codificadas que usarán si no se encuentra un glifo en ninguna de las fuentes de una pila de fuentes. Así que el navegador puede renderizar algunos glifos en una fuente que no está en la pila de fuentes o en la configuración de fuentes del navegador del usuario. Chrome Dev Tools le mostrará cada fuente renderizada para los glifos en el elemento seleccionado . Así que en su máquina se puede ver lo que está haciendo, pero no hay manera de saber lo que está sucediendo en la máquina de un usuario.

También es posible que el sistema del usuario pueda jugar un papel en esto como p.ej. La ventana hace la Sustitución de Fuentes a nivel de glifo.

So...

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

Si desea probarlo en JS, podría 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 iterar a fondo cada glifo y cada fuente que quería probar, pero aunque puede conocer las fuentes en una pila de fuentes de elements, no hay forma de saber qué fuentes está configurado el navegador del usuario para usar, por lo que al menos para algunos de sus usuarios, la lista de fuentes que itere estará incompleta. (Tampoco es a prueba de futuro si salen nuevas fuentes y comienzan a ser utilizadas.)