Como posso saber quais fontes um site está usando?

36

Como posso descobrir qual fonte ou fontes um site está usando? Existem ferramentas ou extensões de navegador que podem facilitar o trabalho?

Yisela
fonte
1
Veja minha resposta no Stack Overflow para obter ferramentas internas no Chrome e Firefox e uma opção de copiar e colar para o Safari: stackoverflow.com/questions/884177/…
Arjan
Sem 10 repetições para responder, faço-o aqui: neste momento (2018.3), o Fount não está disponível e o WhatFont não está acessível na loja de complementos do Firefox; finalmente, tenho que entrar no DevTool do Chrome / IE / FF / Opera, guia "Estilo", editar a propriedade para excluir cada fonte e ver qual é a fonte aplicada. É uma pena que todos os DevTools mostrem apenas a pilha completa de fontes e não a realmente aplicada . Mesmo no FF, o "melhor par" não é o melhor; o pop-up "melhor correspondência" é exibido em todas as fontes da pilha ........ bobo, certo?
WesternGun 14/03
@ WestestGun, o que você quer dizer com "todos os DevTools" ? Firefox e Chrome mostram a fonte real muito bem; veja as capturas de tela na resposta que eu vinculei no meu comentário anterior.
Arjan
OK, ignorei a captura de tela @Arjan. Agora é óbvio.
WesternGun

Respostas:

44

Opção 1: use uma extensão do navegador (Fácil)

Extensões como o WhatFont (disponível para Chrome, Firefox e Safari) facilitam bastante a detecção de famílias de fontes de qualquer texto em uma página da web. Você só precisa instalar a extensão, ativá-la em um site e clicar no elemento que deseja inspecionar. Os resultados são mostrados em uma caixa flutuante, sempre no contexto de sua escolha.

insira a descrição da imagem aqui


Opção 2: verificar manualmente o CSS com inspetores do navegador (avançado)

A maioria dos navegadores permite que você encontre facilmente as fontes usando right-click→ 'Inspecionar' ou 'Inspecionar elemento'. Isso também pode ser feito pressionando F12. Isso mostrará uma lista de estilos anexados ao site, que você pode explorar para encontrar as fontes usadas em qualquer elemento HTML.

insira a descrição da imagem aqui

O uso do inspetor não é tão simples quanto o uso de uma extensão, mas possui várias vantagens. É necessário algum entendimento de CSS, pois geralmente você precisará passar por vários estilos para encontrar o que está sendo aplicado. Como regra geral, os estilos riscados estão sendo substituídos; portanto, sempre procure os que estão sendo aplicados por último.

Todos os estilos da página são listados na guia Estilo , mas se você usar a guia Computado , poderá encontrar as propriedades que são ativamente aplicadas ao elemento que você selecionou, incluindo, obviamente, a família de fontes.

Finalmente, outra maneira de verificar rapidamente quais fontes estão sendo usadas globalmente (mas NÃO como ou onde) é ir para 'Aplicativo → Quadros → Fontes' . Lá, você encontrará uma lista de todas as fontes referenciadas (não pertencentes ao sistema).

Esse segundo método é mais lento, mas o uso do inspetor pode fornecer uma ótima visão da maneira como a página inteira é criada. Além disso, muitos designers e desenvolvedores o usam como uma ferramenta para testar alterações antes de realmente escrevê-las na folha de estilo (porque alterar uma linha CSS no inspetor aciona uma visualização em tempo real no navegador).

