Detectar qué fuente se usó en una página web

votos
110

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 usó en el navegador del usuario?

Editar para que la gente se pregunte 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 puede 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 instalada la fuente correcta.

Publicado el 03/08/2008 a las 22:42
fuente por usuario
En otros idiomas...                            


11 respuestas

votos
59

Lo he visto hecho de una manera bastante 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 de donde vino: Javascript / CSS Font Detector (ajaxian.com; 12 de marzo de 2007)

Respondida el 03/08/2008 a las 22:51
fuente por usuario

votos
27

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

jFont inspector en github

Respondida el 21/05/2011 a las 18:58
fuente por usuario

votos
7

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

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

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

  • "mi fuente falsa" en Safari (y creo que otros navegadores webkit).
  • "mi fuente falsa, 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.

Aprobé 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

Respondida el 20/05/2009 a las 11:57
fuente por usuario

votos
6

Existe 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 Se devolverá el usuario / visitante Tipo de fuente navegadores. Esperamos que esto ayude

Respondida el 29/11/2011 a las 09:40
fuente por usuario

votos
6

Una forma simplificada es:

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

Si necesita algo más completo, comprobar esto a cabo.

Respondida el 23/10/2011 a las 14:32
fuente por usuario

votos
6

Una técnica que funciona es mirar el estilo calculado 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: 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 de CSS para esto era:

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

Luego 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 podría intentar 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.

Respondida el 25/08/2008 a las 23:16
fuente por usuario

votos
5

Otra solución sería instalar la fuente automáticamente a través de @font-facelo que podría negar la necesidad de la 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á ambos .eoty .ttfarchivos para poder trabajar mejor.

Respondida el 05/01/2012 a las 12:19
fuente por usuario

votos
2

Calibri es un tipo de letra propiedad de Microsoft, y no debe ser distribuido de forma gratuita. Además, lo que requiere un usuario para descargar una fuente específica no es muy fácil de usar.

Yo sugeriría comprar una licencia para la fuente y la incrustación en su aplicación.

Respondida el 14/11/2012 a las 19:56
fuente por usuario

votos
1

Se puede utilizar esta página web:

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

Hace exactamente lo que quieres ...

Respondida el 11/04/2015 a las 20:41
fuente por usuario

votos
0

Se puede poner Adobe en blanco 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 la configuración de usuario para las fuentes / monoespacio / sans-serif serif y también tienen sus propias fuentes de repliegue no modificables que van a utilizar si un glifo no se encuentra en ninguna de las fuentes en una pila de la fuente. Así navegador puede hacer que algunos glifos de una fuente que no está en la pila de la fuente o configuración de la fuente del navegador del usuario. Chrome Herramientas de desarrollo le mostrará cada fuente dictada por 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á pasando en la máquina del usuario.

También es posible el sistema del usuario puede desempeñar un papel en esto como por ejemplo la ventana de sustitución de fuentes hace a nivel de glifo.

asi 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 el tipo de letra que se 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 a cada fuente que quería probar , pero aunque se pueden conocer las fuentes en una pila de elementos de fuentes que no hay manera de saber qué fuentes navegador del usuario está configurado para usar así que para al menos algunos de los usuarios de la lista de fuentes que iterar será incompleta. (También es una prueba no futuro si nuevas fuentes salen y empiezan a acostumbrarse.)

Respondida el 30/11/2017 a las 07:58
fuente por usuario

votos
0

Estoy usando Manantial. Sólo tienes que arrastrar el botón de Manantial de la barra de marcadores, haga clic en él y haga clic en un texto específico en el sitio web. A continuación se mostrará la fuente de ese texto.

https://fount.artequalswork.com/

Respondida el 13/03/2017 a las 01:31
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more