Solución de problemas del dilema asociado con @ Font-face Inside Media Query


Dado que cada vez más usuarios se inclinan hacia el uso de dispositivos móviles para acceder a la web, tiene sentido que las entidades comerciales se concentren más en la creación de sitios web optimizados para dispositivos móviles. A pesar del creciente uso de dispositivos móviles, se ha observado que las conexiones de datos móviles son aparentemente más débiles que las de escritorio. Es por eso que, al descargar fuentes personalizadas para sus dispositivos móviles, es posible que haya experimentado que el tiempo de descarga suele ser de varios segundos.

Una solución viable para aumentar la velocidad de descarga de fuentes personalizadas para las pantallas de su dispositivo es utilizar la @font-face regla. Sin embargo, asegúrese de aplicar la regla solo a un cierto rango de pantallas de dispositivos mediante consultas de medios. Pero, lamentablemente, este enfoque no funciona para navegadores como Firefox 10, IE y versiones inferiores. Esta publicación discutirá sobre la solución a este problema.

Vista detallada del problema

Dado que un número cada vez mayor de consumidores prefieren los dispositivos móviles al escritorio para acceder a los sitios web, es esencial que los diseñadores web creen un diseño optimizado para dispositivos móviles. Pero también deben centrarse en equilibrar el rendimiento y, al mismo tiempo, facilitar a los usuarios una experiencia web óptima a través de sus dispositivos móviles. Una vez que el sitio web está completo y se accede a través de un teléfono inteligente, a menudo nos encontramos con un bloque blanco, que se supone que tiene algo de contenido. Este problema ocurre cuando la fuente personalizada aplicada al texto del diseño web no se carga correctamente.

La solución al problema de consulta de medios internos de @ font-face

Bueno, como se discutió anteriormente, una buena solución es usar el @font-face regla para aplicar fuentes personalizadas solo a determinadas pantallas mediante consultas de medios. Analicemos cómo aplicar el @font-face gobernar dentro de un @media consulta

Para ello, tendremos que crear dos archivos denominados “index.html” y “style.css”. El primer archivo contendrá el texto con la fuente personalizada aplicada y el segundo contendrá el estilo de la página.

Creemos una página index.html con el siguiente código:

https://gist.github.com/puikinsh/bb8075a4d620d9082eda

Este es un ejemplo muy básico con solo un párrafo y un enlace a la hoja de estilo. Creemos ahora el archivo style.css con el primer enfoque móvil:

https://gist.github.com/puikinsh/27a978ea8be590a2196f

Como puede ver en el código anterior, los párrafos de la hoja de estilo están configurados con una fuente Arial, con varias alternativas. ¿Y lo que es más? Se utiliza una pila de fuentes que incluye algunas de las fuentes más utilizadas en los principales sistemas operativos. Sobre la base de CSSFontStack, la fuente Arial se encuentra al 99,84% en Windows y al 98,74% en Mac. Y si las fuentes seleccionadas no están disponibles, entonces se usa la fuente sans-serif genérica por defecto.

La consulta de medios se define en la segunda parte de style.css. Esto nos ayudará a orientarnos a la pantalla del dispositivo que tenga al menos 980 px de ancho. Además, en la segunda parte de style.css hemos configurado el @font-face regla para descargar la fuente personalizada, que hace uso de Fontspring Bulletproof @Font-Face Sintaxis. Y luego, la nueva fuente se aplica a todos los párrafos, lo que anula el estilo establecido anteriormente.

La solución discutida parecerá una opción adecuada para la mayoría de ustedes, ya que ayudará a aplicar una fuente personalizada solo para las pantallas de dispositivos que tienen una pantalla grande y, es menos probable, que tengan algún problema debido a una pequeña sobrecarga de ancho de banda. Pero, desafortunadamente, la solución no es compatible con la versión 10 de IE, Firefox 10 y sus versiones inferiores. Esto se debe a que de acuerdo con las especificaciones de CSS2.1, no puede usar reglas at dentro de @media. Si bien la última versión actualizada de Internet Explorer no es compatible con esta función, otros navegadores como Firefox y Mozilla versiones superiores a la décima versión admiten la función de reglas en el interior @media. Además, como la versión 8 de IE y anteriores no comprenden el concepto de consultas de medios, incluso si se actualizan las nuevas versiones de Internet Explorer, el problema persistirá para las versiones anteriores.

Resolver el problema de consulta de medios internos de @ font-face en Internet Explorer
Hay una solución para aplicar @font-face gobernar dentro de una consulta de medios en IE también, pero parcialmente.
Mucha gente no está al tanto del problema de compatibilidad de Internet Explorer, y es probable que siempre que se encuentre con un problema de este tipo, intente comprenderlo utilizando Google como motor de búsqueda. Aquí hay una descripción general de cómo puede resolver el problema de compatibilidad para Internet Explorer 9 y versiones inferiores.

Para esto, primero tendremos que crear un archivo CSS separado, digamos, fonts.css que contenga todos los @font-face reglas, no dentro de una consulta de medios, sino utilizando un comentario condicional. Comprobemos ahora el código fuente de nuestro fonts.css de la siguiente manera:

https://gist.github.com/puikinsh/42cf58321088d8de7f84

Con la solución anterior, el peso de la página seguirá siendo el mismo que antes, para la parte de comentarios condicionales, así como para algunos de los principales navegadores, pero no para Internet Explorer. Para Internet Explorer, agregaremos algunos gastos generales, ya que tendremos que descargar una hoja de estilo adicional. La hoja de estilo contendrá algunos específicos @font-face reglas y, por lo tanto, después de minimizar la hoja de estilo, cualquier archivo promedio no haría que el peso aumentara por encima de 1-2 kb. Ahora bien, esto es aceptable en la mayoría de los casos. A continuación se muestra el código que le ayudará a utilizar el enfoque utilizando la versión reducida de la hoja de estilo:

https://gist.github.com/puikinsh/e3f48844855a4bbe7f1d

Aunque, esta es una solución inteligente, pero está incompleta. Eso es porque, IE10 ya no admite comentarios condicionales. Y, por lo tanto, la décima versión de Internet Explorer ignorará el fragmento de código escrito anteriormente. Por eso, todavía no hemos podido resolver el problema.

Resolver el problema de Internet Explorer 10

Ahora, para resolver el problema de aplicar @font-face regla dentro de @media en IE10 usemos un enfoque menos limpio, ya que necesitamos un truco. Para esto, escriba un fragmento de código que detecte IE10 y luego pruebe si el ancho de la ventana es mayor o igual a 980px. En caso de que las condiciones regresen como “verdaderas”, la hoja de estilo fonts.min.css se agregará al elemento de la página.

https://gist.github.com/puikinsh/3506a8a7648a97b2a3ce

Nota: Dado que el truco se basa en JavaScript, asegúrese de que su JS esté habilitado o, de lo contrario, el truco no funcionará.

Conclusión

Agregar fuentes personalizadas ayuda a que el diseño de su sitio web se vea atractivo a los ojos de los visitantes. Y muchos desarrolladores y diseñadores los están utilizando. Pero dado que agregar fuentes personalizadas puede generar un gran tráfico, es muy importante optimizarlas para dispositivos móviles. Al leer esta publicación, sabrá cómo usar un enfoque móvil primero para las fuentes que está usando en su sitio @font-face consultas internas de los medios. Además, aprenderá algunos trucos útiles para aplicar la @font-face regla dentro de la consulta de medios en Internet Explorer.

Deja un Comentario