Como posso determinar qual fonte um navegador está realmente usando para renderizar algum texto?

175

Meu CSS especifica " font-family: Helvetica, Arial, sans-serif;" para a página inteira. Parece que o Verdana está sendo usado em algumas partes. Eu gostaria de poder verificar isso.

Tentei copiar e colar do meu navegador no Word, mas ele não está preservando a fonte.

Existe alguma maneira de determinar qual fonte está realmente sendo usada para uma seção de texto?

O Firebug me fornecerá a lista de fontes como acima [1], mas não vejo uma maneira de determinar qual delas está sendo usada.

Acontece que a lista errada estava sendo usada, o que resolveu meu problema original de Verdana. Mas ainda estou curioso para saber se há uma maneira de identificar a fonte de renderização real.

css browser fonts

— lavaturtle
fonte

stackoverflow.com/questions/845/detecting-font-in-javascript

— AJM

O FontFinder e o WhatFont descritos nas respostas abaixo ainda são maneiras muito grosseiras de detectar a fonte usada. Ambos indicaram erroneamente "Quanttrocentro Sans" (a fonte principal) quando seleciono um ؋símbolo Aghani que não está disponível nessa fonte.

— Pergunta Overflow

@QuestionOverflow, atualmente o Firefox e o Chrome possuem ferramentas internas para determinar a fonte. Eles vão mostrar a fonte para cada glifo, portanto, vai mostrar o que fonte foi utilizada para que ؋ também.

— Arjan 01/01

@Arjan: esse ainda é o caso em 2020?

— devorado elysium

@devouredelysium, você viu minha resposta ? Basta selecionar um único glifo para ver qual fonte é usada.

— Arjan

50

De acordo com a resposta de Wilfred Hughes , o Firefox agora suporta isso nativamente. Este artigo tem mais detalhes .

A resposta original referenciou o plug-in "Font Finder", mas apenas porque era de 4 anos atrás. O fato de respostas antigas permanecerem assim e a comunidade não poder atualizá-las é uma das poucas falhas restantes do Stack Overflow.

— Jeremy Kauffman
fonte

7

Não há razão para usar isso agora que as Ferramentas do Firefox> Desenvolvedor da Web> Inspetor> Fontes informam (resposta de Wilfred Hughes)

— skierpage 30/10/2013

1

Infelizmente, o Firefox 47 já não tem o guia Fontes referenciados neste blog ligado a você: Este artigo tem mais detalhes

— Zabba

3

"A partir do Firefox 47, a exibição de fontes é desativada por padrão. Estamos trabalhando em uma substituição com mais recursos. Por enquanto, se você quiser ver a exibição de fontes, visite about: config, encontre as devtools de preferência. fontinspector.enabled e defina-o como true. " Consulte developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/… .

— 18730 Daniel Daniel Le

1

Aparentemente, a configuração devtools.fontinspector.enabledera necessária apenas no Firefox 47: " Somente no Firefox 47 , a visualização de fontes é desativada por padrão. Se você deseja ver a visualização de fontes no Firefox 47, visite about:config, encontre a preferência devtools.fontinspector.enablede defina-a true. Antes e depois Firefox 47, a exibição de fontes está ativada por padrão ". , @Danielle.

— Arjan

1

@DanielLe, é claro que eu entendi que era correto no momento em que copiou o texto :-)

— Arjan

151

Atualmente, o Chrome e o Firefox possuem ferramentas integradas para isso, mas o Safari precisa que você copie algum texto e investigue isso.

Primeiro, selecione algum texto. No Firefox, o Inspetor de páginas possui uma exibição de fontes :

Isso também informa se as fontes foram baixadas e qual estilo é usado, como Regular, ExtraLight, Italic, BoldItalic e tudo.

Para o Chrome, acesse "Elementos" do DevTools, vá para a guia "Computado" e role até a seção "Fontes renderizadas". Ao contrário do Firefox, isso mostra apenas o nome da fonte base, e não qualquer estilo específico que esteja usando:

As capturas de tela acima mostram que várias fontes podem ser exibidas para texto Unicode. O Chrome informa que 6 glifos ("Pekka" e o espaço) estão usando "Arial" e um ("웃") está usando "Apple SD Gothic Neo":

Arial - Arquivo local (6 glifos)
Apple SD Gothic Neo - Arquivo local (1 glifo)

O CSS real define:

font-family: Arial,"Helvetica Neue",Helvetica,sans-serif

Mas essas fontes geralmente não incluem muitos caracteres especiais. Como as informações da fonte funcionam por elemento HTML, onde o texto Unicode em um elemento pode realmente usar várias fontes, ele também mostra várias fontes. Em caso de dúvida, clique duas vezes no texto no painel HTML e livre-se do texto em que não está interessado. Ao selecionar o elemento circundante novamente, você verá apenas uma opção. Nesse caso, você diria que os dois navegadores usaram "Apple SD Gothic Neo Regular" para o caractere "웃".

Infelizmente, navegadores diferentes (e até versões diferentes de um único navegador) na mesma máquina podem usar fontes diferentes, devido aos tipos de fonte suportados / preferidos por um navegador. Em um Mac, por exemplo, o Safari pode preferir a Apple Advanced Technology, enquanto o Firefox suporta o Microsoft OpenType (que pode gerar problemas para o árabe após a instalação do Microsoft Office em um Mac). Ou para o caractere "웃" nas capturas de tela acima, o Chrome e o Firefox no meu Mac atualmente preferem o "Apple SD Gothic Neo" (que é o OpenType PostScript), mas as versões mais antigas do Firefox usavam o "AppleGothic Regular" (que é uma fonte TrueType) .

