¿Cómo puedo saber qué fuentes está usando un sitio web?

36

¿Cómo puedo saber qué fuente o fuentes está usando un sitio web? ¿Hay herramientas o extensiones de navegador que puedan facilitar el trabajo?

Yisela
fuente
1
Vea mi respuesta en Stack Overflow para herramientas integradas en Chrome y Firefox, y una opción de copiar y pegar para Safari: stackoverflow.com/questions/884177/…
Arjan
Sin 10 rep para responder, lo hago aquí: como en este momento (2018.3), Fount no está disponible y WhatFont no está accesible en la tienda de complementos de Firefox; por fin tengo que ingresar a la pestaña "Estilo" de Chrome / IE / FF / Opera's DevTool, editar la propiedad para eliminar cada fuente y ver cuál es la fuente aplicada. Es una lástima que todas las DevTools solo muestren la pila completa de fuentes y no la realmente aplicada . Incluso en FF, el "mejor emparejado" no es el mejor emparejado; la ventana emergente "mejor coincidente" se muestra en cada fuente de la pila ........ ¿tonto verdad?
WesternGun
@WesternGun, ¿qué quieres decir con "todos los DevTools" ? Firefox y Chrome muestran la fuente real bien; vea las capturas de pantalla en la respuesta que vinculé en mi comentario anterior.
Arjan
OK, pasé por alto la captura de pantalla @Arjan. Ahora es obvio.
WesternGun

Respuestas:

44

Opción 1: usar una extensión de navegador (Fácil)

Las extensiones como WhatFont (disponible para Chrome, Firefox y Safari) facilitan la detección de familias de fuentes de cualquier texto en una página web. Solo necesita instalar la extensión, activarla en un sitio y hacer clic en el elemento que desea inspeccionar. Los resultados se muestran en un cuadro flotante, siempre en el contexto de su elección.

ingrese la descripción de la imagen aquí


Opción 2: compruebe manualmente el CSS con los inspectores del navegador (avanzado)

La mayoría de los navegadores web le permiten encontrar fácilmente las fuentes usando right-click→ 'Inspeccionar' o 'Inspeccionar elemento'. También se puede hacer presionando F12. Esto mostrará una lista de estilos adjuntos al sitio web, que puede explorar para encontrar las fuentes utilizadas en cualquier elemento HTML.

ingrese la descripción de la imagen aquí

Usar el inspector no es tan sencillo como usar una extensión, pero tiene varias ventajas. Se requiere cierta comprensión de CSS, ya que generalmente necesitará pasar por varios estilos para encontrar el que se aplica. Como regla general, los estilos que se tachan se sobrescriben, por lo que siempre busque los que se apliquen en último lugar.

Todos los estilos de la página se enumeran en la pestaña Estilo , pero si usa la pestaña Computado en su lugar, puede encontrar las propiedades que se aplican activamente al elemento que ha seleccionado, incluida, por supuesto, la familia de fuentes.

Finalmente, otra forma de verificar rápidamente qué fuentes se están utilizando globalmente (pero NO cómo o dónde) es ir a 'Aplicación → Marcos → Fuentes' . Allí, encontrará una lista de todas las fuentes referenciadas (que no son del sistema).

Este segundo método es más lento, pero el uso del inspector puede brindarle una gran visión de cómo se construye toda la página. Además, muchos diseñadores y desarrolladores lo usan como una herramienta para probar los cambios antes de escribirlos en la hoja de estilo (porque cambiar una línea CSS en el inspector activa una vista previa en tiempo real en el navegador).

