Utilitário para determinar a fonte usada em um site? [fechadas]

9

Por exemplo: eu gosto das fontes usadas no site: NYTimes , então algo que poderia listar todas as fontes usadas pelo site seria ótimo!

Eu não quero um utilitário de processamento de imagem que podem analisar as imagens ou um site que irá fazer perguntas sobre o tipo de letra e diminuir a partir de sua lista.

Algo que poderia rastrear o site e listar suas fontes ... Seria ótimo se pudesse sobrepor as fontes nas regiões, mas isso estaria indo longe demais, eu acho.

lazer
fonte
? @ Arjan por :-( tenho mencionado explicitamente o que eu não estou procurando, que foi objecto da maioria das respostas lá.
Lazer
O Firefox tornou isso muito fácil hoje em dia, para uma única página; veja minha resposta atualizada .
Arjan

Respostas:

20

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:

  • Usando um "inspetor" com o seu navegador (é isso que você está procurando!) - Eu uso o Google Chrome (porque eu amo isso), que possui uma ferramenta interna do Inspetor . Você realmente deveria tentar. Você acabou de acessar um site, clicar com o botão direito do mouse em qualquer elemento que deseja analisar e clicar em "Inspecionar elemento" no menu de contexto. O Inspetor exibe as propriedades dinâmicas do HTML e CSS ; portanto, se você inspecionar um elemento de texto, verá a font-familypropriedade cssno inspetor (na barra lateral direita), que informará qual é a fonte (veja abaixo para obter informações sobre como interpretar esse CSS). Você pode usar o Firebug for Firefox para realizar algo semelhante, mas acredito que a ferramenta Inspetor do Google Chrome é muito superior (sou desenvolvedor da Web - uso-o para tudo!).
  • Ou, você pode visualizar manualmente a fonte da página e analisar o CSS. Veja como fazê-lo:

    1. Quando você estiver na página, visualize a fonte. Se você estiver no Internet Explorer, vá para Página -> Exibir código-fonte ou Exibir -> Código-fonte. Se você estiver usando o Firefox, Chrome ou qualquer outro navegador moderno, pressione Ctrl + U (ou Apple + U, dependendo do seu sistema operacional).

    2. No código HTML, procure o conteúdo do texto que você está tentando analisar. Você deve encontrar algumas tags que contêm o texto e elas podem ter as fontes codificadas no HTML (usando uma <font>tag ou no styleatributo de um <p>ou em um <div>gabinete) ou podem fazer referência a algum CSS (procure um classou idatributo e anote-os).

    3. Se for o último (ele faz referência a CSS), vá para o topo do HTML e encontre as <link>tags na <head>página. Se o link estiver referenciando uma folha de estilo, você a verá - tudo o que você precisa fazer agora é ir para essa folha de estilo CSS e procurar os identificadores de classe ou ID que você anotou. Em algum lugar, você encontrará um font-familyproerpty correspondente (não se esqueça, você também pode definir fontes globalmente em todo o site, e isso estaria sob a <body>tag ou algo mais. É por isso que você deve usar uma ferramenta de inspeção, porque essa dificuldade é superada )

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.

  1. 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 .

    Abrindo o Inspetor

  2. 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!

    Visualizando as propriedades do elemento

  3. Isto é o que você faz: selecione o botão de opção ao lado de "Mostrar herdado".

    Selecione o show herdado

  4. Muitas outras propriedades globais aparecerão em "Estilo computado".

    Muitas propriedades globais aparecem

  5. 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!

    Aqui estão as fontes!

Maxim Zaslavsky
fonte
Vou adicionar uma explicação de exemplo para o NYTimes agora.
Maxim Zaslavsky
graças ppl Eu amo este lugar - www.superuser.com, ainda mais agora :)
Lazer
@ Maximz2005, para algumas seleções, não estou recebendo o "menu suspenso Estilo computado". Estou apenas recebendo um menu suspenso Estilo vazio. Por que é que?
194/09 Lazer
11
Como o inspetor é realmente o inspetor do WebKit, presumo que uma versão beta posterior também inclua uma versão mais recente do WebKit? Uma versão mais recente pode mostrar novos erros, é claro, mas me pergunto se é provável que você tenha encontrado um. Existe alguma maneira de mostrar a versão do WebKit usada no Chrome?
Arjan
11
o meu é o WebKit 532.0 @Maxim Z. Tentei no chrome do meu amigo (versão 3.something). Funciona perfeitamente lá. Eu finalmente consigo detectar fontes da maneira que eu queria. Agora eu entendo o quão legal o recurso "inspecionar elemento" realmente é.
23/09/09
7