Yisela
fonte
1
Boa jogada :-) um pensamento - como saber qual fonte na pilha da família de fontes é a que você realmente está vendo na tela? Geralmente faço isso por tentativa e erro, excluindo da primeira fonte até que a aparência mude, mas tenho certeza de que há uma maneira melhor. No WhatFont, é o único em itálico? (bem-vindo de volta ps!)
user56reinstatemonica8
@ user568458 Obrigado :) Eu definitivamente quero adicionar capturas de tela do processo de localização da fonte com o inspetor. Eu mesmo tenho dificuldade mesmo depois de anos de uso! Mas, para ser sincero, na verdade não tenho uma técnica adequada, faço tentativa e erro também. No WhatFont, acredito que estar em itálico significa que não é uma fonte do sistema.
Yisela 12/01
@Yisela por curiosidade, por que a captura de tela do WhatFont mostra uma captura de cor vermelha (# ea4858) de uma fonte azul? É apenas a cor que você pegou anteriormente ou um erro? EDIT: Oh, eu vejo que provavelmente é a cor do foco quando você selecionou esse elemento, o que parece não ideal, mas ainda é legal.
DasBeasto 12/01
@DasBeasto Sim, é a cor do foco! No entanto, mais uma vitória para a inspeção manual, pois permite escolher diferentes estados de interação.
Yisela 12/01
3
Também queria apenas adicionar, o Firefox (v35.0) tem um bom inspetor de elementos para fontes. Você pode selecionar a guia fonte que informará todos os detalhes sobre o elemento que você selecionou (família de fontes, estilo, tipo de arquivo) ou clicar em "mostrar todas as fontes usadas na página", que mostrará tudo o que foi baixado do servidor. Depois, você pode visitar a guia computada, que também informará coisas como tamanho de cor etc. sem a desorganização e herança extras como o Chrome.
DasBeasto 12/01
11

O "elemento de inspeção" do navegador não é perfeito

O uso das ferramentas de desenvolvedor do seu navegador é uma boa maneira de ver quais fontes são declaradas no CSS de um site. Porém, isso não mostra qual fonte está sendo renderizada - apenas mostra a pilha de fontes sendo aplicada - a fonte real sendo renderizada pode variar dependendo das fontes instaladas etc.

Outra ferramenta útil é o Fount .

O Fount lhe dirá qual fonte da Web na sua pilha de fontes você está realmente vendo - e não apenas o que deve ser visto. Também informará o tamanho, o peso e o estilo da fonte.

Usar o Fount é tão fácil quanto adicionar um marcador. Não há necessidade de instalar um aplicativo ou qualquer extensão.

Depois de adicionar o marcador:

  1. Vá para qualquer site e clique no bookmarklet Fount.
  2. Clique em qualquer tipo que você deseja identificar. Repetir.
  3. Para desativar o Fount, basta clicar no bookmarklet novamente.

O Fount funciona no Safari, Chrome, Firefox e IE8 +.

Cai
fonte
O Fount é bom, pois também funciona para o IE, mas o WhatFont se sai melhor porque mostra a fonte visível real e a fonte especificada na marcação HTML. Portanto, a comparação é rápida.
Moiz Tankiwala
1
Site inativo ... não disponível em 2018
WesternGun 14/03/2019
@FaithReaper o site (e roteiro) ainda funciona perfeitamente bem para mim
Cai
1
Entro no site e vejo apenas um bloco cinza à esquerda, sem instruções ou nada? Não consigo carregar as imagens, mas parece estranho. fount.artequalswork.com/
WesternGun
@FaithReaper, o site deve ficar assim: i.stack.imgur.com/goShP.png (no entanto, você não carrega imagens, é apenas um marcador usado para inspecionar fontes usadas em sites ao vivo)
Cai
1

Adoro a extensão CSSViewer do navegador Chrome . Você apenas clica e passa o mouse sobre a fonte que deseja identificar e mostra a família de fontes.

extensão css viewer chrome

user86140
fonte
-2

O FontFinder foi criado para designers, desenvolvedores e tipógrafos. Ele permite que o usuário analise as informações da fonte de qualquer elemento da página, copie qualquer parte dessas informações para a área de transferência e execute substituições em linha para testar novos layouts.

Este complemento é o melhor para encontrar a fonte e outros css, como peso, tamanho e muitas outras páginas da web.

Khushbu Solanki
fonte
3
Olá Khushbu, seja bem-vindo ao GDSE. Você poderia nos dizer o que e onde podemos "FontFinder"? Além disso, se você é afiliado ao produto, deve divulgar sua afiliação em suas respostas. Veja Como não ser um spammer .
Cai
2
O texto na resposta acima é um copiar e colar de chrome.google.com/webstore/detail/font-finder/… e / ou add0n.com/font-finder.html
ChrisW