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.
software-rec
website
fonts
lazer
fonte
fonte
Respostas:
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:
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:
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).
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 nostyleatributo de um<p>ou em um<div>gabinete) ou podem fazer referência a algum CSS (procure umclassouidatributo e anote-os).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á umfont-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.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!
fonte
Há duas coisas diferentes:
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 :
Para obter mais detalhes, consulte Como determinar qual fonte um navegador está realmente usando para renderizar algum texto? no estouro de pilha. Isso inclui:
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:
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.
fonte
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.
fonte
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
Confira.
fonte
font-family: sans-serif, também é isso que é relatado - mas isso por si só não é uma fonte. Ao usarfont-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!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á vendosans-serifé porque corresponde corretamente àsans-seriffonte, mas atualmente não discerne mais.Não conheço nenhum software. Acabei de usar o Internet Explorer e descobri que a fonte usada é:
Esta é a fonte principal. Procurar na folha de estilo qualquer coisa com a família de fontes fornecerá o resto.
Processo:
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.
fonte
georgiaetimes new romansão tipos de letra. Então, o que o resultado significa? Uma combinação desses dois tipos de letra?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.
fonte
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
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
fonte
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
fonte