Por que devemos incluir ttf, eot, woff, svg,… em uma fonte

299

Em CSS3 font-face , existem vários tipos de fonte incluídos como ttf, eot, woff, svge cff.

Por que devemos usar todos esses tipos?

Se eles são especiais para navegadores diferentes, por que o número deles é maior que o número dos principais navegadores da web?

css font-face webfonts

— user16948
fonte

Respostas:

425

Resposta em 2019:

Use apenas WOFF2 ou, se precisar de suporte legado, WOFF. Não use nenhum outro formato

( svge eotsão formatos mortos ttfe otfsão fontes completas do sistema e não devem ser usados para fins da Web)

Resposta original de 2012:

Em resumo, o tipo de fonte é muito antigo, mas apenas recentemente foi suportado por mais do que o IE.

eot é necessário para os Internet Explorer anteriores ao IE9 - eles inventaram as especificações, mas o eot era uma solução proprietária.
ttfe otfsão fontes antigas normais, então algumas pessoas ficaram aborrecidas porque isso significava que qualquer um podia baixar fontes caras de licença gratuitamente.
O tempo passa, o SVG 1.1 adiciona um capítulo "fontes" que explica como modelar uma fonte usando apenas a marcação SVG, e as pessoas começam a usá-la. Mais tempo passa e acontece que eles são absolutamente terríveis em comparação com apenas um formato de fonte normal, e o SVG 2 sabiamente remove o capítulo inteiro novamente.
Em seguida, woffé inventado por pessoas com bastante conhecimento de domínio, o que torna possível hospedar fontes de uma maneira que descarta bits que são extremamente importantes para a instalação do sistema, mas irrelevantes para a Web (deixando as pessoas preocupadas com a pirataria felizes) e permite compactação interna para melhor atender às necessidades da web (deixando usuários e hosts felizes). Este se torna o formato preferido.
2019 edit Alguns anos depois, woff2é redigido e aceito, o que melhora a compactação, levando a arquivos ainda menores, além da capacidade de carregar uma única fonte "em partes" para que uma fonte que suporte 20 scripts possa ser armazenada como "pedaços" "no disco, com os navegadores capazes de carregar a fonte" em partes "automaticamente, conforme necessário, em vez de precisar transferir toda a fonte antecipadamente, melhorando ainda mais a experiência de digitação.

Se você não deseja oferecer suporte ao IE 8 e inferior, e iOS 4 e inferior, e Android 4.3 ou anterior, basta usar o WOFF (e o WOFF2, um WOFF mais altamente compactado, para os navegadores mais recentes).

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

O suporte para woffpode ser verificado em http://caniuse.com/woff O
suporte para woff2pode ser verificado em http://caniuse.com/woff2

— Rich Bradshaw
fonte

O iOS 5 suporta WOFF.

— Rob

woff... tem um modo que impede as pessoas de piratear a fonte ? Como diabos isso pode / funciona?

— Mark Amery

TTF não deve ser mais leve que WOFF. WOFF é uma forma compactada da fonte TrueType - OpenType (ttf e otf).

— toto_tico 23/01

O objetivo do WOFF não é anti-pirataria. O TypeKit diz que "os dois principais benefícios das fontes OpenType / CFF sobre as fontes TrueType são: 1) seu tamanho de arquivo menor e 2) requerem menos informações de dicas para renderizar bem em ambientes que permitem alguma forma de suavização de serrilhado. "

— Michael McGinnis

As ferramentas do @Zelphir dificultam a criação de fontes incorporáveis com esse sinalizador, e seu designer de segunda geração é analfabeto da programação e só pode remover o sinalizador se alguém projetar um aplicativo para Mac com o botão "fonte pirata" brilhante. Além disso, se eles são uma corporação, você pode apresentar acusações legais. Se eles são um cara com um blog, converse com eles, falhando nisso, com o host, etc. - mas lembre-se de que as pessoas que não podem comprar sua fonte não são clientes em potencial de qualquer maneira, então eu diria que publicidade gratuita vale mais do que o incômodo de convencê-los a trocá-lo pela coisa mais próxima do dafont.

— Camilo Martin

Woff é uma forma compactada (zipada) da fonte TrueType - OpenType. É pequeno e pode ser entregue na rede como um arquivo gráfico. Mais importante, dessa maneira, a fonte é preservada completamente, incluindo tabelas de regras de renderização, com as quais poucas pessoas se importam porque usam apenas scripts em latim.

Veja [URL morto removido]. A fonte que você vê é uma web experimental entregue smartfont (woff) que possui milhares de caracteres combinados, criando formas complexas. O texto subjacente é um código latino simples de Singhala romanizado. (Copie e cole no Bloco de notas e consulte).

Somente o woff pode fazer isso porque ninguém tem essa fonte e, no entanto, é vista em qualquer lugar (Mac, Win, Linux e até mesmo em smartphones por todos os navegadores, exceto pelo IE. O IE não tem suporte completo para tipos abertos).

— user2422970
fonte

Não vejo nada de especial nesse site. Se eu copiá-lo em um editor (tem suporte a utf8), ainda vejo apenas o texto normal. O que exatamente isso faz?

— Zelphir Kaltstahl

Dois terços dessa resposta são errados ou irrelevantes. Também esse link está quebrado.

— Yay295

O WOFF 2.0, baseado no algoritmo de compactação Brotli e outras melhorias em relação ao WOFF 1.0, que oferece mais de 30% de redução no tamanho do arquivo, é suportado no Chrome, Opera e Firefox.

http://en.wikipedia.org/wiki/Web_Open_Font_Format http://en.wikipedia.org/wiki/Brotli

http://sth.name/2014/09/03/Speed-up-webfonts/ tem um exemplo de como usá-lo.

Basicamente, você adiciona uma URL src ao arquivo woff2 e especifica o formato woff2. É importante ter isso antes do formato woff: o navegador usará o primeiro formato suportado.

— Jyrki Alakuijala
fonte