Detector de fontes

A detecção de fontes é um inspetor visual rápido para cores, espaçamento e contraste. Funciona em qualquer site, abre em um painel compacto e lembra um tamanho seguro. Você pode fechar o leitor de fontes da extensão clicando na cruz na janela ou clicando no ícone.

🔥 Destaques Principais

⭐ Presets de cópia de CSS limpos: Todos, localizador de fontes, tipografia, cores.
⭐️ Inspeção ao vivo na página com hover e clique em qualquer elemento.
⭐️ Distintivos Web/Local do aplicativo detector de fontes do Chrome renderizado.
⭐️ Elementos salvos para referências tipográficas e componentes.

📌 Como Funciona

Passe o mouse ou clique para bloquear um elemento; o painel mostra o seletor, Copiar CSS. O modo aprimorado no localizador de fontes informa se o acesso está bloqueado. Você precisa baixar toda vez que iniciar a extensão, mas não precisa dar permissão ao navegador novamente no detector de fontes do site.

⚡️ Ações Principais

1. Passe o mouse para visualizar.
2. Clique para bloquear a seleção.
3. Copie o CSS limpo.
4. Altere o detector de fontes.
5. Salve qualquer elemento.
6. Alterne a tipografia.

🪐 Exibição e Janela

Mostre ou oculte seções de tipografia, cor e espaçamento para manter a interface mínima. A janela da extensão detector de fontes do Chrome se ajusta à sua tela, começa na aba de elementos e não abrirá minimizada.

📚 Presets de Cópia

- Todos os dados CSS para um bloco de estilo completo.
- Tipografia para conjuntos de texto prontos para layout.
- Cores para paleta com extensões de fonte.

🧩 Detalhes de Tipografia

Família e pilha, peso com nomes legíveis, tamanho, altura da linha, espaçamento de letras/palavras, estilo, variante, além de botões de cópia rápida de peso. A extensão detector de fontes do Chrome é agrupada para que você veja o essencial sem desordem.

🎯 Benefícios Extras

1️⃣ Carregamento rápido de informações locais baseadas em domínio em um domínio permitido.
2️⃣ Seletor de tamanho de fonte com limites seguros da extensão do Chrome redimensionada fora da tela.
3️⃣ Itens salvos duplicados são estritamente prevenidos para manter a limpeza.

💡 Quem se Beneficia

Desenvolvedores front-end podem encontrar fontes em sites, considerando desenvolvedores verificando dados renderizados e espaçamento; designers de UI/UX auditando tipografia, cores e contraste; equipes de QA/acessibilidade verificando rapidamente os níveis WCAG. Também é um localizador para equipes que compartilham dados para sistemas de design consistentes.

🚀 Vantagens Rápidas

➤ Dados CSS limpos.
➤ Inspeção rápida.
➤ Um extrator de fontes.
➤ Pronto para contraste.
➤ Referência Web salva.
➤ Painel compacto.

🧶 Modo de Pausa

Interrompa temporariamente a seleção para que você possa interagir livremente com a página e a ferramenta de detector de fontes da web não funcionará. Toque nele quando precisar rolar, clicar ou acionar estados da interface sem perder seu lugar—então retome a inspeção em um único passo e você pode identificar a fonte no site.

🧷 Conteúdo do Item Recebido

• URL da página da web.
• Carimbo do nome do host.
• Um seletor de estilo de fonte.
• Tamanho e peso.
• Estilo + altura da linha.

🌟 Salvar Feedback

Quando você faz algo no detector de fontes do site, o painel mostra dicas visuais claras: um toast de marca de verificação atualiza o contador salvo, ações de cópia acionam uma breve mensagem de cópia no ícone, e estados de acesso negado do detector de fontes exibem um aviso para que você saiba exatamente o que corrigir antes de continuar.

🧠 Perguntas Frequentes

Q: Preciso ter o DevTools aberto?
A: Não, tudo está no painel flutuante.

Q: Isso vai deixar minha página lenta?
A: A extensão detector de fontes do Chrome é bem otimizada.

Q: Funciona em qualquer lugar?
A: Sim. O modo aprimorado precisa de HTTPS para baixar dados locais.

🔎 Pausa vs Ativo

Quando o inspetor está ativo, o localizador de fontes do site captura seu cursor para destacar elementos, então cliques e hovers na página são interceptados. Ative a pausa e a extensão “se afasta”: você pode clicar em botões e interagir com a página normalmente. Pronto para usar o seletor de família de fontes novamente? Desative a pausa e continue.

🧰 Controles da Janela

◆ Arraste para reposicionar o painel.
◆ Redimensione as bordas para se ajustar à sua visão.
◆ Um detector de fontes lembra o tamanho.
◆ Ajuste à sua tela atual.
◆ Maximize para uma visualização grande segura.

📝 Comparação com Outras Ferramentas

Diferente da What Font extension, que principalmente relata o nome da família declarada, nossa ferramenta revela a fonte renderizada real, oferece presets de CSS limpos com um clique e salva instantâneas completas de elementos. Diferente da whatfont extension, você também pode carregar presets locais para precisão e manter uma lista.

☘️ Começando

1️⃣ Comece usando o download do detector de fontes do site, clique no ícone, passe o mouse ou clique em um elemento.
2️⃣ Explore as informações na janela ocultando seções com dados que você não precisa agora.
3️⃣ Defina o modo de pausa quando precisar mudar algo sem bloquear a extensão.

❤️ Palavras Finais

Realmente tentamos fazer uma ótima extensão de seletor e estamos sempre abertos ao seu feedback para melhorias futuras. Instale e aproveite o uso confortável.