Detectando qual fonte foi usado em uma página web

votos
110

Suponha que eu tenho a seguinte regra CSS na minha página:

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

Como posso detectar que uma das fontes definidas foi usado no navegador do usuário?

Editar para pessoas perguntando por que eu quero fazer isso: A fonte estou detectando contém glifos de que não estão disponíveis em outras fontes e quando o usuário não tem a fonte que deseja exibir um link pedindo ao usuário para baixar essa fonte para que eles pode usar a minha aplicação web com a fonte correta.

Atualmente eu estou mostrando o link de download de fonte para todos os usuários, quero apenas para mostrar isso para as pessoas que não têm a fonte correta instalada.

Publicado 03/08/2008 em 22:42
fonte usuário
Em outras línguas...                            


11 respostas

votos
59

Eu já vi isso feito em um tipo de forma duvidosa, mas bastante confiável. Basicamente, um elemento é configurado para usar uma fonte específica e uma string está definido para esse elemento. Se o conjunto de fonte para o elemento não existe, é preciso a fonte do elemento pai. Então, o que eles fazem é medir a largura da cadeia prestados. Se ele corresponde ao que eles esperavam para a fonte desejada em oposição à fonte derivada, ele está presente.

Aqui é onde ele veio: Javascript / CSS Font Detector (ajaxian.com; 12 Mar 2007)

Respondeu 03/08/2008 em 22:51
fonte usuário

votos
27

Eu escrevi uma ferramenta simples JavaScript que você pode usá-lo para verificar se a fonte está instalada ou não.
Ele usa técnica simples e deve ser correta na maioria das vezes.

Checker jFont no github

Respondeu 21/05/2011 em 18:58
fonte usuário

votos
7

@pat Na verdade, o Safari não dá a fonte usada, Safari em vez sempre retorna a primeira fonte na pilha, independentemente de ele está instalado, pelo menos na minha experiência.

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

Assumindo Helvetica é a instalada / utilizada, você terá:

  • "Minha fonte fake" no Safari (e eu acredito que outros navegadores WebKit).
  • "Minha fonte falso, helvética, san-serif" em navegadores Gecko e IE.
  • "Helvetica" no Opera 9, embora eu li que eles estão mudando isso no Opera 10 para coincidir com Gecko.

I teve uma passagem para este problema e criou Font Desempilhar, que testa cada fonte em uma pilha e retorna o primeiro instalado apenas um. Ele usa o truque que @MojoFilter menciona, mas retorna apenas o primeiro se múltiplos estão instalados. Embora ele não sofrem com a fraqueza que @tlrobinson menciona (Windows irá substituir Arial para Helvetica silenciosamente e relatam que Helvetica está instalado), que de outra forma funciona bem.

FontUnstack

Respondeu 20/05/2009 em 11:57
fonte usuário

votos
6

Há uma solução simples

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

esta função irá fazer exatamente o que você quer. Na execução Ele irá retornar o usuário / visitante Tipo Browsers Font. Espero que este irá ajudar

Respondeu 29/11/2011 em 09:40
fonte usuário

votos
6

Uma forma simplificada é:

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

Se você precisar de algo mais completo, verifique este para fora.

Respondeu 23/10/2011 em 14:32
fonte usuário

votos
6

Uma técnica que funciona é olhar para o estilo computadorizada do elemento. Isto é suportado no Opera e Firefox (e eu recon no safari, mas não testei). IE (7 pelo menos), fornece um método para obter um estilo, mas parece ser o que era na folha de estilo, não o estilo computadorizada. Mais detalhes sobre quirksmode: Get Styles

Aqui está uma função simples para agarrar 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 foi:

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

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

Um truque interessante que você também pode tentar é criar lotes de elementos escondidos com muitas fontes diferentes para tentar detectar as fontes que estão instalados em uma máquina. Tenho certeza que alguém poderia fazer uma página coleta estatísticas fonte bacana com esta técnica.

Respondeu 25/08/2008 em 23:16
fonte usuário

votos
5

Outra solução seria instalar a fonte automaticamente via @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 não iria resolver todos os problemas de direitos autorais, no entanto, você pode sempre usar uma fonte freeware ou até mesmo fazer sua própria fonte. Você vai precisar de ambos os .eot& .ttfarquivos para trabalhar melhor.

Respondeu 05/01/2012 em 12:19
fonte usuário

votos
2

Calibri é uma fonte de propriedade da Microsoft, e não deve ser distribuído gratuitamente. Além disso, a necessidade de um usuário a baixar uma fonte específica não é muito user-friendly.

Gostaria de sugerir a compra de uma licença para a fonte e incorporá-lo em sua aplicação.

Respondeu 14/11/2012 em 19:56
fonte usuário

votos
1

Você pode usar este site:

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

Ele faz exatamente o que você quer ...

Respondeu 11/04/2015 em 20:41
fonte usuário

votos
0

Você pode colocar Adobe em branco no font-family após a fonte que deseja ver e, em seguida, qualquer glifos não dessa fonte não será processado.

por exemplo:

font-family: Arial, 'Adobe Blank';

Tanto quanto eu estou ciente não há nenhum método JS dizer qual glifos em um elemento está sendo processado pelo qual tipo de letra na pilha de fonte para esse elemento.

Isso é complicado pelo fato de que os navegadores têm configurações de usuário para fonts / Monovolume / sans-serif serifa e eles também têm suas próprias fontes queda-back hard-coded que eles vão usar se um glifo não é encontrado em qualquer uma das fontes de pilha fonte. Então navegador pode tornar alguns glifos em uma fonte que não esteja na pilha fonte ou configuração de fonte do navegador do usuário. Chrome Dev Tools irá mostrar-lhe cada fonte prestados para os glifos no elemento selecionado . Então, em sua máquina você pode ver o que está fazendo, mas não há nenhuma maneira de dizer o que está acontecendo na máquina do usuário.

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

assim...

Para os glifos que você está interessado, você não tem nenhuma maneira de saber se eles serão processados ​​por fallback navegador / sistema do usuário, mesmo que eles não têm a fonte que você especificar.

Se você quiser testá-lo em JS que você poderia tornar glifos individuais com um font-family incluindo Adobe em branco e medir a sua largura para ver se é zero, mas você teria que iterar minuciosa cada glifo e cada pia batismal que você queria testar , mas, embora você pode saber as fontes em uma pilha de fonte elementos não há nenhuma maneira de saber quais fontes navegador do usuário está configurado para usar assim por pelo menos alguns de seus usuários a lista de fontes que você iterar será incompleta. (É também prova não futuro se novas fontes sair e começar a se acostumar.)

Respondeu 30/11/2017 em 10:58
fonte usuário

votos
0

Eu estou usando Fount. Você apenas tem que arrastar o botão Fount para sua barra de favoritos, clique sobre ele e, em seguida, clicar em um texto específico no site. Ela irá então mostrar a fonte desse texto.

https://fount.artequalswork.com/

Respondeu 13/03/2017 em 04:31
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more