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:
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.
p.thisisasampleclass
{
font-family: Calibri, "Comic Sans MS", Georgia, sans-serif;
}
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!
