Paul Irish
O Chrome DevTools agora pode informar exatamente qual família tipográfica está sendo usada para renderizar texto.
As pilhas de fontes são algo engraçado, mais uma sugestão do que uma demanda. Como a família sugerida pode não estar presente, você permite que o navegador de cada usuário lide com a falha, pegando algo que funcionará e usando isso.
font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
Como desenvolvedor, você quer saber qual fonte realmente está sendo usada. Veja como funciona:
Em Estilos computados, agora há um resumo das famílias tipográficas usadas para esse elemento. Há algumas coisas a serem observadas aqui:
- O DevTools está relatando a família tipográfica real usada pela camada de renderização de texto do Chrome. Chega de adivinhar qual fonte
serifousans-serifestá sendo resolvida. - Minha webfont está funcionando? Às vezes, é difícil dizer se você está vendo a webfont ou a fonte substituta do sistema. Agora você pode verificar se a webfont está sendo aplicada. No exemplo acima, estamos pegando Lobster como uma fonte da Web para o estilo
::first-line. - É fácil identificar as fontes de outono na pilha. Acima, tínhamos a grafia Merriweather e, por isso, ela não foi usada, caindo no Lobster.
- É Arial ou Helvetica? Pergunte a um designer ou... pergunte ao DevTools. ;)
- Funciona muito bem com Google Webfonts, Typekit, fontes locais, tipos @font-face, glifos Unicode e todas as outras fontes de fontes interessantes.
Aproveite! Se tiver algum feedback, deixe um comentário.