¿Por qué deberíamos incluir ttf, eot, woff, svg,... en un font-face?

In CSS3 font-face, hay varios tipos de fuentes incluidos como ttf, eot, woff, svg y cff.

¿Por qué debemos 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?

preguntado el 12 de junio de 12 a las 19:06

3 Respuestas

Respuesta en 2019:

Solo use WOFF2, o si necesita soporte heredado, WOFF. No utilice ningún otro formato

(svg y eot son formatos muertos, ttf y otf son fuentes de sistema completo 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 anteriores a IE9: inventaron la especificación, pero eot era una solución propietaria.

  • ttf y otf son fuentes antiguas normales, por lo que algunas personas se molestaron porque esto significaba que cualquiera podía descargar fuentes de licencia costosas 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 usarlo. Pasa más tiempo y resulta que son absolutamente terrible en comparación con solo un formato de fuente normal, y SVG 2 elimina sabiamente todo el capítulo nuevamente.

  • Entonces, woff es inventado por personas con un poco de conocimiento del dominio, lo que hace posible alojar fuentes de una manera que descarta partes que son de importancia crítica para la instalación del sistema, pero irrelevantes para la web (haciendo felices a las personas preocupadas por la piratería) y permite 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.

  • 2019 editar Unos años despues, woff2 se 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 en su lugar, con navegadores puede cargar automáticamente la fuente "en partes" según sea necesario, en lugar de tener que transferir la fuente completa al principio, 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');
}

Apoyo a woff se puede consultar en http://caniuse.com/woff
Apoyo a woff2 se puede consultar en http://caniuse.com/woff2

contestado el 24 de mayo de 19 a las 17:05

woff... tiene un modo que evita que la gente piratee la fuente? ¿Cómo diablos puede/funciona eso? - marca 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 objetivo de WOFF no es la lucha contra la piraterí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 alguna forma de suavizado". - Michael McGinnis

Las herramientas de @Zelphir dificultan la creación de fuentes incrustables con esa bandera, y su diseñador común y corriente es analfabeto en programación y solo podría eliminar la bandera si alguien diseñara una aplicación Mac con un botón brillante de "fuente pirata". Además, si son una corporación, puede presentar cargos legales. Si es alguien con un blog, habla con él, en su defecto, con 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 simplemente lo cambien por lo más parecido en dafont. - Camilo Martín

Se usa el primer formato compatible de @Marcel, por lo que usará WOFF2 si es compatible. - gsnedders

Woff es una forma comprimida (en zip) de la fuente TrueType - OpenType. Es pequeño y se puede entregar 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 a muy pocas personas les importan porque solo usan escritura latina.

Eche 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 crean formas complejas. 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 los teléfonos inteligentes con todos los navegadores excepto IE. IE no tiene soporte completo para Open Types).

Respondido el 30 de junio de 17 a las 07:06

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

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

WOFF 2.0, basado en el algoritmo de compresión Brotli y otras mejoras con respecto a 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 de 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 utilizará el primer formato que admita.

Respondido el 30 de enero de 16 a las 13:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.