css3 - para - fuentes personalizadas css

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

Question

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?

Answer 1

En resumen, el tipo de letra es muy antiguo, pero solo recientemente ha sido compatible con más de IE.

• eot es necesario para los Internet Explorer que son más antiguos que IE9; inventaron la especificación, pero eot es un formato horrible que elimina gran parte de las características de la fuente.

• ttf y otf son fuentes antiguas normales, pero a algunas personas les molesta que esto signifique que cualquiera podría descargarlas y usarlas.

• Casi al mismo tiempo, iOS en el iPhone y el iPad implementaron fuentes svg .

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

Si no desea admitir IE 8 y versiones inferiores, y iOS 4 y versiones inferiores, y Android 4.3 o versiones anteriores, puede usar WOFF (y WOFF2, una versión WOFF más comprimida, para los navegadores más nuevos que la admiten).

@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 consultar en http://caniuse.com/woff2

Answer 2

WOFF 2.0, basado en el algoritmo de compresión Brotli y otras mejoras sobre WOFF 1.0 que ofrece 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 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.

Answer 3

Woff es una forma comprimida (en zip) de la fuente TrueType - OpenType. Es pequeño y se puede entregar a través de la red como un archivo gráfico. Lo más importante es que, de esta manera, la fuente se conserva completamente, incluida la representación de tablas de reglas que a muy pocas personas les importa porque solo usan el script latino.

Echa un vistazo a [URL muerta eliminado]. La fuente que se ve es una fuente web experimental que incluye miles de caracteres combinados que forman formas complejas. El texto subyacente es el simple código latino de Singhala romanizado. (Copiar y pegar en el Bloc de notas y ver).

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