Para navegadores que não têm uma exibição de fontes semelhantes, simplesmente copie e cole um fragmento do texto em algum processador de texto ou editor Rich Text, selecione um texto específico e veja qual nome aparece em alguma lista suspensa de fontes. No meu Mac, isso não funciona ao colar no Firefox (onde "Apple SD Gothic Neo" do Firefox é convertido em "AppleMyungjo" no colar), mas funciona bem para o Safari e o Chrome:

— Arjan
fonte

1

Você sabe se o Safari tem um plugin ou algo para isso?

— Andry

4

No Chrome 47, role para a parte inferior da seção Computado. A expansão do font-familyatributo como ele aparece (em ordem alfabética) não exibirá qual fonte está sendo carregada. Esta informação aparece na parte inferior.

— Merchako

1

@ Merchako, o que acontece quando sua fonte computada é uma fonte genérica como "serif" e "sans-serif"? Então, como você obtém a fonte real ?

— Pacerier

2

@Pacerier, no Chrome, basta rolar para baixo na guia Computado; no Firefox, veja a guia separada.

— Arjan #

1

@TMG, eu poderia imaginar que as fontes da web podem não precisar de um alias, mas podem se referir a algum URL diretamente. É um site público que podemos olhar? Caso contrário, o que o Firefox mostra?

— Arjan

32

O Firefox 22+ mostra qual fonte está em uso no momento , sem extensões.

— Wilfred Hughes
fonte

1

Agora, essa deve realmente ser a resposta definitiva. Não há necessidade de instalar uma extensão.

— Dan Eastwell

mas um navegador que alguém provavelmente não usa. Uma extensão é bem mais leve nesse sentido.

— b1nary

30

O WhatFont é uma extensão do Chrome que informará especificamente qual fonte na pilha de fontes está sendo carregada.

— user1100745
fonte

6

Para mim, diz qual fonte é declarada, mas não qual fonte é realmente usada.

— panzi

3

De acordo com este artigo ( updates.html5rocks.com/2013/09/… ), o Dev Tools agora pode dizer qual é a fonte real renderizada.

— yorch 23/01

WhatFont tentativas para detectar a fonte prestados, mas parece não fazê-lo com sucesso github.com/chengyin/WhatFont-Bookmarklet/issues/13

— Chris Marisic

7

Para as versões atuais do Firefox (desde a v7), há um complemento chamado "fontinfo" que relatará a fonte real que está sendo usada (em vez do que diz a propriedade da família de fontes CSS), levando em consideração os casos em que o navegador volta para uma fonte diferente porque a família de fontes solicitada não estava disponível ou não suportava os caracteres usados no texto.

— Jonathan
fonte

Até agora, esta é a melhor resposta

— Ingo Kegel

1

Você pode tentar verificar essa seção específica com o Firebug for Firefox. Deve fornecer todas as propriedades exatas.

— jeroen
fonte

Isso ainda me dá a lista, não a específica que está usando ... Mas, em uma segunda verificação, Verdana de alguma forma entrou na lista de famílias de fontes, que seria a causa do meu problema original. Então obrigado.

— Lavaturtle 19/05/09

1

O Firebug também informa quais regras estão disparando para fornecer ao elemento essa fonte - muito útil para descobrir onde seu CSS está errado.

— 196 RichieHindle

Safari 4 Beta tem um WebInspector, também (poderia ser um firebug pele)

— vikingosegundo

1

Eu acho que você sempre terá a lista completa, qualquer que seja a ferramenta que use. A fonte usada é a primeira na lista instalada no seu computador.

— jeroen

2

O Firebug atualmente (1.11.4, talvez também anterior) destaca a fonte atual em azul.

— usar o seguinte

1

O plugin "FontFinder" mencionado por jeremy parece não funcionar aqui, fornecendo a primeira fonte da lista CSS, independentemente da fonte realmente renderizada (Firefox 4.0rc1 no Linux). O plugin a seguir, no entanto, fornece a fonte "correta", ao que parece.

Fonte de Contexto

— Dave Vogt
fonte

Infelizmente, até a Context Font mostra apenas a família CSS calculada, que pode ser serif ou sans-serif, por exemplo. Além disso, se algum caractere não estiver presente na fonte computada e o navegador o buscar em uma fonte diferente, a Fonte de Contexto ainda mostrará a família da fonte computada, não a fonte real.

— Jukka K. Korpela

0

Com base na abordagem e script de medição de texto de Lalit Patel, criei bookmarklets que podem adivinhar a fonte que está sendo usada para o texto atualmente selecionado (ou o body, se nada estiver selecionado). Parece-me funcionar muito bem para descobrir qual fonte de uma pilha é usada! ( sans-serifPorém, não é possível dizer o que realmente mapeia).

Agarre-os aqui: https://alanhogan.com/bookmarklets#font-stack-full

A fonte está no GitHub .

Veja também: este CodePen , que usa principalmente o mesmo código. Experimente experimentar os parágrafos diferentes selecionados e observe a tabela / atualização de suposições!

— Alan H.
fonte