detectar qué fuente se utilizó en una página web

Question

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?

Editar para que la gente se pregunta por qué quiero hacer esto: La fuente que detecto contiene el glifo de que no están disponibles en otras fuentes y cuando el usuario no tiene el tipo de letra que desee mostrar un enlace de preguntar al usuario para descargar esa fuente para que puedan usar mi aplicación web con la fuente correcta.

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

Answer 1

Lo he visto de una manera algo dudosa, pero bastante confiable. Básicamente, un elemento está configurado para usar una fuente específica y una cadena se establece en 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 renderizada. Si coincide con lo que esperaban para la fuente deseada en oposición a la fuente derivada, está presente.

Aquí es donde vino: Javascript/CSS Font Detector (ajaxian.com; 12 Mar 2007)

Answer 2

Una técnica que funciona es buscar en el estilo computada del elemento. Esto es compatible con Opera y Firefox (y yo 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 estaba en la hoja de estilo, no el estilo calculado. Más detalles sobre quirksmode: Get Styles

He aquí una simple función de 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 esta 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 de CSS es significativo.

Un truco interesante que también puedes probar es crear muchos elementos ocultos con muchas fuentes diferentes para intentar 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 ingeniosas con esta técnica.

Answer 3

@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; 

Suponiendo Helvetica es la instalada/utilizado, obtendrá:

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

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

FontUnstack

Answer 4

me escribió una herramienta simple JavaScript que se puede usar para comprobar si una fuente está instalado o no.
Utiliza una técnica simple y debería ser correcta la mayor parte del tiempo.

jFont Checker en github

Answer 5

una forma simplificada es:

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

Si necesita algo más completo, echa un vistazo a this.

Answer 6

Hay una solución simple

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

esta función va a hacer exactamente lo que quiere. En la ejecución Devolverá el tipo de fuente de navegadores de usuario/visitante. Espero que esto ayude

Answer 7

Otra solución sería instalar la fuente de forma automática a través de @font-face que podría anular 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á los dos archivos .eot & .ttf para que funcionen mejor.

Answer 8

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

Le sugiero que compre una licencia para la fuente y la incruste en su aplicación.

Answer 9

Se puede utilizar esta página web:

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

que hace exactamente lo que quiere ...

Answer 10

estoy usando Manantial. Simplemente 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. A continuación, mostrará la fuente de ese texto.

https://fount.artequalswork.com/

Answer 11

Usted puede poner Adobe Blank en la fuente de la familia después de la fuente que desea ver, y entonces cualquier glifos no de esa fuente no se rindió.

p. Ej.:

font-family: Arial, 'Adobe Blank'; 

Por lo que yo soy consciente de que no hay método de JS para decir qué glifos en un elemento están siendo prestados por el cual la fuente de la pila de la fuente para ese elemento.

Esto se complica por el hecho de que los navegadores tienen configuraciones de usuario para las fuentes serif/sans-serif/monoespacio y también tienen sus propias fuentes inversas codificadas que usarán si no se encuentra un glifo en ninguno de las fuentes en una pila de fuentes. De modo que el navegador puede mostrar 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 will show you each rendered font for the glyphs in the selected element. 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 formar parte de esto, como p. Window does Font Substitution en el nivel de glifo.

así que ...

Para los glifos que le interesan, que no hay manera de saber si van a ser prestados por repliegue del navegador/sistema del usuario, incluso si no tienen la fuente que especifique .

Si desea probarlo en JS que podría hacer que los glifos individuales con una familia de fuentes, incluyendo Adobe en blanco y medir su anchura para ver si es cero, pero usted tendría que recorrer a fondo cada glifo y cada fuente que desea probar, pero aunque puede conocer las fuentes en una pila de fuentes de elementos no hay manera de saber qué fuentes está configurado para usar el navegador del usuario para al menos algunos de sus usuarios la lista de fuentes que itera a través de estará incompleto (Tampoco es a prueba de futuro si salen nuevas fuentes y comienzan a usarse.)