¿Cómo puedo determinar qué tipo de fuente está usando 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 cambio en algunas partes. Me gustaría poder verificar esto.

Intenté copiar y pegar desde mi navegador a 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 fonts como la anterior [1], pero no veo una forma de determinar cuál de las fonts se está utilizando.

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

La respuesta de Per Wilfred Hughes , Firefox ahora es compatible de forma nativa. Este artículo tiene más detalles .

Esta respuesta original hacía referencia al complemento “Font Finder”, pero solo porque era de hace 4 años. El hecho de que las respuestas antiguas permanecen así y la comunidad no puede 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 texto e investigue eso.

En Firefox, el Inspector de página tiene una vista de fonts :

Vista de fuentes de Firefox

Esto también le indicará si las fonts se descargaron.

Para Chrome, vaya a “Elementos” de DevTools, vaya a la pestaña “Calculado” y desplácese hasta la sección llamada “Fuentes renderizadas”:

Inspector web Chrome

Las capturas de pantalla anteriores muestran que se pueden mostrar varias fonts para texto Unicode. Chrome te dice que 6 glyphes (“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 fonts 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 podría usar varias fonts, también muestra varias fonts. En caso de duda, simplemente haga doble clic en el texto en el panel HTML y elimine el texto que no le interesa. Luego, cuando vuelva a seleccionar 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 único navegador) en la misma máquina pueden usar diferentes tipos de letra, debido a los tipos de fonts compatibles / preferidas 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 podría generar problemas en árabe después de instalar Microsoft Office en una Mac). O para el personaje “웃” en las capturas de pantalla anteriores, Chrome y Firefox en mi Mac hoy prefieren “Apple SD Gothic Neo” (que es OpenType PostScript) pero las versiones anteriores de Firefox usaban “AppleGothic Regular” (que es una fuente TrueType) .

Para navegadores que no tienen una vista similar de fonts, simplemente copie y pegue un fragmento del texto en algún procesador de textos o editor de texto enriquecido, seleccione un texto específico y vea qué nombre aparece en alguna lista desplegable de fonts. 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:

Texto pegado desde el navegador al editor de texto enriquecido

WhatFont es una extensión de Chrome que le indicará específicamente qué fuente de la stack de fonts se está cargando.

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

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

Podría 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 de CSS, independientemente de la fuente realmente renderizada (Firefox 4.0rc1 en Linux). Sin embargo, parece que el siguiente complemento te 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 bookmarklets que pueden adivinar la fuente que se está utilizando para el texto seleccionado actualmente (o el body , si no se selecciona nada). ¡Parece que me funciona muy bien para averiguar qué fuente de una stack se usa! (Sin embargo, no le puede decir a qué se sans-serif realmente sans-serif ).

Agarre 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ébalo seleccionando diferentes párrafos y observando la tabla / adivinar la actualización.