Por ejemplo: me gustan las fuentes utilizadas en el sitio web: NYTimes , ¡así que algo que pueda enumerar todas las fuentes utilizadas por el sitio web sería genial!
Yo no quiero una utilidad de procesamiento de imágenes que podrían analizar las capturas de pantalla o un sitio que le hará preguntas acerca de la fuente y reducir el número de su lista.
Algo que podría rastrear el sitio web y enumerar sus fuentes ... Sería genial si pudiera superponer las fuentes en las regiones, pero supongo que iría demasiado lejos.
software-rec
website
fonts
Lazer
fuente
fuente
Respuestas:
Hay múltiples formas de lograr esto. Realmente hago esto bastante, porque estoy muy interesado en cómo funciona CSS, y también me encanta la tipografía. Las dos formas en que me gusta hacer esto son:
font-familypropiedad cssen el inspector (en la barra lateral derecha), que le indicará cuál es la fuente (consulte a continuación para obtener información sobre cómo interpretar este CSS). Puede usar Firebug para Firefox para lograr algo similar, pero creo que la herramienta Google Chrome Inspector es muy superior (soy un desarrollador web, ¡lo uso para todo!).O bien, puede ver manualmente el origen de la página y analizar el CSS. Aquí se explica cómo hacerlo:
Cuando esté en la página, vea la fuente. Si está en Internet Explorer, vaya a Página -> Ver código fuente o Ver -> Código fuente. Si está utilizando Firefox, Chrome o cualquier otro navegador moderno, presione Ctrl + U (o Apple + U, dependiendo de su sistema operativo).
En el código HTML, busque el contenido de texto que está tratando de analizar. Usted debe encontrar algunas etiquetas que contienen el texto, y pueden tener o bien las fuentes en forma fija en el código HTML (usando una
<font>etiqueta o en elstyleatributo de un<p>o una<div>caja), o puede hacer referencia a un poco de CSS (look para unaclassoidatributo y anótelos).Si es el último (hace referencia a algunos CSS), vaya a la parte superior del HTML y busque las
<link>etiquetas en<head>la página. Si el enlace hace referencia a una hoja de estilo, lo verá: todo lo que tiene que hacer ahora es ir a esa hoja de estilo CSS y buscar los identificadores de clase o identificación que anotó. En algún lugar, encontrará unafont-familypropiedad correspondiente (no se olvide, también puede establecer fuentes globalmente en todo el sitio, y esto estaría debajo de la<body>etiqueta o algo más. Es por eso que debe usar una herramienta de inspección, porque esta dificultad se supera )Cómo interpretar el
font-familyCSS:La
font-familypropiedad determinará cuáles son las fuentes. En esta propiedad, las fuentes se separarán con comas . Al representar la página, un navegador examinará esta lista y usará la primera fuente que esté en la computadora . En muchos casos, también hay una categoría de fuente al final de esta propiedad, que es solo una "just in-case" para que la fuente predeterminada para esa categoría se use si no hay otras disponibles.Un ejemplo: Digamos que esto es algo de CSS para un
<p>gabinete.Aquí, el navegador primero intentará usar Calibri, si la fuente está disponible. De lo contrario, usa Comic Sans MS o Georgia, o solo la fuente sans-serif predeterminada si las otras no están disponibles.
Así es como puede averiguar qué fuentes se están utilizando. No he encontrado ninguna herramienta útil y bien construida que visualice el CSS de una manera muy agradable, pero creo que la opción Inspector funcionará para usted (¡no es demasiado confuso!). Creo que este es el camino a seguir.
Ejemplo de cómo encontrar fuentes NYTimes con una herramienta Inspector:
Le explicaré cómo encontrar las fuentes para el cuerpo del texto principal de un artículo de NYTimes con Google Chrome.
Vaya a un artículo en NYTimes.com, haga clic derecho en un elemento de texto para el que desea encontrar las fuentes y presione Inspeccionar elemento .
Mira la barra lateral a la derecha. En el menú desplegable Estilo calculado , verá las propiedades CSS de este elemento. Sin embargo, como puede ver, actualmente no hay ninguna propiedad de familia de fuentes aquí, lo que significa que las fuentes se definen globalmente, no solo para este elemento específico. Sin embargo, hay una manera de evitar esto.
Esto es lo que debe hacer: seleccione el botón de opción junto a "Mostrar heredado".
Aparecerán muchas otras propiedades globales en "Estilo calculado".
Desplácese hacia abajo en la lista hasta "font-family". Debe estar en gris, lo que significa que es una propiedad global heredada. ¡Aquí puedes ver las fuentes utilizadas! Ta-da!
fuente
Hay dos cosas diferentes:
1. Qué fuente (alternativa) se usa realmente
Para saber con certeza qué fuente se utiliza en un navegador específico en su computadora / sistema operativo, hoy en día Firefox y Chrome tienen herramientas integradas para eso. Al igual que el inspector de página de Firefox tiene una vista de fuentes :
Para obtener más detalles, consulte ¿Cómo puedo determinar qué fuente está utilizando realmente un navegador para representar texto? en desbordamiento de pila. Eso incluye:
2. Qué fuente se solicitó
Para saber qué fuente fue solicitada (por el creador del sitio web), herramientas como el Inspector de página de Firefox incorporado o su extensión Firebug ayudan a inspeccionar las reglas CSS. Dichas herramientas no le dicen qué fuente se usa realmente , pero sí muestra qué fuente se solicita para una región específica, o incluso para una palabra específica, dada la hoja de estilo CSS:
Lo anterior muestra Firebug. Primero seleccione "Mostrar estilo calculado" en el menú Estilo a la derecha. Luego, haga clic en el botón de flecha a la izquierda. Y luego simplemente haga clic en el texto de su interés. Esto actualizará la información de la hoja de estilo CSS a la derecha. Vea las características para aprender sobre las funciones CSS.
Algunos Firebug Lite también están disponibles para otros navegadores, pero nunca los usé.
Web Inspector en Safari y Developer Tools en Chrome tienen opciones similares. (En Safari, habilite el Inspector web a través de las preferencias: Mostrar el menú Desarrollar en la barra de menú ). Internet Explorer tiene las herramientas F12 .
Como señaló e-t172 : la barra de herramientas de desarrollador web para Firefox también puede mostrar esta información. Sin embargo, CSS »Ver información de estilo no muestra ningún estilo" heredado "(" en cascada "), sino solo información específica de la región en la que hace clic. En cambio, para obtener una especie de superposición y ver realmente la información de la fuente, puede usar Información »Mostrar información del elemento. Eso mostrará los detalles cada vez que haga clic en la página en algún lugar.
fuente
Si usa Firefox, existe el complemento Font Finder . Hace básicamente lo que Maxim Z. describió en su respuesta , pero automáticamente, por lo que es realmente fácil de usar.
fuente
Esta es, con mucho, la mejor solución que he encontrado. Es un bookmarklet / extensión que el 99% del tiempo le dirá con certeza qué fuente se está utilizando, al comparar los píxeles del texto que se muestra con los de cada fuente disponible, incluidas las fuentes TypeKit y Google Font API.
WhatFont Tool
Echale un vistazo.
fuente
font-family: sans-serifeso también es lo que se informa, pero eso en sí mismo no es una fuente. Cuando usofont-family: someUnknownFontobtengo(default font)como resultado, que en realidad es Times en mi Mac. (Probado con el bookmarklet, usando este JS Bin ; captura de pantalla .) Aún así, de nuevo: ¡bien!window.getComputedStylepara obtener la familia de fuentes calculada. Luego itera esta pila, comparando los píxeles de cada fuente con los píxeles mostrados. La primera coincidencia es la que se muestra en cursiva en la ventana emergente, el resto se muestra normalmente. Si no hay coincidencia, se mostrará(default font). La razón por la que está viendosans-serifes porque lo hace coincidir correctamente con lasans-seriffuente, pero actualmente no se distingue más.No conozco ningún software. Acabo de usar Internet Explorer y descubrí que la fuente utilizada es:
Esta es la fuente principal. Buscar en la hoja de estilo cualquier cosa con font-family proporcionará el resto.
Proceso:
Si busca la fuente en las imágenes que no se definirán fuera de la imagen.
Sí, estaba extremadamente aburrida. Es viernes por la tarde después de todo. No publiqué el enlace ya que actualizan la hoja de estilo regularmente.
fuente
georgiaytimes new romanson tipos de letra. Entonces, ¿qué significa el resultado? ¿Una combinación de esos dos tipos de letra?Puede usar la extensión Web Developer Firefox para ver todos los estilos utilizados por una parte específica de una página web. Use el menú CSS, Ver información de estilo. Luego haga clic en el texto que desea analizar y busque la propiedad "font-family" en los resultados.
fuente
Al contrario de lo que mucha gente ha dicho, NO siempre se trata solo de ver la fuente, etc., depende de si el CSS está en el documento o en un archivo css externo. Si es externo, no puede simplemente ver la fuente y encontrar la etiqueta de familia de fuentes, ya que en realidad no está en el archivo.
El póster que aconseja utilizar Google Chrome en realidad ha dado una muy buena sugerencia: aprendí algo aquí y quería agregar una sugerencia adicional. En las herramientas de desarrollador que aparecen en Chrome, es posible que tenga que hacer clic en "Estilo calculado", luego haga clic en la casilla de verificación "Mostrar heredado" y luego desplácese hacia abajo antes de encontrarlo; este es un ejemplo extremo, pero dónde se muestra dependerá de cómo se ha estructurado la página.
fuente
Aquí hay una solución simple pero eficiente: un bookmarklet que muestra la configuración aplicada a un elemento (incluida la familia de fuentes).
Bookmarklets sitio de Jesse tiene un buen año para este trabajo:
computed styles.Aquí tienes: https://www.squarefree.com/bookmarklets/webdevel.html#computed_styles
fuente
si ese no es un CSS en línea, simplemente abra la página en la vista de origen. Copie la dirección css como "/themes/01.css" pegue en la url del navegador. Copie la pasta de retorno en el editor de texto o editor CSS. Use find para refinar la fuente o font-family done. La familia de fuentes listada que se utiliza para mostrar la fuente de la página para el tamaño y otros atributos como negrita, cursiva, etc.
Gracias doronto
fuente