2012-02-03 16 views
57

Imagínese Tengo el siguiente CSS¿Cómo puedo saber qué fuente está usando Chrome?

font-family: 'Non-existant Sans', Arial, sans-serif; 

Suponiendo 'Sans inexistente' no está instalado en el sistema, Arial será utilizado por el navegador. Con Chrome, ¿hay alguna forma de averiguar qué fuente se está procesando?

Editar: Dave (en los comentarios a la pregunta) ha señalado una pregunta similar. Estoy preguntando específicamente sobre Chrome aquí. Muchas de las respuestas en la otra pregunta sugieren extensiones que están bien, sin embargo; ¿hay una manera nativa de determinar esta información usando solo las herramientas Dev?

Editar Sept 2013: El equipo de Chrome acaba de anunciar que la inspección fuente de la familia ya está disponible en el latest builds of Chrome Canary (enlace Twitter contiene una imagen con más información). Esto debería llegar a través de dev> beta> estable en las próximas semanas. ¡Buenas noticias!

+0

Gracias a Dave, Intenté buscar pero no pude encontrar nada. ¿No hay una forma de determinar la fuente utilizada sin usar una extensión? –

Respuesta

0

Su 'Sans inexistente' se puede representar con @ font-face en su CSS. http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

No conozco una forma de detectar la representación de fuentes, por lo que no respondo técnicamente a su pregunta. Encontré esto: http://webdesignerwall.com/tutorials/css3-font-face-design-guide es un javascript llamado Modernizr que asegura que si un navegador no es compatible con @ font-face, cargará fuentes de respaldo como Arial y Helvetica.

5

Si no desea utilizar un plugin no es un bookmarklet que le dirá esto (una vez activado y se pasa sobre dicho texto):

http://chengyinliu.com/whatfont.html

+0

Genial idea, pero solo he podido hacer que funcione en su página de ejemplo. – Dave

+0

Sugerencia agradable, me gusta que esté disponible como un complemento Y un marcador. Preferiría una solución que use las herramientas Dev, pero esta es la mejor hasta ahora. –

6

estoy un poco tarde para la fiesta, pero acabo de descubrir una forma muy sencilla de depurar qué fuente está usando su navegador.

En el Inspector web de Chrome, vaya a la pila de fuentes en el panel CSS del panel de elementos. Luego, comenzando con la parte superior de la pila, cambie el nombre de la fuente (agrego letras aleatorias) sin perder de vista el texto en cuestión. Cuando cambie el que está en uso, verá que el texto cambia de fuente a medida que vuelve al siguiente en la pila.

asumo algo similar es posible en la mayoría de las herramientas dev

Voilá

+0

Esa es una buena idea, y no requiere el uso de una extensión o bookmarklet, gracias. –

+0

En realidad obtuve la idea del ''No-existente Sans'' en tu pregunta – Iolo

68

En devtools Google Chrome en la pestaña de 'elementos', en 'computarizada':

Magic paper roses hello kitty

+0

Gracias Piña, pero mira la edición de la pregunta que hice el mes pasado. –

+15

En Chrome 34.0.1847.116, la fuente representada se enumera en la pestaña Computado hasta el final en la parte inferior. La sección se llama "Fuentes renderizadas". También debe seleccionar un elemento específico que tenga texto; de lo contrario, no se mostrará. – JMS10

+0

¿Qué significa "69 glifos" después del nombre de la fuente? – agad

Cuestiones relacionadas