Se eu tenho apenas WOFF e EOT, que navegadores eu estou suportando com @ font-face?

Estamos pensando em comprar uma fonte que só permita seu uso na web nos formatos fornecidos: WOFF e EOT.

Não sei em que navegadores eles trabalham e não conseguem encontrar informações atualizadas. Quais navegadores posso suportar apenas com esses dois?

Minha única experiência é com a sintaxe do fontspring, que possui EOT, WOFF, TTF e SVG.

fonts standards css3

— erik
fonte

Pergunta relacionada no site de Design gráfico: Qual é o menor conjunto de formatos de fonte da Web que abrange todos os navegadores?

— usar o seguinte comando

Respostas:

Esta é a maneira padrão de carregar com @ font-face , correções de hackers e tudo!

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('BebasNeue-webfont.eot');
    src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('BebasNeue-webfont.woff') format('woff'),
         url('BebasNeue-webfont.ttf') format('truetype'),
         url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Mas remova o SVG e você perderá o suporte para iOS <5.0 quase completamente

Can I Use tem uma excelente tabela para suporte ao navegador, geralmente outra para EOT , outra para WOFF , outra para SVG e, finalmente, mais uma para TTF . Eu os inseri abaixo para maior clareza, e isso deve orientá-lo sobre o que testar, mas lembre-se de que isso mudará rapidamente.

Editar por wyu : compilei uma tabela para que você possa ver o suporte lado a lado

suporte ao navegador @ font-face geralmente

suporte ao navegador @ font-face geralmente

Suporte ao navegador EOT

Suporte ao navegador EOT

Suporte ao navegador WOFF

Suporte ao navegador WOFF

Suporte ao navegador SVG

Suporte ao navegador SVG

Suporte ao navegador TTF

Suporte ao navegador TTF

— toomanyairmiles
fonte

Por que o eot é declarado de duas maneiras diferentes - .eot e .eot? #iefix?

— sam

@sam stackoverflow.com/questions/8050640/…

— Diego Agulló

Para quem verifica esta resposta no futuro ... Android> = 4.4 suporta agora WOFF caniuse.com/#feat=woff

— ozke

Caro @ozke, sou do futuro, obrigado por compartilhar esse fato útil. Você também pode estar interessado em saber que, até o final de 2015, o uso de versões do navegador de ações Android que não suportam woffcairá para menos de 2% dos usuários globais, e o navegador de ações Android será ofuscado pelo Chrome para Android (16%) e UC (8%), ambos compatíveis woff. Firefox para Android também; no entanto, seu uso nunca excederá 1%. Agora você pode voltar a ouvir "All About That Bass", de Meghan Trainor, que eu entendo era habitual em outubro de 2014.

— user56reinstatemonica8

então você só precisa de fontes da web agora?

— SuperUberDuper

O SVG não o levará a lugar nenhum com @ font-face; mas, o EOT é suportado pelo IE; onde, TTF e OTF são suportados por todos os outros principais navegadores. Quanto ao WOFF, ao ler um pouco, com sua semelhança com TTF e OTF, é bem provável que seja suportado nos mesmos navegadores que TTF ou OTF. Minha sugestão, se você estiver realmente interessado, experimente cada extensão @ font-face em um navegador e veja o que obtém e envie o W3C para que eles atualizem sua página de padrões para o descritor @ font-face. (Ele nem inclui extensões de fonte "seguras" atualmente).

Se tudo mais falhar, tenho certeza de que o W3Schools está atualizado: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

— Jeff Langemeier
fonte

O problema é que o Safari Mobile 4.1 e abaixo são compatíveis apenas com SVG.

— toomanyairmiles

@toomanyairmiles É por isso que, no final, faz com que pareça bom para o seu "padrão" e, em seguida, pareça incrível para aqueles que "podem" visualizá-lo. Não é possível ter 100% de cobertura, pois a maioria das fontes não possui OTF, EOT e SVG.

— Jeff Langemeier

Na verdade você pode. Criei vários sites com 100% de cobertura comprando fontes dos quatro tipos ou usando fontes gratuitas e gerando os arquivos por mim mesmo - funciona perfeitamente.

— toomanyairmiles

@toomanyairmiles É aqui que a digitação rápida e solta me mata, necessário Nem sempre pode ter 100% de cobertura, às vezes isso não acontece e o designer precisa se lembrar de que, na pior das hipóteses, as pessoas estão usando navegadores antigos e outras coisas, 100 % de cobertura nem sempre significa 100% de cobertura; onde estou com cerca de 40-50% dos usuários da Internet ainda usando o IE 7 ou mais antigo, que não suportam muito bem o tipo de fonte, para ter uma cobertura 100% verdadeira, é necessário que haja um resultado final que parece "decente" ou, pelo menos, mantém seu site dentro das restrições das fontes "mais sofisticadas".

— 21412 Jeff Jeffemeier

Bem, eu tentei, em sites pequenos e de grandes marcas. As fontes funcionam no IE6 e 7: a qualidade de renderização é tão boa quanto um navegador moderno? Não, mas funciona muito bem.

— toomanyairmiles

Os fornecedores de Webfont realmente precisam fornecer suporte imediato para suas fontes - especificamente por causa disso! Você pensaria que isso seria uma segunda natureza, mesmo para a nuvem (com opção de incluir ou excluir) - se as pessoas forem forçadas a caçar fontes na lista negra, isso não incentivará a pirataria apenas quando as fontes forem encontradas? @ eb_p1

— eburnett
fonte

Espera por que O EOT estava morto quando esta pergunta foi feita pela primeira vez, era um cadáver apodrecido quando você respondeu e hoje não vejo uma fonte do EOT há mais de um ano.

— precisa