Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS
Code

Consejo rápido: ¿Alguna vez pensaste en usar @ Font-face para iconos? 

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called CSS3 Mastery.
CSS Fundamentals: CSS3 Transitions
The Intricacy of Simplicity: CSS3

Spanish (Español) translation by Claudia Márquez (you can also view the original English article)

La evolución de las tecnologías de Internet nunca deja de sorprender. Aparentemente, las personas creativas y talentosas están ideando nuevos conceptos y técnicas a diario. Con los navegadores modernos que se adoptan a un ritmo mayor, los sistemas como CSS3 son cada vez más viables para su uso en proyectos de todos los tamaños.  Claramente, esto se puede ver observando nuevos servicios que brotan en línea como TypeKit. Conceptualmente, si deconstruimos una fuente hasta sus elementos básicos, podemos hacer uso de esta tecnología para cosas que no sean tipo, iconos.


La necesidad de velocidad 

Durante un corto período de tiempo, los desarrolladores comenzaron a producir sitios web con poca consideración por el consumo de ancho de banda.  HTML y CSS fueron restrictivos y Adobe Flash era un lienzo abierto para que los diseñadores y desarrolladores incorporaran animaciones y diseños complejos. Esto dio como resultado algunos sitios pesados extremadamente anchos de banda, todos recordamos algunos. Esos fueron los días previos a la proliferación de teléfonos inteligentes móviles. 

Con los teléfonos inteligentes que acceden a Internet con mayor frecuencia, el ancho de banda y la velocidad de carga de la página vuelven repentinamente a la vanguardia. Afortunadamente, los avances en HTML, CSS y JavaScript lo han hecho posible.  El número de solicitudes HTTP que debe realizar una carga de página es esencial para la velocidad y la capacidad de respuesta de la página web. Los navegadores modernos limitan el número de solicitudes a un solo servidor.  Lee la especificación W3C HTTP 1.1 

"Un cliente de usuario único NO DEBE mantener más de 2 conexiones con ningún servidor o proxy. Un proxy DEBE usar conexiones de hasta 2 * N a otro servidor o proxy, donde N es el número de usuarios activos simultáneamente. Estas pautas están destinadas a mejorar los tiempos de respuesta de HTTP y evitar la congestión ".

Una técnica que se ha vuelto cada vez más popular es el uso de sprites CSS. Los sprites CSS están diseñados para reducir el número de solicitudes HTTP al servidor web al combinar muchas imágenes más pequeñas en una sola imagen más grande y definir un elemento CSS de nivel de bloque para mostrar solo una parte definida de la imagen más grande. La técnica es simple, pero ingeniosa.


Deconstruyendo la fuente 

Las fuentes en su nivel molecular más básico son una serie de glifos vectoriales empaquetados en un único "archivo de glifos".

CSS3 ha introducido en el mundo del desarrollo web la capacidad de incrustar fuentes con la declaración @ face-face. Sin lugar a dudas, este avance en las tecnologías de Internet es una de las etapas más emocionantes e importantes en nuestra breve historia.  Con los desarrolladores capaces de incrustar las fuentes de su elección, los diseñadores pueden producir diseños que se renderizarán de forma más consistente de una plataforma a otra, acercando el arte del diseño interactivo a su primo de impresión.

Si echamos un vistazo más de cerca a la tecnología detrás de una fuente, podemos obtener una mejor comprensión de cómo se pueden usar y desplegar. Las fuentes en su nivel molecular más básico son una serie de glifos vectoriales empaquetados en un único "archivo de glifos". Entonces podemos hacer referencia a cada glifo por su código de carácter correspondiente. Teóricamente, es muy similar a la forma en que hacemos referencia a una matriz en casi cualquier lenguaje de programación, a través de un par clave / valor.

Con esto en mente, los glifos a los que hacemos referencia pueden ser realmente cualquier imagen de un solo color basada en vectores.  Esto no es nada nuevo, todos hemos visto Dingbats y Webdings. Son dos ejemplos de fuentes que no son de tipo, es decir, una serie de imágenes basadas en vectores compiladas en un único archivo de fuentes.


Resumen y expansión @ font-face 

Con la llegada de la incorporación de fuentes y la constatación de que las fuentes son esencialmente una serie de glifos vectoriales simples, comencé a experimentar cómo usar este formato para mi beneficio. Conceptualmente, si coloco todos los iconos necesarios para un sitio en particular en una fuente personalizada, entonces podría usar esos iconos en cualquier parte del sitio con la capacidad de cambiar el tamaño y el color, agregar fondos, sombras y rotación, y casi cualquier cosa else CSS permitirá texto. La ventaja adicional es una sola solicitud HTTP similar a un sprite de CSS.

Para ilustrar, he compilado una nueva fuente con algunos de los grandes íconos de BrightMix.

Sample glyph chart

He usado las ranuras inferiores para los iconos simples, y las ranuras para el mismo ícono en un tratamiento circular.

