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

StackOverflow https://stackoverflow.com/questions/845

  •  08-06-2019
  •  | 
  •  

Pregunta

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 que descargue esa fuente para que pueda usar mi aplicación web con la fuente correcta.

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

¿Fue útil?

Solución

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

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

Otros consejos

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

Comprobador de fuentes en github

@pat En realidad, Safari no proporciona la fuente utilizada; en cambio, 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 que Helvetica es la que está instalada/usada, obtendrá:

  • "mi fuente falsa" en Safari (y creo que en otros navegadores webkit).
  • "mi fuente falsa, helvética, 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 alto este problema y creé Desapilar fuentes, 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á Arial por Helvetica silenciosamente e informará que Helvetica está instalada), por lo demás funciona bien.

Una forma simplificada es:

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

Si necesitas algo más completo, consulta este afuera.

Una técnica que funciona es observar el estilo calculado del elemento.Esto es compatible con Opera y Firefox (y lo reconozco en Safari, pero no lo he probado).IE (al menos 7) 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 el modo peculiaridad: Obtener estilos

Aquí hay una función simple para capturar 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 fuera:

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

Luego debería devolver helvetica si está instalada, 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 importante.

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 crear una ingeniosa página de recopilación de estadísticas de fuentes con esta técnica.

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

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.Al ejecutarse, devolverá el tipo de fuente del usuario/navegador.Espero que esto ayude.

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

Estoy usando fuente.Sólo 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 del sitio web.Luego mostrará la fuente de ese texto.

https://fount.artequalswork.com/

Puedes utilizar este sitio web:

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

Hace exactamente lo que quieres...

Puedes poner Adobe en blanco 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 existe ningún método JS para saber qué glifos de 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 fuentes serif/sans-serif/monoespaciadas 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 archivo. 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 desempeñe un papel en esto, como por ejemplo. La ventana realiza 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/sistema alternativo del usuario, incluso si no tienen la fuente que usted especifica.

Si desea probarlo en JS, puede representar glifos individuales con una familia de fuentes que incluya Adobe Blank y medir su ancho para ver si es cero. PERO Tendrías que iterar minuciosamente cada glifo y cada fuente que querías 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 que itera estará incompleta.(Tampoco es una prueba de futuro si aparecen nuevas fuentes y comienzan a usarse).

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top