¿Por qué deberíamos incluir ttf, eot, woff, svg, … en una fuente de cara?

En CSS3 font-face , hay varios tipos de fuente incluidos como ttf , eot , woff , svg y cff .

¿Por qué deberíamos usar todos estos tipos?

Si son especiales para diferentes navegadores, ¿por qué el número de ellos es mayor que el número de los principales navegadores web?

En resumen, font-face es muy antiguo, pero solo recientemente ha sido respaldado por más de IE.

  • eot es necesario para los Exploradores de Internet que son más antiguos que IE9: inventaron la especificación, pero no es un formato horrible que elimine muchas de las características de la fuente.

  • ttf y otf son fonts viejas y normales, pero a algunas personas les molesta que esto signifique que cualquiera pueda descargarlas y usarlas.

  • Aproximadamente al mismo tiempo, iOS en el iPhone y iPad implementó las fonts svg .

  • Luego, se inventó woff , que tiene un modo que impide que las personas pirateen la fuente. Este es el formato preferido.

Si no desea admitir IE 8 y versiones anteriores, iOS 4 y versiones anteriores, android 4.3 o versiones anteriores, solo puede usar WOFF (y WOFF2, WOFF más comprimido, para los navegadores más nuevos que lo admitan).

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

El soporte para woff se puede consultar en http://caniuse.com/woff
El soporte para woff2 se puede verificar en http://caniuse.com/woff2

Woff es una forma comprimida (comprimida) de la fuente TrueType – OpenType. Es pequeño y puede entregarse a través de la red como un archivo gráfico. Lo que es más importante, de esta manera, la fuente se conserva por completo, incluidas las tablas de reglas de representación que muy pocas personas se preocupan porque usan solo escritura latina.

Echa un vistazo a [URL muerta eliminada]. La fuente que ves es una web experimental entregada a smartfont (woff) que tiene miles de caracteres combinados que crean formas complejas. El texto subyacente es el simple código latino de Singhala romanizado. (Copie y pegue en el Bloc de notas y vea).

Solo woff puede hacer esto porque nadie tiene esta fuente y sin embargo se ve en cualquier lugar (Mac, Win, Linux e incluso en teléfonos inteligentes por todos los navegadores, excepto por IE. IE no tiene soporte completo para Open Types).

WOFF 2.0, basado en el algoritmo de compresión Brotli y otras mejoras sobre WOFF 1.0 con una reducción de más del 30% en el tamaño del archivo, es compatible con Chrome, Opera y 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/ tiene un ejemplo sobre cómo usarlo.

Básicamente, agrega una url de src al archivo woff2 y especifica el formato woff2. Es importante tener esto antes del formato woff: el navegador usará el primer formato que admita.