Por qué deberíamos incluir ttf, eot, woff, svg, sv en una fuente-cara

{[6] {} En[7]}CSS3 font-face, hay varios tipos de fuentes, incluido 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?

Author: Trix, 2012-06-12
Source

3 answers

En resumen, font-face es muy antiguo, pero solo recientemente ha sido soportado 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 eot es un formato horrible que elimina gran parte de las características de la fuente.

  • ttf y otf son fuentes antiguas normales, pero algunas personas se molestaron porque esto significaba que cualquiera podía descargarlas y usarlas.

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

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

Si usted no quiere apoyar IE 8 y más bajo, y iOS 4 y más bajo, y Android 4.3 o anterior, entonces usted puede utilizar WOFF (y WOFF2, un WOFF más altamente comprimido, para los navegadores más nuevos que lo soportan.)

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

Soporte para woff se puede comprobar en http://caniuse.com/woff
Soporte para woff2 puede comprobarse en http://caniuse.com/woff2

 337
Author: Rich Bradshaw,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-30 00:02:51

Woff es una forma comprimida (comprimida) 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, de esta manera la fuente se conserva completamente incluyendo tablas de reglas de representación que muy pocas personas se preocupan porque solo usan escritura latina.

Echa un vistazo a [URL muerta eliminada]. La fuente que ve es un smartfont (woff) experimental entregado en la web que tiene miles de caracteres combinados que crean formas complejas. El el texto subyacente es un código latino simple 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 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 Tipos abiertos).

 21
Author: user2422970,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-30 06:57:11

WOFF 2.0, basado en el algoritmo de compresión Brotli y otras mejoras sobre WOFF 1.0 dando más del 30% de reducción 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 de cómo utilizarlo.

Básicamente se agrega una url src al archivo woff2 y se especifica el formato woff2. Es importante tener esto antes del formato woff: el navegador utilizará el primer formato que soporte.

 8
Author: Jyrki Alakuijala,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-30 13:20:30