¿Por qué deberíamos incluir ttf, eot, woff, svg,... en una fuente?
En CSS3 font-face, se incluyen varios tipos de fuentes como ttf, eot, woffy .svgcff
¿Por qué deberíamos utilizar todos estos tipos?
Si son especiales para diferentes navegadores, ¿por qué su número es mayor que el de los principales navegadores web?
Respuesta en 2019:
Utilice únicamente WOFF2 o, si necesita soporte heredado, WOFF. No utilices ningún otro formato.
( svgy eotson formatos inactivos, ttfson otffuentes de sistema completo y no deben usarse con fines web)
Respuesta original de 2012:
En resumen, font-face es muy antiguo, pero solo recientemente ha sido compatible con más de IE.
eotes necesario para Internet Explorer anteriores a IE9: ellos inventaron la especificación, pero eot era una solución propietaria.ttfyotfson fuentes antiguas normales, por lo que a algunas personas les molestó que esto significara que cualquiera podía descargar fuentes costosas de obtener licencia de forma gratuita.Pasa el tiempo, SVG 1.1 agrega un capítulo sobre "fuentes" que explica cómo modelar una fuente utilizando únicamente el marcado SVG, y la gente comienza a usarlo. 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 del dominio, lo que hace posible alojar fuentes de una manera que desecha bits que son de importancia crítica para la instalación del sistema, pero irrelevantes para la web (lo que hace 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 anfitriones). Este se convierte en el formato preferido.Edición de 2019 Unos años más tarde,
woff2se redacta y se acepta, lo que mejora la compresión, lo que genera 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 los 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, lo que mejora aún más la experiencia de composición tipográfica.
Si no desea admitir IE 8 y versiones anteriores, iOS 4 y versiones anteriores, 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 admiten).
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}
El soporte para woffpuede consultarse en http://caniuse.com/woff
El soporte para woff2puede consultarse en http://caniuse.com/woff2
Woff es una forma comprimida (en zip) de la fuente TrueType - OpenType. Es pequeño y puede entregarse a través de la red como un archivo gráfico. Lo más importante es que de esta manera la fuente se conserva por completo, incluidas las tablas de reglas de representación que a muy pocas personas les importan porque solo usan escritura latina.
Échale un vistazo a éste sitio web . La fuente que ves es una fuente inteligente (woff) experimental entregada en la web que tiene miles de caracteres combinados que forman formas complejas. El texto subyacente es un código latino simple de Singhala romanizado. (Copia y pega en el Bloc de notas y mira).
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 en todos los navegadores excepto IE. IE no tiene soporte completo para tipos abiertos).
