Herramientas para desarrolladores: ¿Qué fuente es esa?

Las Herramientas para desarrolladores de Chrome ahora pueden indicarte exactamente qué tipo de letra se usa para renderizar texto.

Las pilas de fuentes son algo divertido, más una sugerencia que una demanda. Como es posible que la familia que sugieres no esté presente, permites que el navegador de cada usuario se encargue del caso de incumplimiento, extrae algo que funciona y lo usa.

font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;

Como desarrollador, debes saber qué fuente realmente se usa. Aquí te mostramos cómo funciona:

Familia de fuentes en Herramientas para desarrolladores

En Estilos computados, ahora verás un resumen de los tipos de letra utilizados para ese elemento. Debes tener en cuenta lo siguiente:

  • Herramientas para desarrolladores informa el tipo de letra real que usa la capa de renderización de texto de Chrome. Ya no tendrás que adivinar con qué fuente serif o sans-serif se está resolviendo realmente.
  • ¿Funciona mi fuente para sitios web? A veces, es difícil saber si la fuente para sitios web o la fuente de resguardo del sistema. Ahora puedes verificar que se esté aplicando la fuente para sitios web. En el ejemplo anterior, se utiliza Lobster como fuente web para el estilo ::first-line.
  • Las fuentes con fallas en la pila son fáciles de detectar. Arriba hay un error tipográfico de Merriweather, por lo que no se utilizó, lo que cae por la langosta.
  • ¿Es Arial o Helvética? Pide a un diseñador o... pídele a Herramientas para desarrolladores. ;)
  • Funciona muy bien con fuentes web de Google, Typekit, fuentes locales, tipos de letra @font-face, glifos Unicode y todas las demás fuentes de fuentes interesantes.

Que lo disfrutes y, si tienes comentarios, déjalos.