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




w3schools letras (9)

Uma técnica que funciona é observar o estilo computado do elemento. Isso é suportado no Opera e no Firefox (e eu recono no safari, mas não testei). IE (7 pelo menos), fornece um método para obter um estilo, mas parece ser o que quer que esteja na folha de estilo, não o estilo computado. Mais detalhes sobre o quirksmode: 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 de CSS para isso foi:

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

Em seguida, ele deve retornar helvetica se estiver instalado, se não, arial e, por último, o nome da fonte sans-serif padrão do sistema. Note que a ordenação de fontes na sua declaração CSS é significativa.

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

Suponha que eu tenha a seguinte regra de 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 perguntando por que eu 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 tem a fonte que eu quero exibir um link pedindo ao usuário para baixar essa fonte para que eles 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 exibir apenas isso para pessoas que não têm a fonte correta instalada.


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

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

Supondo que o Helvetica é aquele instalado / usado, você terá:

  • "minha fonte falsa" no Safari (e acredito em outros navegadores webkit).
  • "minha fonte falsa, helvetica, 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 peguei um passe nesse problema e criei o Font Unstack , que testa cada fonte em uma pilha e retorna o primeiro instalado apenas. Ele usa o truque que o @MojoFilter menciona, mas só retorna o primeiro caso múltiplos estejam instalados. Embora sofra da fraqueza que @tlobinson menciona (o Windows substituirá o Arial for Helvetica silenciosamente e informará que o Helvetica está instalado), caso contrário funcionará bem.


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

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

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



Eu vi isso 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 assumirá 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, ao contrário da fonte derivada, ela está presente. Isso não funcionará para fontes monoespaçadas.

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


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 comprar uma licença para a fonte e incorporá-la ao seu aplicativo.


Eu estou usando o Fount. Basta arrastar o botão Fount para a barra de favoritos, clicar nele e clicar em um texto específico no site. Em seguida, mostrará a fonte desse texto.

https://fount.artequalswork.com/


Eu escrevi uma ferramenta JavaScript simples que você pode usá-lo para verificar se uma fonte está instalada ou não.
Ele usa uma técnica simples e deve estar correto na maior parte do tempo.

jFont Checker no github


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

por exemplo:

font-family: Arial, 'Adobe Blank';

Tanto quanto sei, não há nenhum método JS para dizer quais glifos em um elemento estão sendo processados ​​por qual fonte na pilha de fontes para esse 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 codificadas de fall-back 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 esteja na pilha de fontes ou na configuração de fonte do navegador do usuário. O Chrome Dev Tools mostrará a você cada fonte renderizada para os glifos no elemento selecionado . Então, na sua máquina, você pode ver o que está fazendo, mas não há como saber o que está acontecendo na máquina de um usuário.

Também é possível que o sistema do usuário possa desempenhar um papel nisso, como, por exemplo, Window faz a substituição da fonte no nível do glifo.

assim...

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

Se você quiser testá-lo no JS, poderá renderizar glifos individuais com uma família de fontes, incluindo o Adobe Blank, e medir a largura deles para ver se é zero, mas é necessário iterar detalhadamente 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, pelo menos para alguns de seus usuários, a lista de fontes que serão iteradas estará incompleta. (Também não é uma prova futura se novas fontes saírem e começarem a ser usadas.)







fonts