Fonte de um site: veja a pilha de fontes declarada
O SuperchargeInspect identifica a fonte de um site a partir do texto. Ele mostra a pilha de font-family declarada, o tamanho, o peso e a altura da linha, e copia tudo com um clique.
Atualizado em
Ag
- Ink
- Amber
- Paper
Você vê uma fonte em um site e quer saber o nome dela, então procura uma forma de descobrir a fonte de um site pelo texto. Aponte para o texto e a seção Typography mostra a família de fonte que a página declara, com tamanho, peso e altura de linha. Essa é a pilha de fontes declarada, não uma verificação de qual fonte o navegador realmente renderizou. O SuperchargeInspect lê o texto real da página para que você veja e copie os estilos de uma vez só.
O que uma ferramenta para descobrir a fonte de um site mostra
Quando você inspeciona os estilos de fonte de uma página, a seção Typography traz o conjunto completo. Aponte para qualquer texto e ela começa pela família de fonte. O rótulo mostra a primeira família da lista. Clique nesse rótulo para copiar o font-family, e a pilha de fontes declarada completa vai para a sua área de transferência.
O dado Size mostra o tamanho da fonte com a altura de linha depois de uma barra, como 16 / 24, e um clique copia os dois juntos como 16px / 24px. Weight é um valor separado e Tracking mostra o espaçamento entre letras.
A seção também mostra um exemplo renderizado na própria fonte do elemento, como prévia visual. É uma prévia de como o texto fica, não uma verificação de qual fonte o navegador usou. Você lê os valores e depois clica nos que quiser.
Pilha declarada, não a fonte renderizada
Uma pilha de fontes é uma lista de famílias que a página solicita, em ordem. A primeira família é a que ela tenta primeiro. Se essa não estiver disponível, o navegador passa para a próxima da lista. É essa lista que um valor font-family contém.
O SuperchargeInspect mostra essa lista. Ele não verifica qual família o navegador acabou usando. Então, se a primeira família não carregou e o navegador recorreu a outra, o rótulo continua mostrando a primeira família. Uma ferramenta para descobrir a fonte de um site mostra o valor declarado, não o resultado renderizado.
Ele lê apenas o texto real da página. Não lê fontes em imagens.
Como copiar a fonte
Você pode pegar a fonte de algumas formas. O rótulo Family mostra a primeira família, e ao copiar você leva a lista inteira.
| Onde | O que você recebe |
|---|---|
| Rótulo Family em Typography | A primeira família da pilha |
| Clique em Family | A pilha de fontes declarada completa |
| Copiar só o texto ou Copiar referência | A pilha completa, identificada como declaração, não como fonte renderizada verificada |
| Rodapé do PNG de referência | A primeira família |
A pilha completa é o valor que você realmente usa. Cole no seu próprio CSS como font-family e o navegador resolve as famílias na mesma ordem em que a página as listou.
Teclado
Pressione Alt+Shift+E para começar. Navegue entre os elementos com as setas do teclado. Segure Ctrl e pressione a seta para cima ou para baixo para ir ao elemento pai ou a um filho. No macOS, use Option em vez de Ctrl. Pressione Enter para fixar o elemento em que você está e Esc para voltar à seleção ou fechar o painel. Ir ao elemento pai ou a um filho ajuda quando o texto está em um elemento pequeno e aninhado, difícil de apontar com o mouse.
Privacidade
O SuperchargeInspect não faz nenhuma chamada de rede e não exige conta. A pilha só sai do seu dispositivo quando você mesmo a cola em algum lugar.
Veja também as cores e os espaçamentos com o inspetor de CSS.
Perguntas frequentes
Qual fonte este site usa?
Dá para descobrir a fonte de uma imagem ou print?
O que é copiado quando clico na família da fonte?
Ele mostra o tamanho, o peso e a altura de linha?
Ele envia dados da página para algum lugar?
Recursos relacionados
Mostre à sua ferramenta de programação com IA o elemento exato a ser alterado
Aponte para o elemento, adicione uma nota e copie uma referência com um print anotado e os estilos observados. Depois cole na ferramenta de programação com IA que você usa hoje.
Inspecionar elemento CSS: veja e copie os valores CSS de qualquer elemento
Um inspetor de CSS que permite ver o CSS de qualquer elemento em um site. Veja a fonte, as cores, o espaçamento e o box model, e copie os valores de CSS para a área de transferência.
Ver cor de um elemento: encontre o código hex de qualquer elemento de um site
Veja as cores de um site em qualquer página aberta. Aponte para o elemento e a seção Colors mostra as cores do texto, do fundo e da borda. Um clique copia o código hex.