Como detectar qual fonte definida foi usada em uma página web?

Question

Suponha que eu tenha a seguinte regra CSS em minha página:

body {
    font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}

Como posso detectar qual das fontes definidas foi usada no navegador do usuário?

Edite para pessoas que estão se perguntando por que quero fazer isso: A fonte que estou detectando contém glifos que não estão disponíveis em outras fontes e quando o usuário não possui a fonte, desejo exibir um link solicitando ao usuário que baixe essa fonte para que possa usar meu aplicativo da web com a fonte correta.

Atualmente estou exibindo o link de download da fonte para todos os usuários, quero exibi-lo apenas para pessoas que não possuem a fonte correta instalada.

Answer 1

Eu já vi isso ser feito de uma maneira meio duvidosa, mas bastante confiável.Basicamente, um elemento é definido para usar uma fonte específica e uma string é definida para esse elemento.Se a fonte definida para o elemento não existir, ela usará a fonte do elemento pai.Então, o que eles fazem é medir a largura da string renderizada.Se corresponder ao que eles esperavam para a fonte desejada, em oposição à fonte derivada, ela estará presente.Isso não funcionará para fontes monoespaçadas.

Aqui está de onde veio:Detector de fontes Javascript/CSS (ajaxian.com;12 de março de 2007)

Answer 2

Eu escrevi uma ferramenta JavaScript simples que você pode usar para verificar se uma fonte está instalada ou não.
Ele usa uma técnica simples e deve estar correto na maioria das vezes.

Verificador jFont no github

Answer 3

@pat Na verdade, o Safari não fornece a fonte usada; em vez disso, o Safari sempre retorna a primeira fonte da pilha, independentemente de estar instalada, pelo menos na minha experiência.

font-family: "my fake font", helvetica, san-serif;

Supondo que Helvetica seja o instalado/usado, você obterá:

• "minha fonte falsa" no Safari (e acredito em outros navegadores de webkit).
• "minha fonte falsa, helvetica, san-serif" nos navegadores Gecko e IE.
• "Helvetica" na Opera 9, embora eu leia que eles estão mudando isso na Opera 10 para combinar com Gecko.

Eu passei por esse problema e criei Desempilhamento de fontes, que testa cada fonte em uma pilha e retorna apenas a primeira instalada.Ele usa o truque mencionado pelo @MojoFilter, mas só retorna o primeiro se vários estiverem instalados.Embora sofra da fraqueza mencionada por @tlrobinson (o Windows substituirá Arial por Helvetica silenciosamente e informará que o Helvetica está instalado), por outro lado, funciona bem.

Answer 4

Um formulário simplificado é:

function getFont() {
    return document.getElementById('header').style.font;
}

Se precisar de algo mais completo, confira esse fora.

Answer 5

Uma técnica que funciona é observar o estilo computado do elemento.Isso é compatível com Opera e Firefox (e reconheço no Safari, mas não testei).O IE (pelo menos 7) fornece um método para obter um estilo, mas parece ser o que estava na folha de estilo, não o estilo computado.Mais detalhes sobre o modo quirks: Obter estilos

Aqui está uma função simples para obter a fonte usada em um elemento:

/**
 * Get the font used for a given element
 * @argument {HTMLElement} the element to check font for
 * @returns {string} The name of the used font or null if font could not be detected
 */
function getFontForElement(ele) {
    if (ele.currentStyle) { // sort of, but not really, works in IE
        return ele.currentStyle["fontFamily"];
    } else if (document.defaultView) { // works in Opera and FF
        return document.defaultView.getComputedStyle(ele,null).getPropertyValue("font-family");
    } else {
        return null;
    }
}

Se a regra CSS para isso fosse:

#fonttester {
    font-family: sans-serif, arial, helvetica;
}

Em seguida, deverá retornar helvetica se estiver instalada, caso contrário, arial e, por último, o nome da fonte sans-serif padrão do sistema.Observe que a ordem das fontes na sua declaração CSS é significativa.

Um truque interessante que você também pode tentar é criar muitos elementos ocultos com muitas fontes diferentes para tentar detectar quais fontes estão instaladas em uma máquina.Tenho certeza de que alguém poderia criar uma página bacana de coleta de estatísticas de fontes com essa técnica.

Answer 6

Outra solução seria instalar a fonte automaticamente via @font-face o que pode negar a necessidade de detecção.

@font-face { 
font-family: "Calibri"; 
src: url("http://www.yourwebsite.com/fonts/Calibri.eot"); 
src: local("Calibri"), url("http://www.yourwebsite.com/fonts/Calibri.ttf") format("truetype");
}

É claro que isso não resolveria nenhum problema de direitos autorais, mas você sempre pode usar uma fonte freeware ou até mesmo criar sua própria fonte.Você vai precisar de ambos .eot & .ttf arquivos para funcionar melhor.

Answer 7

Existe uma solução simples - basta usar element.style.font:

function getUserBrowsersFont() {
    var browserHeader = document.getElementById('header');
    return browserHeader.style.font;
}

Esta função fará exatamente o que você deseja.Na execução retornará o tipo de fonte do usuário/navegador.Espero que isso ajude.

Answer 8

Calibri é uma fonte de propriedade da Microsoft e não deve ser distribuída gratuitamente.Além disso, exigir que o usuário baixe uma fonte específica não é muito fácil de usar.

Eu sugeriria comprar uma licença para a fonte e incorporá-la ao seu aplicativo.

Answer 9

Estou usando o Fonte.Basta arrastar o botão Fonte para a barra de favoritos, clicar nele e depois clicar em um texto específico do site.Em seguida, mostrará a fonte desse texto.

https://fount.artequalswork.com/

Answer 10

Você pode usar este site:

http://website-font-analyzer.com/

Faz exatamente o que você quer...

Answer 11

Você pode colocar Adobe em branco na família de fontes após a fonte que você deseja ver e quaisquer glifos que não estejam nessa fonte não serão renderizados.

por exemplo.:

font-family: Arial, 'Adobe Blank';

Até onde sei, não existe um método JS para saber quais glifos em um elemento estão sendo renderizados por qual fonte na pilha de fontes desse elemento.

Isso é complicado pelo fato de que os navegadores têm configurações de usuário para fontes serif/sans-serif/monospace e também têm suas próprias fontes substitutas codificadas que usarão se um glifo não for encontrado em nenhuma das fontes em um pilha de fontes. Portanto, o navegador pode renderizar alguns glifos em uma fonte que não está na pilha de fontes ou na configuração de fonte do navegador do usuário. As Ferramentas de Desenvolvimento do Chrome mostrarão cada fonte renderizada para os glifos no elemento selecionado.Portanto, na sua máquina você pode ver o que está fazendo, mas não há como saber o que está acontecendo na máquina do usuário.

Também é possível que o sistema do usuário desempenhe um papel nisso, como, por exemplo. Janela faz substituição de fonte no nível do glifo.

então...

Para os glifos de seu interesse, você não tem como saber se eles serão renderizados pelo substituto do navegador/sistema do usuário, mesmo que não tenham a fonte especificada.

Se quiser testá-lo em JS, você pode renderizar glifos individuais com uma família de fontes incluindo Adobe Blank e medir sua largura para ver se é zero, MAS você teria que iterar cada glifo e cada fonte que você queria testar, mas embora você possa conhecer as fontes em uma pilha de fontes de elementos, não há como saber quais fontes o navegador do usuário está configurado para usar, portanto, para pelo menos alguns de seus usuários, a lista de fontes pelas quais você itera estará incompleta.(Também não é uma prova futura se novas fontes forem lançadas e começarem a ser usadas.)