javascript - verdana - w3schools letras




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

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 ao usuário que baixe essa fonte para que pode usar meu aplicativo da web com a fonte correta.

No momento, 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.


@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 só retorna o primeiro se vários estiverem instalados. Embora ele sofra da fraqueza mencionada pelo @tlrobinson (o Windows substituirá o Helvetica por Arial silenciosamente e informará que o Helvetica está instalado), ele funciona bem.


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.


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

Verificador de jFont no github


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)


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


Um formulário simplificado é:

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

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


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 do 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 faça parte disso, como por exemplo, a Janela substitui a fonte no nível de glifo.

entã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á render 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.)








fonts