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

Suponha que eu tenha a seguinte regra CSS na 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 as pessoas que se perguntam 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 tiver a fonte, desejo exibir um link solicitando que o usuário faça o download dessa fonte para que pode usar meu aplicativo da web com a fonte correta.

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

Eu já vi isso de uma maneira duvidosa, mas bastante confiável. Basicamente, um elemento é configurado para usar uma fonte específica e uma string é definida para esse elemento. Se a fonte definida para o elemento não existir, será usada 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.

De onde veio: Javascript / CSS Font Detector (ajaxian.com; 12 de março de 2007)

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 correta na maioria das vezes.

Verificador de jFont no github

@pat Na verdade, o Safari não fornece a fonte usada, o Safari sempre retorna a primeira fonte na 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 que outros navegadores de webkit).
• "minha fonte falsa, helvética, san-serif" nos navegadores Gecko e IE.
• "helvetica" no Opera 9, embora eu tenha lido que eles estão mudando isso no Opera 10 para combinar com o Gecko.

Eu resolvi esse problema e criei o Font Unstack , que testa cada fonte em uma pilha e retorna apenas a primeira instalada. Ele usa o truque mencionado pelo @MojoFilter, mas somente retorna o primeiro se vários estiverem instalados. Embora ele sofra da fraqueza mencionada pelo @tlrobinson (o Windows substitui o Helvetica por Arial silenciosamente e informa que o Helvetica está instalado), ele funciona bem.

Uma técnica que funciona é observar o estilo calculado do elemento. Isso é suportado no Opera e no Firefox (e eu 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 calculado. Mais detalhes sobre o modo quirks: obter estilos

Aqui está uma função simples para pegar 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, ele deve retornar helvética, se estiver instalado, 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 de coleta de estatísticas de fontes bacana com essa técnica.

Um formulário simplificado é:

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

Se você precisar de algo mais completo, verifique isso .

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. Em execução Retornará o tipo de fonte do usuário / navegador. Espero que isso ajude.

Outra solução seria instalar a fonte automaticamente, o @font-faceque 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, no entanto, você sempre pode usar uma fonte de freeware ou até criar sua própria fonte. Você precisará dos arquivos .eot& .ttfpara funcionar melhor.

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

Sugiro que você compre uma licença para a fonte e a incorpore ao seu aplicativo.

Estou usando o Fount. Você só precisa arrastar o botão Fonte para sua barra de favoritos, clicar nele e, em seguida, clicar em um texto específico no site. Ele mostrará a fonte desse texto.

https://fount.artequalswork.com/

Você pode usar este site:

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

Faz exatamente o que você quer ...

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

por exemplo:

font-family: Arial, 'Adobe Blank';

Tanto quanto sei, não existe um método JS para dizer quais glifos em um elemento estão sendo renderizados por qual fonte na pilha de fontes para esse elemento.

Isso é complicado pelo fato de os navegadores terem configurações de usuário para fontes serif / sans-serif / monospace e também terem suas próprias fontes de fallback back codificadas que serão usadas se um glifo não for encontrado em nenhuma das fontes de uma fonte. 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 possa desempenhar um papel nisso, como por exemplo, a Janela substitui a fonte no nível de glifo.

tão...

Para os glifos nos quais você está interessado, não há como saber se eles serão renderizados pelo navegador / sistema substituto do usuário, mesmo se eles não tiverem a fonte especificada.

Se você quiser testá-lo em JS, poderá renderizar glifos individuais com uma família de fontes, incluindo o Adobe Blank e medir sua largura para ver se é zero, mas você precisará iterar completamente cada glifo e cada fonte que deseja 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 é à prova do futuro se novas fontes surgirem e começarem a ser usadas.)