Como posso determinar qual fonte de um navegador está realmente usando a prestar algum texto?

votos
137

Meu CSS especifica font-family: Helvetica, Arial, sans-serif; para toda a página. Parece que Verdana está sendo usado em vez disso, algumas partes. Eu gostaria de ser capaz de verificar isso.

Eu tentei copiar e colar de meu navegador para o Word, mas não é preservar a fonte.

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

Firebug vai me dar a lista de fontes como acima [1], mas eu não vejo uma maneira de determinar qual das fontes está sendo usado.

  1. Acontece que a lista errada estava sendo usado, o que resolveu o meu problema original Verdana. Mas eu ainda estou curioso para saber se há uma maneira de identificar a fonte real de renderização.
Publicado 19/05/2009 em 18:53
fonte usuário
Em outras línguas...                            


8 respostas

votos
104

Hoje em dia Chrome e Firefox têm ferramentas embutidas para isso, mas Safari precisa de você copiar algum texto e investigar isso.

No Firefox, o Inspector página tem uma vista Fontes :

Firefox Fontes Ver

Isso também irá lhe dizer se as fontes foram baixadas.

Para Chrome, vá em DevTools 'Elementos', vá para o seu guia 'computadorizada', e percorrer todo o caminho até a seção chamada 'Fontes prestados':

inspetor web Chrome

As imagens acima mostram que várias fontes pode ser mostrado para o texto Unicode. Chrome diz-lhe 6 glyphes ( "Pekka" eo espaço) estão usando "Arial", e um ( "웃") está usando "Apple SD gótico Neo":

Arial arquivo Local (6 glifos) -
A Apple SD gótico Neo - arquivo local (1 glifo)

O CSS real define:

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

Mas essas fontes muitas vezes não incluem muitos caracteres especiais. Como as informações de fonte funciona por elemento HTML, em que o texto Unicode em um elemento poderia realmente usar várias fontes, ele mostra várias fontes também. Em caso de dúvida, basta dar um duplo clique sobre o texto no painel de HTML e livrar-se do texto que você não está interessado. Então, ao selecionar o elemento em torno de novo, você só vai ver uma opção. Neste caso, seria dizer-lhe que ambos os navegadores usados ​​"Apple SD gótico Neo regulares" para o personagem "웃".

Infelizmente, navegadores diferentes (e até mesmo versões diferentes de um único navegador) na mesma máquina pode usar fontes diferentes, devido aos tipos de fontes suportados / preferenciais por um browser. Em um Mac, por exemplo, Safari pode preferir a Apple Advanced Technology enquanto o Firefox suporta Microsoft OpenType (que pode produzir problemas para árabe após a instalação do Microsoft Office em um Mac). Ou para o personagem "웃" nas imagens acima, Chrome e Firefox no meu Mac hoje em dia preferem "Apple SD gótico Neo" (que é OpenType PostScript), mas versões mais antigas do Firefox usado "AppleGothic Regular" em vez (que é uma fonte TrueType) .

Para navegadores que não têm uma fontes semelhantes vista, simplesmente copiar & colar um fragmento do texto em algum processador de texto ou editor de Rich Text, selecione algum texto específico, e ver qual nome aparece em alguns lista de fontes suspensa. No meu Mac, isso não funciona quando colar do Firefox (onde por "웃" do Firefox "Apple SD gótico Neo" é convertido em "AppleMyungjo" na colagem), mas funciona bem para Safari e Chrome:

O texto colado do navegador em editor de texto rico

Respondeu 29/12/2013 em 22:34
fonte usuário

votos
41

Per resposta Wilfred Hughes , o Firefox agora suporta isso nativamente. Este artigo tem mais detalhes .

Este original resposta referenciado o plugin "Font Finder", mas apenas porque foi a partir de 4 anos atrás. O fato de que velhas respostas permanecem como este e a comunidade não pode atualizá-los é uma das poucas falhas remanescentes de estouro de pilha.

Respondeu 15/07/2010 em 20:02
fonte usuário

Respondeu 28/05/2013 em 15:11
fonte usuário

votos
29

WhatFont é uma extensão do Chrome que irá dizer-lhe especificamente que tipo de letra na pilha da fonte está sendo carregado.

Respondeu 15/12/2011 em 22:02
fonte usuário

votos
6

Para as versões atuais do Firefox (desde v7), há um add-on chamado "fontinfo", que irá relatar a fonte real que está sendo usado (em vez do que o CSS propriedade font-family diz), tendo em conta os casos em que o navegador cai de volta para uma fonte diferente, pois o font-family solicitado não estava disponível ou não suportar os caracteres utilizados no texto.

Respondeu 25/02/2012 em 19:42
fonte usuário

votos
1

O plug-in "FontFinder" mencionado por Jeremy parece não funcionar aqui, dando a primeira fonte da lista CSS, independentemente da fonte efetivamente prestados (Firefox 4.0rc1 no Linux). O seguinte plug-in no entanto dá-lhe a fonte "correta", parece.

Fonte contexto

Respondeu 14/03/2011 em 14:20
fonte usuário

votos
1

Você poderia tentar verificar essa seção específica com o Firebug para o Firefox. Deve dar-lhe todas as propriedades exatas.

Respondeu 19/05/2009 em 18:55
fonte usuário

votos
0

Com base na abordagem de medição de texto e roteiro de Lalit Patel, eu criei bookmarklets que podem adivinhar a fonte que está sendo usada para o texto selecionado no momento (ou a body, se nada for selecionado). Parece que funciona muito bem para mim para descobrir que tipo de letra em uma pilha é usado! (Não posso dizer o que sans-serifrealmente mapeia para, no entanto.)

Agarrá-los aqui: https://alanhogan.com/bookmarklets#font-stack-full

A fonte é no GitHub .

Veja também: este CodePen , que utiliza basicamente o mesmo código. Experimentá-lo por diferentes parágrafos e observando a atualização da tabela / palpite selecionados!

Respondeu 30/03/2017 em 00:58
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more