Para usar mi nuevo Icon Pack, primero tendré que exportar mi conjunto de fuentes como un número de diferentes archivos de fuentes (.eot, .woff, .ttf, .svg) para que sean compatibles con todos los navegadores. El tema de la incrustación de fuentes y la conversión del formato de archivo está cubierto en otra parte, por lo que evitaré una explicación detallada aquí. Sin embargo, el CSS se vería algo así.

Una vez integrado, ahora tengo un ícono completo configurado en formato vectorial para referenciar. Para hacer referencia a un icono, simplemente necesito un estilo que incluya la font-family de "IconPack".

El ejemplo anterior representaría una estrella y es el uso más básico del concepto Icon Pack, sin embargo, no es muy intuitivo desde el punto de vista del desarrollo, no es amigable para SEO, ni se degrada graciosamente en el caso de soporte no CSS.

Para remediar la situación, voy a incluir un :before pseudo-elemento y envolver el contenido en una span etiqueta.

Ahora, la estrella se agrega a la pantalla y no puedo alternar la visibilidad del texto mediante el uso de show y hide clases. El resultado es una clase de CSS de fácil referencia que se degrada graciosamente y está optimizada para los motores de búsqueda. El resultado es una clase de CSS de fácil referencia que se degrada graciosamente y está optimizada para los motores de búsqueda.


Uso del paquete de iconos 

El beneficio aquí es que el icono se escalará con el tamaño de fuente.  De hecho, todos los íconos se escalarán y mantendrán una claridad perfecta. 

Hasta ahora, solo hemos tocado la punta del iceberg, nada innovador aquí, aunque puede comenzar a ver las posibilidades.  Un escenario del mundo real sería el reemplazo del list-item-style. A diferencia del uso de una imagen, ahora podemos usar un icono de vector de nuestro Icon Pack. El beneficio aquí es que el icono se escalará con el tamaño de fuente.  De hecho, todos los íconos se escalarán y mantendrán una claridad perfecta.

Como los iconos ahora se colocan en nuestra página como si fueran texto, podemos aplicarles cualquier estilo CSS válido sin descargar ningún otro recurso. Podríamos aplicar colorfont-sizetext-shadow, etc y hacer uso de la :hover pseudo-elemento para los efectos de sobre-ratón, todo con un solo glifo. 

Como con cualquier cosa, hay algunas limitaciones desafortunadas. Al escribir estas líneas, no hay forma de mostrar un solo glifo con múltiples colores. Ha habido algunos trucos de CSS para obtener degradados sobre el texto en vivo, sin embargo, las formas complejas con diferentes colores en un solo glifo es una limitación. Ha habido algunos trucos de CSS para obtener degradados sobre el texto en vivo, sin embargo, las formas complejas con diferentes colores en un solo glifo es una limitación.

Otro uso interesante es una simple validación de CAPTCHA.  Al reemplazar los glifos por el alfabeto con números, los usuarios verán los números, pero el código de la página serán las letras.  Algunos cálculos simples para traducir entre los dos, y usted tiene un CAPTCHA fácil de leer.

Para ilustrar mejor estos conceptos, he reunido una página de muestra compuesta por dos solicitudes HTTP: el código de página y un solo paquete de iconos. También se incluye la capacidad de escalar el tamaño de fuente de la página para demostrar claramente la flexibilidad de incrustación de glifos vectoriales. El logotipo de la empresa, la navegación, las imágenes y CAPTCHA utilizan glifos. Tenga en cuenta que el CAPTCHA incluido aquí es solo para ilustración. Para usar esto en un sitio de producción, recomendaría validar en el lado del servidor con un algoritmo dinámico como apposed a JavaScript.

Para la página de muestra en un sitio de producción, recomendamos validar en el lado del servidor con un algoritmo dinámico como apposed a JavaScript. Seré el primero en admitir que esta implementación es hack-ish en el mejor de los casos, sin embargo, creo que demuestra la flexibilidad y versatilidad del Icon Pack. 

Claramente, esto abre algunas posibilidades. Los diseñadores pueden desarrollar paquetes de iconos para la venta, las entidades corporativas pueden alojar un solo paquete de iconos para usar en todos los medios corporativos. Los diseñadores de plantillas pueden distribuir fácilmente múltiples opciones de color de la misma plantilla, todo sin tener que guardar y exportar un único archivo adicional.  Los diseñadores web pueden escalar fácilmente los sitios existentes para que sean compatibles con los dispositivos manuales.  Además, esta técnica expone nuestros iconos al DOM permitiendo efectos animados tipo Flash con su API de JavaScript favorita.

A medida que el uso y el soporte del navegador para CSS3 va más allá, Icon Packs pronto tendrá un gran impacto en la entrega de contenido promoviendo las tendencias ligeras, escalables y multidispositivo que se están convirtiendo en una necesidad.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.