Há duas coisas diferentes:

  1. Qual fonte é realmente usada (pelo navegador / sistema operacional).
  2. Qual fonte foi solicitada (pelo criador do site).

1. Qual fonte (substituta) é realmente usada

Para saber com certeza qual fonte é usada em um navegador específico no seu computador / sistema operacional, hoje em dia o Firefox e o Chrome possuem ferramentas internas para isso. Como o Firefox Page Inspector tem uma visualização de fontes :

Visualização de fontes do Firefox

Para obter mais detalhes, consulte Como determinar qual fonte um navegador está realmente usando para renderizar algum texto? no estouro de pilha. Isso inclui:

  • O texto pode incluir caracteres Unicode que não estão na fonte definida no CSS, portanto, várias fontes podem ser usadas em um único elemento.
  • Nem todos os navegadores da mesma máquina podem usar o mesmo tipo de fonte (como TrueType, Apple Advanced Technology, Microsoft OpenType, OpenType PostScript) e, portanto, podem usar fontes diferentes. Portanto, pode ser necessário determinar qual fonte é usada em outros navegadores.

2. Qual fonte foi solicitada

Para saber qual fonte foi solicitada (pelo criador do site), ferramentas como o Firefox Page Inspector interno ou sua extensão Firebug ajudam a inspecionar as regras de CSS. Essas ferramentas não informam qual fonte é realmente usada , mas mostram qual fonte é solicitada para uma região específica ou mesmo para uma palavra específica, dada a folha de estilo CSS:

CSS no Firebug

O acima mostra Firebug. Primeiro selecione "Mostrar estilo computado" no menu Estilo à direita. Em seguida, clique no botão de seta à esquerda. E, em seguida, basta clicar no texto de seu interesse. Isso atualizará as informações da folha de estilos CSS à direita. Veja os recursos para aprender sobre as funções CSS.

Alguns Firebug Lite também estão disponíveis para outros navegadores, mas eu nunca os usei.

O Inspetor da Web no Safari e as Ferramentas do desenvolvedor no Chrome têm opções semelhantes. (No Safari, ative o Web Inspector através das preferências: Mostrar menu Desenvolver na barra de menus .) O Internet Explorer possui as ferramentas F12 .

Como observou o e-t172 : a barra de ferramentas do desenvolvedor da Web para Firefox também pode mostrar essas informações. No entanto, CSS »Exibir informações de estilo não mostra nenhum estilo" herdado "(" em cascata "), mas apenas informações específicas da região em que você clica. Em vez disso, para obter uma espécie de sobreposição e realmente ver as informações da fonte, você pode usar Informações »Exibir informações do elemento. Isso mostrará os detalhes sempre que você clicar na página em algum lugar.

Arjan
fonte
+1 Para uma resposta muito mais detalhada que a minha.
BinaryMisfit 18/09/09
Como você conseguiu essas capturas de tela desbotadas? Parece com o Mac, alguma chance de obter efeito semelhante no Vista ou XP?
Lazer
@Lazer, Skitch em um Mac (mas as sombras são padrão e exigidas, pois o OS X tem bordas de janela muito finas, se houver). Não sei como fazê-lo no Windows.
Arjan
4

Se você usa o Firefox, existe o Complemento de Localização de Fontes . Ele faz basicamente o que Maxim Z. descreveu em sua resposta , mas automaticamente, por isso é realmente fácil de usar.

Ludwig Weinzierl
fonte
O Localizador de fontes é exatamente o que eu estava procurando. Se ao menos houvesse uma extensão semelhante para o Chrome.
22911 kangax
@ kangax, existe hoje em dia; veja a resposta de Alec
Arjan 3/13
E @kangax, atualmente o Firefox e o Chrome possuem ferramentas internas para determinar a fonte real. Não há mais adivinhação.
Arjan 01/01
4

Esta é de longe a melhor solução que encontrei. É um bookmarklet / extensão que 99% do tempo informa com certeza qual fonte está sendo usada, comparando os pixels do texto exibido com os de todas as fontes disponíveis, incluindo as fontes TypeKit e Google Font API.

Ferramenta WhatFont

insira a descrição da imagem aqui

Confira.

