otf - importar fuente css

¿Siguen siendo necesarios eot, ttf y svg en la declaración de fuente?

Question

Hasta ahora, he usado la sintaxis de cara de fuente a prueba de balas de Paul Irish

Pero solo estaba buscando soporte para archivos .woff y .woff2 en caniuse y dice que woff es compatible con IE9 +. La mayoría de los artículos sobre este tema son de alrededor de 2009, que en el momento de escribir esto era hace 7 años. ¿Realmente necesitamos seguir declarando ttf, otf, eot y svg cuando woff ahora goza de un apoyo tan amplio?

Answer 1

Creo que usar ttf es suficiente para todos los navegadores y dispositivos modernos ... Yo mismo revisé, por ejemplo, firefox, chrome, opera, android mobile (kitkat, mashmallow) y iPhone (6 a 7 Plus). Parece que TTF es compatible con todos los dispositivos mencionados anteriormente.

Answer 2

Decidí publicar mi propia respuesta a esto por dos razones: la respuesta actualmente aceptada es un poco entusiasta sobre el uso de la pila de fuentes WOFF2 y WOFF en el desarrollo web moderno sin mencionar otros factores, y también apunta en gran medida al final oficial de la vida útil fechas, que no reflejan qué versiones de navegador se están utilizando realmente en el mundo real. En esta respuesta buscaré CanIUse.com, que es un estándar de la industria para hacer un seguimiento de cosas como esta.

Soporte para WOFF2

WOFF2 mejora a WOFF en todos los sentidos, es compatible con la mayoría de los navegadores de escritorio lanzados después de 2014, pero solo desde 2018 comenzó a ser compatible con la mayoría de los navegadores móviles. Es compatible con aproximadamente el 93% de los navegadores a nivel mundial.

Apoyo a WOFF

WOFF comenzó a ser compatible con Internet Explorer en IE9 (lanzado en 2011), lo que hace que el formato EOT sea obsoleto para las versiones de IE lanzadas desde 2011. Está respaldado por un 97% de los navegadores en todo el mundo.

Otros navegadores de escritorio comenzaron a admitir WOFF aproximadamente al mismo tiempo, incluidos Firefox desde Firefox 3.6, Chrome desde Chrome 5 y Safari desde 5.1 (lanzado en 2010, 2011 y 2011 respectivamente), lo que hace que los formatos TTF y OTF ^{1 sean} obsoletos en versiones anteriores . La mayoría de los navegadores móviles son compatibles con WOFF desde 2013.

Advertencia y conclusiones

Desde este punto de vista, es bastante fácil descartar todos los demás formatos como innecesarios, pero el software que ya no se admite oficialmente nunca ha sido un buen indicador de que ya no se utiliza. Para decirlo de otra manera, no se garantiza que el uso compartido de la versión global del navegador sea representativo de los datos demográficos que utilizará su sitio web.

El uso compartido de la versión del navegador puede variar drásticamente entre los grupos demográficos: factores como el país, la clase social y los ingresos influyen en gran medida en los dispositivos (y, por lo tanto, las versiones de los navegadores) que utilizan sus usuarios. Como desarrollador, piense si el sitio que está construyendo será utilizado por los datos demográficos que tienen más probabilidades de utilizar esas versiones anteriores.

Si decide que ese es el caso, y necesita admitir navegadores de escritorio anteriores a 2011, o navegadores móviles anteriores a 2013, use la pila de fuentes completa: WOFF2, WOFF, TTF (u OTF) y EOT.

Si no necesita admitir esos navegadores antiguos, y sigue siendo cierto que lo más probable es que no lo haga, simplemente use WOFF2 y WOFF como pila de fuentes a partir de aquí.

_{(1) TTF y OTF son formatos de fuente de escritorio tradicionales, y cualquier navegador que admita uno admite el otro, así que nunca use ambos}

Answer 3

Esto es más de un apéndice de 2019. En este punto 18/09/2019, todavía hay un uso sustancial de IE11, sin mencionar otro software más obsoleto.

Como tal, la respuesta más votada aceptada es incorrecta en su edición más reciente de hace un año, no menos, que solo necesita woff2. Como mínimo, necesita tanto woff2 como woff, y es posible que desee una opción de copia de seguridad más universal, incluso si es menos que ideal como svg.

