Maquetación y tipografía para web

Compatibilidad y estándares entre fuentes web

¡Prueba gratis durante 10 días

nuestros 1198 cursos !

Prueba gratis Mostrar modalidades de suscripción
Vamos a ver algunos recursos online que están permanentemente actualizados y donde vamos a poder consultar cuál es el estado de soporte de las principales características relacionadas con las fuentes web.
07:03

Transcripción

Vamos a ver el tema de compatibilidad y estándares dentro de la tipografía web. Vamos a ver algunos recursos "online" que están permanentemente actualizados y donde vamos a poder consultar cuál es el estado de soporte de las principales características relacionadas con las fuentes web. Ha avanzado mucho este arte, el de la tipografía web, mediante nuevas características que cada vez son soportadas por más y más navegadores, pero lamentablemente no todas avanzan al mismo ritmo. Por lo cual, bueno, pues mediante estos recursos vamos a poder ir viendo y chequeando cómo va avanzando el estado de cada una de ellas. El primer recurso que me gustaría compartir contigo es The State of Web Type –stateofwebtype.com– donde vamos a poder ver todas estas características o propiedades que podemos aplicar a la tipografía dentro una página web, todas ellas recogidas en esta web. Y vamos a ver por ejemplo Historical Ligatures, por ejemplo, y ver una por una cuál es su estado de soporte actualmente. Por ejemplo, esta propiedad de Historical Ligatures, vemos que en el navegador Google Chrome de la versión 4 a la 32 no está soportado, pero a partir de la versión número 33 sí que está soportado. Lo mismo para Firefox, hasta la 3.6 no estaba soportado, y a partir de la 4 ya se incluyó dentro de los estándares que soportaba el navegador de Mozilla. Lo mismo con Internet Explorer: de la 6 a la 9 no está soportado, de la 10 a la 11 sí que lo está. ¿Qué quiere decir esto? Que cuando maquetemos una web, si queremos dar soporte para nuestro cliente, para que su web por ejemplo sea compatible con Internet Explorer 9 en este caso, bueno pues vamos a tener que tener cuidado o prescindir de, en este caso las Historical Ligatures, porque no están soportadas en la versión 9. Como digo, esto es algo que va avanzando poco a poco y todas estas opciones, todas estas características, todas estas reglas –incluso formatos tenemos incluidos en esta página– bueno, pues son susceptibles de ser utilizadas, pero con cierta responsabilidad. Tenemos que ser conscientes de que no siempre van a ser soportadas por la mayoría de los navegadores, aunque esto poco a poco va avanzando y dentro de 2, 3, 4 años sí que todas ellas estarán soportadas, pero de momento hay que tener un poquito de cuidado porque es una ciencia relativamente nueva y todavía no está 100 % soportada por todos los navegadores, como digo. El siguiente recurso va a ser 'Can I use'. Este no está centrado en la tipografía, como The State of Web Type sí que lo está, sino que se refiere a cualquier propiedad o regla CSS. Vamos a ver por ejemplo "font-face". Simplemente lo tecleamos aquí: font- face, y nos muestra el resultado para esta regla CSS ¿Qué es lo interesante de esta página? Bueno, pues que de una manera muy visual podemos ver lo mismo que veíamos en The State of Web Type: el soporte por versiones de cada uno de los navegadores Internet Explorer, Edge, Firefox, Chrome, Safari, Opera, etcétera., etcétera, etcétera. Vemos que por ejemplo "font-face", que podemos incluir cualquier tipografía e instalarla de manera transparente en la máquina del usuario. Vemos que está soportado por todos los principales navegadores en sus últimas versiones, excepto por Opera Mini 8. Y aquí viene lo más interesante en realidad de esta página, y es que nos indica aquí que el uso global de este navegador –número de clientes o de páginas vistas en el mundo o de tráfico web– es un 5 %, es decir, si vamos a utilizar la regla @font-face de CSS, gracias a esta página sabemos que con Opera Mini estamos perdiendo un 5 % de los potenciales usuarios, y de hecho si fuera más complejo este gráfico... Aquí como solo tenemos este problema, pues se puede hacer fácil el cálculo, porque no es soportado en Opera Mini, con algunas salvedades en Internet Explorer 8 y algún otro navegador que no está aquí contemplado. Pero vemos que en global nos dice que el 90 % de los usuarios de Internet van a poder ver correctamente lo que incluyamos con la regla @font-face. Esto es lo más interesante sin duda de esta página, como digo. Can I use. Buscamos cualquier regla CSS, vemos su soporte por versiones en los principales navegadores y además podemos testear por porcentaje de uso de estos navegadores en todo Internet. Y el tercer recurso, bueno, más que un recurso es una página concreta que habla de la regla @font-face de CSS en la página de w3schools.com, en la que aparte de decirte cómo se usa, cuáles son las características de esta regla CSS... Lo que quería enseñarte es esta tabla en la que de una manera muy visual se puede ver rápidamente cuál es el soporte real de los diferentes tipos de "web fonts", los diferentes formatos por navegador. Vemos que TTF, OTF a partir de la versión 4 de Google Chrome ya es soportado, de la 9 de Internet Explorer 3.5 de Firefox, 3.1 de Safari y de la 10 de Opera. WOFF, lo mismo: están todos soportados a partir de ciertas versiones. No así con WOFF 2. SVG todavía no es soportado ni siquiera por Internet Explorer ni por Firefox, así que parece que está perdiendo la carrera por ser el estándar de las "web fonts". Y EOT o 'iout' empieza a descolgarse peligrosamente de la carrera. Con lo cual, nos viene muy bien también consultar esta tabla, que de una manera muy rápida podemos comprobar qué formatos de archivo tenemos que utilizar como "web font". Recomendable: TTF, OTF, WOFF, y si podemos WOFF 2, como primera de las opciones, que en Explorer, Firefox y Opera se verá, y en Internet Explorer y Safari en cambio saltará a la siguiente que mi recomendación es que sea WOFF. Así pues, hasta aquí estos tres recursos para chequear, comprobar y aprender sobre la compatibilidad y estándares de las reglas y propiedades relacionadas con las web font en CSS.

Maquetación y tipografía para web

Aprende cómo seleccionar una fuente óptima para su lectura en pantalla y cómo exprimirla para aprovechar en tus proyectos web todas las posibilidades de las fuentes OpenType.

2:10 horas (25 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:30/09/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.