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.
؋símbolo Aghani que não está disponível nessa fonte.Respostas:
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.
fonte
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, visiteabout:config, encontre a preferênciadevtools.fontinspector.enablede defina-atrue. Antes e depois Firefox 47, a exibição de fontes está ativada por padrão ". , @Danielle.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":
O CSS real define:
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:
fonte
font-familyatributo como ele aparece (em ordem alfabética) não exibirá qual fonte está sendo carregada. Esta informação aparece na parte inferior.O Firefox 22+ mostra qual fonte está em uso no momento , sem extensões.
fonte
O WhatFont é uma extensão do Chrome que informará especificamente qual fonte na pilha de fontes está sendo carregada.
fonte
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.
fonte
Você pode tentar verificar essa seção específica com o Firebug for Firefox. Deve fornecer todas as propriedades exatas.
fonte
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
fonte
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!
fonte