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

175

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.
lavaturtle
fuente
FontFinder y WhatFont descritos en las respuestas a continuación siguen siendo formas muy crudas de detectar la fuente utilizada. Ambos indicaron erróneamente "Quanttrocentro Sans" (la fuente principal) cuando seleccioné un ؋símbolo Aghani que no está disponible en esta fuente.
Pregunta Desbordamiento
@QuestionOverflow, hoy en día Firefox y Chrome tienen herramientas integradas para determinar la fuente. Ellos van a mostrar el tipo de letra para cada glifo, por lo tanto, le mostrará qué fuente se utilizó para ese ؋ también.
Arjan
@Arjan: ¿sigue siendo así en 2020?
devorado elysium
@devouredelysium, ¿viste mi respuesta ? Simplemente seleccione un solo glifo para ver qué fuente se utiliza.
Arjan

Respuestas:

50

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.

Jeremy Kauffman
fuente
77
No hay razón para usar esto ahora que las Herramientas de Firefox> Desarrollador web> Inspector> Fuentes te lo dicen (respuesta de Wilfred Hughes)
skier
1
Desafortunadamente, Firefox 47 ya no tiene la pestaña de Fuentes referenciada en este blog al que se vinculó: Este artículo tiene más detalles
Zabba
3
"A partir de Firefox 47, la vista de fuentes está deshabilitada de manera predeterminada. Estamos trabajando en un reemplazo más completo. Por el momento, si desea ver la vista de fuentes, visite about: config, encuentre las herramientas de preferencia. fontinspector.enabled y configúrelo como verdadero ". Ver developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/… .
Daniel Le
1
Aparentemente, la configuración devtools.fontinspector.enabledsolo era necesaria en Firefox 47: " Solo en Firefox 47 , la vista de fuentes está deshabilitada de forma predeterminada. Si desea ver la vista de fuentes en Firefox 47, visite about:config, encuentre la preferencia devtools.fontinspector.enabledy configúrela en true. Antes y después Firefox 47, la vista de fuentes está habilitada de forma predeterminada ". , @DanielLe.
Arjan
1
@DanielLe, por supuesto, entendí que era correcto en el momento en que copiaste el texto :-)
Arjan
151

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 :

Vista de fuentes de Firefox

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:

Inspector web Chrome

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:

Texto pegado desde el navegador al editor de texto enriquecido

Arjan
fuente
1
¿Sabes si Safari tiene un complemento o algo para esto?
Andry
44
En Chrome 47, asegúrese de desplazarse hasta la parte inferior de la sección Computado. Expandir el font-familyatributo tal como aparece (en orden alfabético) no mostrará qué fuente se está cargando. Esta información aparece en la parte inferior.
Merchako
1
@ Merchako, ¿qué sucede cuando su fuente calculada es una fuente genérica como "serif" y "sans-serif"? Entonces, ¿cómo se obtiene la fuente real ?
Pacerier
2
@Pacerier, en Chrome solo desplácese hacia abajo en la pestaña Computado; en Firefox ver la pestaña separada.
Arjan
1
@ TMG, me imagino que las fuentes web pueden no necesitar un alias, pero pueden referirse a alguna URL directamente. ¿Es este un sitio web público que podemos ver? Si no, ¿qué muestra Firefox?
Arjan
32

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

Wilfred Hughes
fuente
1
Esto realmente debería ser ahora la respuesta definitiva. No es necesario instalar una extensión.
Dan Eastwell
pero un navegador que alguien probablemente no usa. Una extensión es mucho más ligera en ese sentido.
b1nario
30

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

usuario1100745
fuente
66
Para mí, dice qué fuente se declara, pero no qué fuente se usa realmente.
panzi
3
De acuerdo con este artículo ( updates.html5rocks.com/2013/09/… ), Dev Tools ahora puede decirle cuál es la fuente real representada.
yorch
WhatFont intenta detectar la fuente renderizada, pero parece que no lo hace con éxito github.com/chengyin/WhatFont-Bookmarklet/issues/13
Chris Marisic
7

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.

Jonathan
fuente
Por ahora, esta es la mejor respuesta
Ingo Kegel
1

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

jeroen
fuente
Eso todavía me da la lista, no la específica que está usando ... Pero en una segunda verificación, Verdana de alguna manera entró en la lista de familias de fuentes, lo que sería la causa de mi problema original. Así que gracias.
lavaturtle
1
Firebug también le dirá qué reglas se están activando para darle al elemento esa fuente, muy útil para determinar dónde está fallando su CSS.
RichieHindle
Safari 4 Beta tiene una WebInspector, también (que podría ser un incendiario piel)
vikingosegundo
1
Creo que siempre obtendrá la lista completa, independientemente de la herramienta que utilice. La fuente utilizada es la primera en la lista que está instalada en su computadora.
jeroen
2
Firebug actualmente (1.11.4, quizás también antes) destaca la fuente actual en azul.
Mark Vrabel
1

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

Dave Vogt
fuente
Desafortunadamente, incluso Context Font muestra solo la familia CSS calculada, que podría ser serif o sans-serif, por ejemplo. Además, si algún carácter no está presente en la fuente calculada y el navegador lo recoge de una fuente diferente, la Fuente de contexto aún muestra la familia de fuentes calculadas, no la fuente real.
Jukka K. Korpela
0

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!

Alan H.
fuente