En CSS3 font-face , hay varios tipos de fuentes incluidas como ttf, eot, woff, svgy 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?
Solo use WOFF2, o si necesita soporte heredado, WOFF. No utilice ningún otro formato.
( svgy eotson formatos inactivos, ttfy otfson fuentes completas del sistema, y no deben usarse para fines web)
En resumen, font-face es muy antiguo, pero solo recientemente ha sido compatible con 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 era una solución patentada.
ttfy otfson fuentes antiguas normales, por lo que algunas personas se molestaron porque esto significaba que cualquiera podía descargar fuentes caras con licencia de forma gratuita.
El tiempo pasa, SVG 1.1 agrega un capítulo de "fuentes" que explica cómo modelar una fuente utilizando únicamente el marcado SVG, y la gente comienza a usarla. Pasa más tiempo y resulta que son absolutamente terribles en comparación con un formato de fuente normal, y SVG 2 elimina sabiamente todo el capítulo nuevamente.
Luego, woffes inventado por personas con bastante conocimiento de dominio, lo que hace posible alojar fuentes de una manera que desecha los bits que son críticamente importantes para la instalación del sistema, pero que son irrelevantes para la web (haciendo felices a las personas preocupadas por la piratería) y permite la compresión interna para adaptarse mejor a las necesidades de la web (haciendo felices a los usuarios y hosts). Este se convierte en el formato preferido.
Edición de 2019 Unos años más tarde, woff2se redacta y acepta, lo que mejora la compresión, lo que lleva a archivos aún más pequeños, junto con la capacidad de cargar una sola fuente "en partes" para que una fuente que admita 20 scripts se pueda almacenar como "fragmentos" "en el disco, con navegadores capaces de cargar automáticamente la fuente" en partes "según sea necesario, en lugar de tener que transferir toda la fuente por adelantado, mejorando aún más la experiencia de composición tipográfica.
Si no desea admitir IE 8 y versiones anteriores, y iOS 4 y versiones inferiores, y Android 4.3 o versiones anteriores, puede usar WOFF (y WOFF2, un 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 woffse puede consultar en http://caniuse.com/woff El
soporte para woff2se puede consultar en http://caniuse.com/woff2
woff... tiene un modo que impide que la gente piratee la fuente ? ¿Cómo diablos puede / funciona eso?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 por completo, incluidas las tablas de reglas de representación que muy pocas personas se preocupan porque usan solo el alfabeto latino.
Echa un vistazo a [URL muerta eliminada]. La fuente que ve es una fuente inteligente (woff) entregada en la web experimental que tiene miles de caracteres combinados que forman formas complejas. El texto subyacente es código latino simple 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 los tipos abiertos).
fuente
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.
fuente