Si bien es cierto que primero debe comenzar cargando y apoyando woff2 principalmente, el soporte heredado es solo una realidad y probablemente no podrá escapar con solo woff2 durante varios años más en cualquier esfuerzo profesional.

Esto es especialmente cierto para los tipos de fuente, ya que cargar tanto woff2 como woff como copia de seguridad es muy fácil, por lo que la sobrecarga para admitir navegadores antiguos es bastante baja.

Answer 4

Octubre 2018 editar

tl; dr: solo usa WOFF2, todos los navegadores que aún son compatibles lo admiten, al final.

Respuesta original

Respuesta corta: no.

EOT solo es relevante para IE8 y versiones inferiores (aunque como trivia: todo el camino hasta IE4. IE fue pionero en webfonts), y las fuentes SVG como tecnología (que no debe confundirse con las fuentes OpenType con contornos SVG) fueron abandonadas ( a principios de 2015 ) porque las limitaciones eran una locura una vez que los recursos web reales comenzaron a estar disponibles. A partir de 2016 caniuse . Y WOFF2 si desea aprovechar la nueva versión mejor de WOFF que solo se convirtió en una recomendación w3 (en el momento de esta respuesta).

Para facilitar las cosas, a partir del 12 de enero de 2016, Microsoft dejó de ser compatible con IE8 y versiones posteriores , con compatibilidad limitada para IE9: ahora solo admitirán el navegador más reciente disponible para cada sistema operativo aún compatible, lo que significa que IE9 ya no es compatible con Windows XP , porque XP ya no es compatible, pero técnicamente sigue siendo compatible (a regañadientes) hasta que Vista SP2 y Server 2008 R2 alcancen el final de la asistencia extendida en 2017 y 2020, respectivamente. Por supuesto, para Windows Server 2008, la compatibilidad con fuentes web es irrelevante, y la mayoría de las empresas que todavía usan una versión anterior de Windows omitieron Vista, ya sea en Windows XP (bajo su propio riesgo) o Windows 7 (que podemos esperar que todos se conviertan en Windows 10 en julio de 2016, el 29 de los cuales es la última fecha en que las personas pueden actualizar de 7 / 8.1 (pero no 8) a 10 de forma gratuita).

(Edición de abril de 2017: Windows Vista SP2 dejó de ser compatible este mes y, como tal, IE9 ya no es oficialmente compatible)

En cuanto a TTF / OTF, no desea usarlos en línea más de lo que desearía usar imágenes TIFF en lugar de JPG o PNG: a pesar de que WOFF es "solo" un envoltorio delgado alrededor de datos TTF / OTF, WOFF / WOFF2 permite que los datos se compriman, mientras que OpenType simple no.

Además, TTF / OTF son universales (para sistemas que admiten fuentes OpenType) y, por lo tanto, se examinan más para verificar su corrección, especialmente por versiones de IE. Usando WOFF, que como tipo de archivo lo hace explícito, este es un W eb ( O pen) F ont ( F ormat), una forma menos estricta de escrutinio significa que algunas fuentes que fallarían en un sistema de verificación de OpenType pueden funcionar igual de bien webfonts (debido al hecho de que no todos los datos OpenType requeridos para la universalidad son necesarios para que una fuente funcione solo en un contexto web).

Finalmente, puede elegir en formatos WOFF: el formato 1, llamado WOFF, es el formato más antiguo y utiliza la compresión basada en deflate , similar a la compresión PNG; y el Formato 2, llamado WOFF2, es el formato más nuevo con compresión basada en el algoritmo brotli , y también permite "cortar" una fuente en archivos separados para una entrega optimizada cuando se trata de fuentes unicode que admiten múltiples idiomas. No necesita todos los archivos al mismo tiempo, por lo que solo entrega aquellos archivos que cubren los rangos Unicode necesarios para una página específica y mantiene el tamaño de la página y los tiempos de carga un poco más.

En conclusión: hurra por la marcha del progreso, solo usa WOFF (o WOFF2).

Y, por supuesto, recuerde indicar el formato de sus @font-face usando el valor format() .