Paul Irish
O Chrome DevTools agora informa exatamente qual tipo de letra está sendo usado para renderizar o texto.
As pilhas de fontes são uma coisa engraçada, 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 processe o caso de fallback, extraindo algo que funcione 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 Styles computed, você vai encontrar um resumo dos tipos de letra usados para esse elemento. Há algumas coisas a serem observadas aqui:
- O DevTools está relatando a fonte real usada pela camada de renderização de texto do Chrome. Não é mais necessário adivinhar qual fonte
serifousans-serifestá sendo resolvida. - Minha fonte da Web está funcionando? Às vezes, é difícil dizer se você está vendo a webfont ou a fonte do sistema substituta. Agora você pode verificar se a fonte da Web está sendo aplicada. No exemplo acima, estamos carregando Lobster como uma fonte da Web para o estilo
::first-line. - As fontes da pilha são fáceis de detectar. No exemplo acima, houve um erro de digitação em Merriweather, e a palavra não foi usada, passando para "Lobster".
- É Arial ou Helvetica? Pergunte a um designer ou… pergunte ao DevTools. ;)
- Funciona muito bem com fontes da Web do Google, Typekit, fontes locais, tipos de letra @font-face, glifos Unicode e todas as outras fontes interessantes.
Aproveite e deixe um comentário se tiver algum feedback.