Máx.
fonte
Legal, muito legal, mas não acho que esteja comparando pixels (hoje em dia)? Quando o CSS apenas diz font-family: sans-serif, também é isso que é relatado - mas isso por si só não é uma fonte. Ao usar font-family: someUnknownFont, recebo (default font)como resultado, que na verdade é o Times no meu Mac. (Testado com o bookmarklet, usando este JS Bin ; captura de tela .) Ainda assim: novamente!
Arjan
@Arjun Eu o examinei em detalhes há alguns meses, então vou explicar o melhor que puder. Sob o capô, ele faz duas coisas. Ele usa window.getComputedStylepara obter a família de fontes computada. Em seguida, itera essa pilha, comparando os pixels de cada fonte com os pixels exibidos. A primeira correspondência é a que é mostrada em itálico no pop-up, o restante é mostrado normalmente. Se não houver correspondência, será exibido (default font). A razão pela qual você está vendo sans-serifé porque corresponde corretamente à sans-seriffonte, mas atualmente não discerne mais.
Max
O Firefox é meu novo melhor amigo para isso; veja a minha resposta atualizada :-)
Arjan
3

Não conheço nenhum software. Acabei de usar o Internet Explorer e descobri que a fonte usada é:

família de fontes: georgia, "times new roman", times, serif

Esta é a fonte principal. Procurar na folha de estilo qualquer coisa com a família de fontes fornecerá o resto.

Processo:

  • Clique com o Botão Direito na Página Inicial
  • Procura a linha rel = stylesheet e o URL da folha de estilo anexada
  • Copie e cole no navegador e baixe o arquivo css.
  • Abra no editor de texto.

Se você estiver procurando a fonte nas imagens que não serão definidas fora da imagem.

Sim, eu estava extremamente entediado. Afinal, é sexta-feira à tarde. Não publiquei o link, pois eles atualizam a folha de estilo regularmente.

BinaryMisfit
fonte
Uhuh, Firebug no Firefox ou Web Inspector no Safari ...?
Arjan #
11
Como eu disse. Eu estava entediado. Mude para o seu sabor do navegador e visualize a fonte. Existem outras ferramentas, mas mantê-lo simples não é necessariamente a abordagem errada.
BinaryMisfit 18/09/09
É bom apenas porque ensina ao usuário algo além de sempre confiar no Firefox.
random
Segundo a Wikipedia, ambos georgiae times new romansão tipos de letra. Então, o que o resultado significa? Uma combinação desses dois tipos de letra?
Lazer
1

Você pode usar a extensão Firefox do desenvolvedor da Web para ver todos os estilos usados ​​por uma parte específica de uma página da Web. Use o menu CSS, Exibir informações de estilo. Em seguida, clique no texto que você deseja analisar e procure a propriedade "font-family" nos resultados.

Etienne Dechamps
fonte
Informações »Exibir elemento As informações funcionam melhor (elas também mostram estilos herdados e você não precisa pesquisar).
22909 Arjan
1

Ao contrário do que muitas pessoas disseram, nem sempre é apenas uma questão de visualizar a fonte, etc - depende se o CSS está no documento ou em um arquivo css externo. Se for externo, você não pode simplesmente visualizar a fonte e encontrar a tag da família de fontes, pois ela não está no arquivo.

O pôster aconselhando a usar o Google Chrome realmente deu uma dica muito boa - eu aprendi algo aqui e queria adicionar uma dica extra. Nas ferramentas de desenvolvedor que aparecem no Chrome, você PODE clicar em "Estilo computado", clicar na caixa de seleção "Mostrar herdado" e rolar para baixo antes de encontrá-lo - este é um exemplo extremo, mas onde os programas dependem como a página foi estruturada.


fonte
0

Aqui está uma solução simples, mas eficiente: um bookmarklet que mostra a configuração aplicada a um elemento (incluindo a família de fontes).

Bookmarklets site de Jesse tem uma boa para este trabalho: computed styles.

Aqui está: https://www.squarefree.com/bookmarklets/webdevel.html#computed_styles

Adriano P
fonte
-1

se esse não for um CSS embutido, basta abrir a página na visualização de origem. Copie o endereço css como "/themes/01.css" e cole no URL do navegador. Copie a pasta de retorno no editor de texto ou no css. Use find para refinar a fonte ou a família de fontes. A família de fontes listadas usando para exibir a fonte da página quanto ao tamanho e outros atributos, como negrito, itálico etc.

Obrigado doronto

Obtenha um link grátis de volta
fonte