Cuando veo la familia de fuentes de un elemento HTML (de js, firebug o similar), siempre es una lista. ¿Cómo puedo ver cuál fuente se usa realmente de la lista?¿Cómo puedo ver realmente qué tipo de letra está usando el elemento?
El complemento Font Finder para Firefox puede hacerlo. Como es claramente posible, seguro sería conveniente si esto estuviera integrado en Firebug.
Actualización 02/04/2012:
I examinó la fuente Buscador de fuentes para averiguar cómo funciona, y en realidad es un pequeño programa inteligente. El código relevante está en el Detector class en fontfinder.js. Para citar la fuente:
Clase interna que se utiliza para determinar qué fuente se representa. Se opera bajo el fundamento de que cada fuente tiene una altura única & ancho cuando se les da un gran tamaño de la fuente lo suficientemente & cadena de ejemplo
¿Qué hace es casi como una versión automatizada del Marcel’s answer. Entonces, ¿cómo funciona? Se agrega un elemento ficticio con el texto "mmmmmmmmmmlil" al DOM. Está configurado para usar la fuente de respaldo del navegador, "serif", con un tamaño de fuente de 72px. Con eso, Font Finder conoce el ancho y la altura del elemento cuando la fuente de respaldo está en uso. A continuación, simplemente itera a través de todas las fuentes enumeradas en el font-family, configurando la fuente en el elemento, para cada una en la lista. Si el ancho y la altura del elemento coinciden con el ancho y el alto cuando se estableció la fuente alternativa, podemos deducir que la fuente dada no está presente. La primera fuente en la lista que produce un ancho o altura diferente en el elemento será la fuente que realmente se está renderizando (nota: hay un caso especial involucrado cuando la fuente alternativa, "serif", está en la lista font-family).
También hay una versión de Chrome de Font Finder. Difiere (relevant source) en que la fuente de respaldo del navegador parece ser "sans" - no "serif". Cualquier código que use este método deberá tener un conocimiento específico del explorador de la fuente alternativa.
Sería interesante ver esa característica en Firebug.Me pregunto cómo encuentran la fuente actual? ¿Hay una API para eso o es posible desde JavaScript? Sé que quizás no sepas la respuesta, pero acabo de publicarla aquí por si alguien más sabe. Gracias. – grm
@grm Como yo también tenía curiosidad, eché un vistazo. He actualizado la respuesta con lo que encontré. –
gracias por su ayuda :) ¡Muy interesante! Cambié tu solución a la respuesta correcta. – grm
Me doy cuenta de que no es ideal, pero puede copiar el texto de la ventana gráfica y pegarlo en un editor de texto enriquecido, y le dirá.
Es un poco complicado, pero con Firebug puede modificar el nombre de cada fuente en una familia de fuentes, trabajando de izquierda a derecha hasta que cambie la fuente del elemento, lo que significa que fue la última fuente que cambió. En el último Firebug, al menos, solo necesita agregar o eliminar una letra del nombre de una fuente para que se refleje el cambio.
No estoy seguro, pero creo que el buscador busca de izquierda a derecha y usa la primera fuente encontrada. Quizás estoy equivocado y me gustaría saber la respuesta yo mismo. –