Yisela
fuente
1
Buen movimiento :-) un pensamiento: ¿cómo saber qué fuente en la pila de la familia de fuentes es la que realmente está viendo en la pantalla? Por lo general, lo hago por prueba y error, eliminando de la primera fuente hasta que cambia la apariencia, pero estoy seguro de que hay una mejor manera. ¿En WhatFont es el que está en cursiva? (ps bienvenido de nuevo!)
user56reinstatemonica8
@ user568458 Gracias :) Definitivamente quiero agregar capturas de pantalla del proceso de encontrar la fuente con el inspector. ¡Me cuesta mucho incluso después de años de usarlo! Pero para ser honesto, en realidad no tengo una técnica adecuada, también hago prueba y error. En WhatFont, creo que estar en cursiva significa que no es una fuente del sistema.
Yisela
@Yisela por curiosidad, ¿por qué la captura de pantalla WhatFont muestra una captura de color rojo (# ea4858) de una fuente azul? ¿Es solo el color que tomaste anteriormente o un error? EDITAR: Oh, veo que probablemente sea el color de desplazamiento cuando estaba seleccionando ese elemento, lo que parece poco ideal pero aún genial.
DasBeasto
@DasBeasto Sí, ¡es el color flotante! i.imgur.com/5NLjaEV.png Sin embargo, un buen punto, otra victoria para la inspección manual, ya que le permite elegir diferentes estados de interacción.
Yisela
3
También solo quería agregar, Firefox (v35.0) tiene un buen inspector de elementos para las fuentes. Puede seleccionar la pestaña de fuente que le dirá todos los detalles sobre el elemento que seleccionó (familia de fuente, estilo, tipo de archivo), o puede presionar "mostrar todas las fuentes utilizadas en la página", que mostrará todo lo descargado del servidor. Luego puede visitar la pestaña calculada que también le informará cosas como el tamaño del color, etc., sin el desorden y la herencia adicionales como Chrome.
DasBeasto
11

El 'elemento de inspección' del navegador no es perfecto

Usar las herramientas de desarrollador de su navegador es una buena manera de ver qué fuentes se declaran en el CSS de un sitio web. Sin embargo, esto no muestra qué fuente se está representando realmente, solo muestra la pila de fuentes que se está aplicando, la fuente real que se representa puede variar según las fuentes instaladas, etc.

Otra herramienta útil es Fount .

Fount le dirá qué fuente web en su pila de fuentes está viendo realmente, no solo lo que se supone que debe verse. También le indicará el tamaño, el peso y el estilo de la fuente.

Usar Fount es tan fácil como agregar un marcador. No es necesario instalar una aplicación ni ninguna extensión.

Después de agregar el marcador:

  1. Vaya a cualquier sitio y haga clic en el marcador de Fount.
  2. Haga clic en cualquier tipo que desee identificar. Repetir.
  3. Para desactivar Fount, simplemente haga clic nuevamente en el marcador.

Fount funciona en Safari, Chrome, Firefox e IE8 +.

Cai
fuente
Fount es bueno dado que también funciona para IE, pero a WhatFont le va mejor porque le muestra la fuente visible real, así como la fuente especificada en el marcado HTML. Entonces la comparación es rápida.
Moiz Tankiwala
1
Sitio caído ... no disponible en 2018
WesternGun
@FaithReaper el sitio (y el script) todavía funciona perfectamente bien para mí
Cai
1
Entro en el sitio y solo veo un bloque gris a la izquierda, sin instrucciones o nada. No puedo cargar las imágenes, pero se ve raro. fount.artequalswork.com/
WesternGun
@FaithReaper el sitio debería verse así: i.stack.imgur.com/goShP.png (aunque no subas imágenes, solo es un marcador que utilizas para inspeccionar las fuentes utilizadas en sitios en vivo)
Cai
1

Me encanta la extensión del navegador Chrome CSSViewer . Simplemente haga clic en él y desplace el cursor sobre la fuente que desea identificar y le mostrará la familia de fuentes.

extensión de cromo del visor css

usuario86140
fuente
-2

FontFinder está creado para diseñadores, desarrolladores y tipógrafos. Permite al usuario analizar la información de la fuente de cualquier elemento en una página, copiar cualquier pieza (s) de esa información en el portapapeles y realizar reemplazos en línea para probar nuevos diseños.

Este complemento es el mejor para encontrar la fuente y otros css, como el peso de la fuente, el tamaño y muchos más sitios web de formularios.

Khushbu Solanki
fuente
3
Hola Khushbu, bienvenido a GDSE. ¿Podría decirnos qué y dónde podemos "FontFinder"? Además, si está afiliado al producto, debe divulgar su afiliación en sus respuestas. Vea Cómo no ser un spammer .
Cai
2
El texto en la respuesta anterior es una copia y pega de chrome.google.com/webstore/detail/font-finder/… y / o add0n.com/font-finder.html
ChrisW