En CSS3font-face, hay varios tipos de fuentes incluidas como ttf, eot, woff, svg y cff.¿Por qué debemos incluir TTF, EOT, woff, SVG, ... en una fuente cara
¿Por qué deberíamos utilizar todos estos tipos?
Si son especiales para diferentes navegadores, ¿por qué es el número de ellos mayor que el número de los principales navegadores web?
En resumen, font-face es muy antiguo, pero solo recientemente ha sido compatible con más de IE.
eot se necesita para Internet Exploradores que son mayores de IE9 - inventaron la especificación, pero es un formato EOT horrible que despoja a cabo gran parte de las características de la fuente.
ttf y otf son fuentes viejas y normales, pero a algunas personas les molesta que esto signifique que cualquiera pueda descargarlas y usarlas.
Casi al mismo tiempo, iOS en el iPhone y el iPad implementó las fuentes 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 apoyar el IE 8 e inferior, y el IOS 4 e inferior, y Android 4.3 o versiones anteriores, a continuación, puedes utilizar WOFF (y WOFF2, un WOFF más comprimida, para el 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 se puede comprobar 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.
Eche 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 de cómo usarlo.
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 usará el primer formato que admita.
iOS 5 no es compatible con WOFF. – Rob
* 'woff' ... tiene un modo que impide que las personas pirateen la fuente *? ¿Cómo diablos puede/funciona eso? –
Tal vez estoy equivocado, estoy seguro de que recuerdo una bandera que desactivó algo así como 'modo de escritorio' para asegurar que un usuario no pueda usar la fuente fuera de la fuente-cara ... ¿Tal vez era una especificación anterior? –