Existem várias maneiras de conseguir isso. Na verdade, faço bastante isso, porque estou muito interessado em como o CSS funciona e também adoro tipografia. As duas maneiras que eu gosto de fazer isso são:
Como interpretar o font-familycss:
A font-familypropriedade determinará quais são as fontes. Nesta propriedade, as fontes serão separadas por vírgulas . Ao renderizar a página, um navegador percorre essa lista e usa a primeira fonte que está no computador . Em muitos casos, também há uma categoria de fonte no final dessa propriedade, que é apenas uma "just-in-case", para que a fonte padrão dessa categoria seja usada se nenhuma outra estiver disponível.
Um exemplo: digamos que este é um CSS para um <p>gabinete.
p.thisisasampleclass
{
font-family: Calibri, "Comic Sans MS", Georgia, sans-serif;
}
Aqui, o navegador tentará primeiro usar o Calibri, se a fonte estiver disponível. Caso contrário, ele usa o Comic Sans MS, ou Georgia, ou apenas a fonte sans-serif padrão, se os outros não estiverem disponíveis.
É assim que você pode descobrir quais fontes estão sendo usadas. Não encontrei nenhuma ferramenta bem construída e útil que visualize o CSS de uma maneira muito agradável, mas acho que a opção Inspetor funcionará para você (não é muito confuso!). Eu acho que este é o caminho a percorrer.
Exemplo de como encontrar fontes do NYTimes com uma ferramenta Inspector:
Vou mostrar como encontrar as fontes para o corpo do texto principal de um artigo do NYTimes com o Google Chrome.
Vá para um artigo no NYTimes.com, clique com o botão direito do mouse no elemento de texto para o qual deseja encontrar as fontes e pressione Inspect Element .
Olhe para a barra lateral à direita. No menu suspenso Estilo computado , você verá as propriedades CSS deste elemento. No entanto, como você pode ver, não há nenhuma propriedade da família de fontes aqui atualmente, o que significa que as fontes são definidas globalmente, não apenas para esse elemento específico. No entanto, há uma maneira de contornar isso!
Isto é o que você faz: selecione o botão de opção ao lado de "Mostrar herdado".
Muitas outras propriedades globais aparecerão em "Estilo computado".
Role para baixo na lista para "família de fontes". Deve estar em cinza, o que significa que é uma propriedade global herdada. Aqui, você pode ver as fontes usadas! Ta-da!
