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

299

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?

css font-face webfonts

— usuario16948
fuente

Respuestas:

425

Respuesta en 2019:

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)

Respuesta original de 2012:

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

— Rich Bradshaw
fuente

iOS 5 es compatible con WOFF.

— Rob

woff... tiene un modo que impide que la gente piratee la fuente ? ¿Cómo diablos puede / funciona eso?

— Mark Amery

TTF no debería ser más ligero que WOFF. WOFF es una forma comprimida de TrueType - fuente OpenType (ttf y otf).

— toto_tico

El punto de WOFF no es antipiratería. TypeKit dice: "los dos beneficios principales que tienen las fuentes OpenType / CFF sobre las fuentes TrueType son 1) su tamaño de archivo más pequeño y 2) requieren mucha menos información de sugerencias para funcionar bien en entornos que permiten algún tipo de suavizado. "

— Michael McGinnis

Las herramientas de @Zelphir dificultan la creación de fuentes incrustables con esa bandera, y su diseñador de run-off-the-mill es analfabeto en programación y solo podría eliminar la bandera si alguien diseñó una aplicación para Mac con un brillante botón "fuente pirata". Además, si son una corporación, puede presentar cargos legales. Si son un tipo con un blog, háblales, si no lo hacen, su anfitrión, etc., pero ten en cuenta que las personas que no pueden comprar tu fuente no son clientes potenciales de todos modos, así que diría que la publicidad gratuita vale más. que la molestia de convencerlos de que solo lo cambien por lo más cercano en dafont.

— Camilo Martin

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).

— usuario2422970
fuente

No veo nada especial en ese sitio web. Si lo copio en un editor (tiene soporte para utf8), sigo viendo solo texto normal. ¿Qué es lo que hace exactamente woff?

— Zelphir Kaltstahl

Dos tercios de esta respuesta son incorrectos o irrelevantes. También ese enlace está roto.

— Yay295

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.

— Jyrki Alakuijala
fuente