¿Cómo puedo determinar qué fuente está usando realmente un navegador para renderizar texto?

Mi CSS especifica " font-family: Helvetica, Arial, sans-serif;" para toda la página. Parece que Verdana se está utilizando en su lugar en algunas partes. Me gustaría poder verificar esto.

He intentado copiar y pegar desde mi navegador en Word, pero no conserva la fuente.

¿Hay alguna forma de determinar qué fuente se está utilizando realmente para una sección de texto?

Firebug me dará la lista de fuentes como la anterior [1], pero no veo una manera de determinar cuál de las fuentes se está utilizando.

1. Resulta que se estaba usando una lista incorrecta, lo que resolvió mi problema original de Verdana. Pero todavía tengo curiosidad si hay una manera de identificar la fuente de representación real.

Según la respuesta de Wilfred Hughes , Firefox ahora admite esto de forma nativa. Este artículo tiene más detalles .

Esta respuesta original hacía referencia al complemento "Buscador de fuentes", pero solo porque era de hace 4 años. El hecho de que las respuestas antiguas permanezcan así y la comunidad no pueda actualizarlas es una de las pocas fallas restantes de Stack Overflow.

Hoy en día, Chrome y Firefox tienen herramientas integradas para eso, pero Safari necesita que copie algo de texto e investigue eso.

Primero, selecciona un texto. En Firefox, el inspector de página tiene una vista de fuentes :

Esto también le dirá si se descargaron las fuentes y qué estilo se usa, como Regular, ExtraLight, Italic, BoldItalic y todo.

Para Chrome, vaya a "Elementos" de DevTools, vaya a la pestaña "Computado" y desplácese hasta la sección llamada "Fuentes renderizadas". A diferencia de Firefox, esto solo muestra el nombre de la fuente base, no cualquier estilo específico que pueda estar usando:

Las capturas de pantalla anteriores muestran que se pueden mostrar varias fuentes para el texto Unicode. Chrome te dice que 6 glifos ("Pekka" y el espacio) están usando "Arial", y uno ("웃") está usando "Apple SD Gothic Neo":

Arial : archivo local (6 glifos)
Apple SD Gothic Neo : archivo local (1 glifo)

El CSS real define:

font-family: Arial,"Helvetica Neue",Helvetica,sans-serif

Pero esas fuentes a menudo no incluyen muchos caracteres especiales. Como la información de la fuente funciona por elemento HTML, donde el texto Unicode en un elemento realmente podría usar varias fuentes, también muestra varias fuentes. En caso de duda, simplemente haga doble clic en el texto en el panel HTML y elimine el texto que no le interesa. Luego, al seleccionar nuevamente el elemento circundante, verá una sola opción. En este caso, le diría que ambos navegadores usaron "Apple SD Gothic Neo Regular" para el carácter "웃".

Desafortunadamente, diferentes navegadores (e incluso diferentes versiones de un solo navegador) en la misma máquina pueden usar diferentes fuentes, debido a los tipos de fuente admitidos / preferidos por un navegador. En una Mac, por ejemplo, Safari podría preferir la tecnología avanzada de Apple, mientras que Firefox es compatible con Microsoft OpenType (lo que puede generar problemas para el árabe después de instalar Microsoft Office en una Mac). O para el carácter "웃" en las capturas de pantalla anteriores, Chrome y Firefox en mi Mac actualmente prefieren "Apple SD Gothic Neo" (que es OpenType PostScript), pero las versiones anteriores de Firefox usaban "AppleGothic Regular" (que es una fuente TrueType) .

Para los navegadores que no tienen una vista de fuentes similar, simplemente copie y pegue un fragmento del texto en algún procesador de texto o editor de texto enriquecido, seleccione un texto específico y vea qué nombre aparece en alguna lista desplegable de fuentes. En mi Mac, esto no funciona al pegar desde Firefox (donde para "웃" Firefox "Apple SD Gothic Neo" se convierte en "AppleMyungjo" al pegar), pero funciona bien para Safari y Chrome:

Firefox 22+ te mostrará qué fuente está actualmente en uso , sin ninguna extensión.

WhatFont es una extensión de Chrome que le dirá específicamente qué fuente en la pila de fuentes se está cargando.

Para las versiones actuales de Firefox (desde la v7), hay un complemento llamado "fontinfo" que informará la fuente real que se está utilizando (en lugar de lo que dice la propiedad de la familia de fuentes CSS), teniendo en cuenta los casos en los que el navegador recurre a una fuente diferente porque la familia de fuentes solicitada no estaba disponible o no admitía los caracteres utilizados en el texto.

Puede intentar verificar esa sección específica con Firebug para Firefox. Debería darte todas las propiedades exactas.

El complemento "FontFinder" mencionado por jeremy parece no funcionar aquí, dando la primera fuente de la lista CSS independientemente de la fuente realmente renderizada (Firefox 4.0rc1 en Linux). Sin embargo, el siguiente complemento le da la fuente "correcta".

Fuente de contexto

Basado en el enfoque de medición de texto y el guión de Lalit Patel, he creado marcadores que pueden adivinar la fuente que se está utilizando para el texto seleccionado actualmente (o body, si no se selecciona nada). ¡Parece que me funciona muy bien para descubrir qué fuente en una pila se usa! (Sin sans-serifembargo, no puede decirte a qué se asigna realmente).

Consíguelos aquí: https://alanhogan.com/bookmarklets#font-stack-full

La fuente está en GitHub .

Ver también: este CodePen , que usa principalmente el mismo código. ¡Pruébelo seleccionando diferentes párrafos y mirando la tabla / adivinar actualización!