Share
Veamos cómo mejorar el rendimiento de su sitio reduciendo la cantidad de solicitudes HTTP que realiza. Vamos a aprovechar una técnica conocida como el esquema URI de datos; codificar tanto imágenes como fuentes en cadenas de datos puros que se pueden integrar directamente en su marca y hojas de estilo.
Miniatura: Los íconos de Broccolidryiconsaniconseticfullof ... de Visual Idiot (usaremos estos íconos en un minuto ...)
A medida que las conexiones a Internet se hacían más rápidas y las computadoras más potentes, el rendimiento del sitio web solía ser una de las mejores prácticas a menudo pasadas por alto. Hoy, garantizar que su sitio web tenga un buen desempeño es absolutamente vital para mantener felices tanto a sus usuarios como a los motores de búsqueda; especialmente cuando se accede al sitio utilizando datos móviles y teléfonos con poca potencia y otros dispositivos.
Ya hemos examinado CSS Sprite Sheets: Mejores prácticas, herramientas y aplicaciones útiles en Webdesigntuts +, demostrando cómo puede mejorar el rendimiento al reducir las solicitudes HTTP y al reducir el tamaño general del archivo de imagen. Pero, ¿sabía que puede representar una imagen (en realidad cualquier dato binario) en su HTML o CSS utilizando solo una cadena de texto ASCII??
Esta técnica se conoce como el esquema URI de datos y, de hecho, no es nueva. Aunque los URI de datos han estado flotando por más de diez años, solo han ganado popularidad recientemente con una amplia compatibilidad con el navegador y un enfoque en la mejora del rendimiento del sitio..
El principal beneficio de usar URI de datos es la mejora del rendimiento. El navegador obtiene todos los recursos que se utilizan en su sitio mediante una solicitud HTTP. Esto incluye todo, desde hojas de estilo, a archivos JavaScript, a imágenes. Independientemente de la velocidad de la conexión a Internet, casi todos los navegadores limitan la cantidad máxima de solicitudes HTTP simultáneas a dos a la vez, lo que resulta en un cuello de botella de datos. Cuantas más solicitudes HTTP deban realizarse, peor será el rendimiento general del sitio..
La combinación de datos de imágenes en el HTML o CSS del sitio elimina instantáneamente la necesidad de que el navegador obtenga recursos adicionales. Aunque los datos codificados en Base64 en bruto generalmente se consideran un 33% más grandes que su contraparte optimizada (por ejemplo, una imagen), luego de la optimización de archivos CSS y CSS, la diferencia en el tamaño del archivo generalmente es insignificante..
Un URI de datos es esencialmente datos binarios codificados en un formato Base64, junto con información adicional para el navegador, que incluye un tipo MIME, un Charset y el formato de codificación (Base64).
El URI de datos (en su forma más simple) se ve así:
datos: [] [; charset =] [; base64],
Para usar un URI de datos como una imagen HTML en línea, el formato se ve así:
Para usar un URI de datos como una imagen de fondo que se repite en CSS, el formato es el siguiente:
Accentsconagua
body background-image: url ('data: image / png; base64,'); Repetición de fondo: repetir; Alternativamente, combine los elementos de fondo con la abreviatura de CSS:
div.logo background: url ('data: image / png; base64,') sin repetición arriba a la izquierda; margen: 20px 10px 0 10px; Si bien hemos utilizado imágenes para ilustrar el uso de URI de datos, se puede usar casi cualquier medio, incluidos archivos multimedia, fuentes (como veremos en breve) y mucho más..
OK, seamos prácticos con un par de ejemplos. Tomemos la siguiente imagen (un mosaico de repetición que descargué de Patrones sutiles), la convertimos en un URI de datos y usamos CSS para crear un fondo de repetición para un sitio o interfaz.
Aunque los URI de datos pueden parecer bastante extraños, el proceso para crear uno es muy simple.
Primero, diríjase al convertidor de URI de datos de la semántica web y cargue la imagen seleccionando la ubicación del archivo de la imagen y haciendo clic en la herramienta "Convertir imagen":
Una vez procesada, si te desplazas hacia abajo en la página, verás cómo se ve esta imagen como codificada en base64:
Dado que necesitamos un fondo repetido para nuestro proyecto, tendremos que modificar el CSS que nos proporciona la herramienta..
Para un fondo que se repite, copie y pegue el siguiente CSS:
div.logo repetición de fondo: repetir; Imagen de fondo: url (datos: image / jpeg; base64, / 9J / 4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP / sABFEdWNreQABAAQAAABkAAD / 4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu + 7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI / PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI + + IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjlCNDA1N0EyRkNEQzExRTE5NEEyOEY1NEFFMzlEMzVFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjlCNDA1N0EzRkNEQzExRTE5NEEyOEY1NEFFMzlEMzVFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUI0MDU3QTBGQ0RDMTF FMTk0QTI4RjU0QUUzOUQzNUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUI0MDU3QTFGQ0RDMTFFMTk0QTI4RjU0QUUzOUQzNUUiLz4gPC9yZGY6RGVzY3JpcHRpb24 + IDwvcmRmOlJERj4gPC94OnhtcG1ldGE + IDW / eHBhY2tldCBlbmQ9InIiPz7 / 7gAOQWRvYmUAZMAAAAAB / 9sAhAABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAgICAgICAgICAgIDAwMDAwMDAwMDAQEBAQEBAQIBAQICAgECAgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwP / wAARCAAnACgDAREAAhEBAxEB / 8QAowAAAgICAwAAAAAAAAAAAAAABwoICwUGAwQJAQABBAMBAQAAAAAAAAAAAAAFAwQHCAACBgEJEAAABgIBAwIDBQkAAAAAAAABAgMEBQYRBwgAIRIxQVEyCWGBIkIWcZGhsSNjJtYKEQACAAUBBAYFCAsBAAAAAAABAgARAwQFBiExQRJRYXGx0QeRIjITFPBCUnJkdMTUgWKSI1Ozw9OUtHUX / 9oADAMBAAIRAxEAPwBWSkVqnzdWqU1PVCnzs3NVWtTM3NTtVr0xLzMxKQrCQlJWVlJOOdP5GSkXzhRZwusodVVU4mMYRER6PUaVM0V9RCSo + aJzkJ8IoVrDUmq6ep8rRoZXK06KZO7VFS8uUVVW4qKqqqVQqqoACgAAASEFqLoWsjgUT6y1gf0EQU1zSlPsEPxQZu / b26dpSt9xSnP6o8IjW / 1XrdSQuczg7MjeD + vBIjtd6kOBc6k1Ec39zVtBP + 8DV4cgGelVpW4Mmp05fUHhHGXmsPMFSZah1CB1ZO / H4iNoS1vp4QER05pzAYxnU2uxz3ER7 / pwRHAB0r7i3kJU6X7C + EAqmtPMUHZqPUc / + RkPzEDXbdC1cw1hst9Fau1dEycdru9SEZKQ + uKVEysbJx1XlXjCQjZKPg279g + ZO0CKpLJKEUTOUBKICGekbmhbChU5UpzCE7EEwZHjKO48u9X69r67wdG7z2erWtTNWKPTq5G9qU3R7qkro6PXZHRlJVlYFSDIgxHvXbvwo1F7 / JSKeGBEAxiuRgeg / H + PQ2k4FNV4co7h1RMGsLQtqbKOBvyd5 / s1Ym5pnjFyk3nXndv0jxt3 / uOpR004rcjZ9V6e2HsKusLC0ZRsm8gnk3Uq5LxrWZaxsw0cKNTqlXIg5RUMUCqkEXDVaaH1mUGW47I5JNJZ7M0WusVYXdzQVipalRq1F5gAeUlFIDAEGR2gMOBE7QAv0 ++ BROxOEfEQgfAvGzTRf5UsOgXxFf6b + k + MX0by80A3tYPDntsrb + 3Ffjz04p8htUcheX99PxY3JrnjxXuS + 7yVG7Bo26UzS8PruR3XYoLWZq5YyVaNosfTZGOexbWEM2WIzcJLtiNhMCiYD0NtWp1KSKXU1eUTE5nZvnx6Y + ffmV5eZfGapy1 / b4q6ttNpfVTTqC2qJbLTaqRT5H5BSVCWCoFIXaqqNwjyl2zLCtrDZxAN2U1tfifMH5qnMZDAewZ63uD + 4qSl7B7oC6Ax / u9cYNpezmrA7vtdGIuUl6ZOnUsoGEPGnVMuMh2 / x + NDP2Z6G0yORJ / RHcInrU1BzqDJbuU5G7O77RUPRth8D / mk5k8U9CcDtp1LenJ3jrpa3ynLW / WKPq23d26y1rY5CuudOaEjGk / Hwl1tUFJvIR1JRTtum6SSOgddqsmBvNM4A0vFZqgIBIC9HWdkTP5QZDE43Tdxb3Vzb0axvnbleoiNI0qInJiDIlSAeMiN4MNwKWNBJQ6SmCqJnMmcooq5KcgiUxRwYQyAh0yibYX3 + vTzG4r2f6b3LjR1b5Ncd7Bu5jZdNV1zpyA3XrOZ2s2slM5S6iXuNfca6jbU8uCE3U20G / Uk2hm RV2BGS4rlTBFTxdWqsKyuQeWe / wDREV + amSxd1obJ46jc27XpRV92tRDUmtVCy8gbmmoBmJTEjPdFdvseWBXX2wCeXz0O6J / MGB861KFD3yPr2z0WrOBSdVO0o3DqMVC0dj + TV2IaRJGVszPsuaRgC1N741SpEESh41Ssl7gP5YKPD2x646ZISEXb80d0S9naAfP35IInf3PEfxnjbkJAMBkfTv6iOfh6d / X4h6dL80tjQAr46e7j2fL0Q + 3I / wDUj9PR / JSDxLWXN1Mjt67dESLqXQKoJEcOFFSkBQeVqInAgHx5CQmfXAenQ74WrKeyUWK / 9S02F5mS7HbTX0e33QmLyp3XX968pOTm8Kkymompbq5Fbx23Vouzox7SyR9a2VtG1XWAZWBpESc5FNJxpEziJHabV67QTcFOVNZUoAcz + nNaag7wPlwiuepHt8rnrrJW9NjRrV3dSdhkxnIjpG47SOsxF27SvnSronkf6lOtRM5EwfjgJEv7O + esqmdNj + qe49UbactJaixrBJSyNqfRcUz0QKImTbRcRDRboZEzmMhoiOcnj4OwzUeddhHNWiykfMwkVIw0uwUUREyLpo4XauEhKokochimFslSQAIMpDgeiJCzGLuGzF46 / CkNeVztubRTtqudqtWDKdu1WAYGYIBEZQlkYh8pZwe / tTrqPf7q7jPW / NTnxn2HwgcMPeSJBt + X73Zy / nx2iWZkAgPjP5yHYaZdh7 / YIVzPWF14zI7D4Q2fD3vH4Qj73Zj8RHP + qG3snYfupd6 / 13rFccAZdQPhCBwtx02n + XY / mIw1lsKDmt2RsVOc83VdnWpBcVS3Mm5TuYp4iQ7h6 / g2rFm3IdQBUVWUTSTIAmOYCgI9eVHUg7Dzcp4HoPVuglhMNcLm7Fy1qFW9oNsurMn1ayGQVKxZiZSCqCSZAAkx / 9k = );
Tomemos un ejemplo aún más fácil, convirtiendo la siguiente imagen en un URI de datos y colocándola en nuestro marcado como una imagen en línea:
Simplemente siga los pasos anteriores para convertir la imagen en una imagen codificada en base64 y copie el marcado HTML generado por la herramienta (desde el panel 'Como una imagen') y péguelo directamente en su marcado HTML de la misma forma que lo haría para insertar una imagen en línea regular.
El código final para este ejemplo se ve así:
Realmente no hay reglas estrictas sobre cuándo usar los URI de datos para reemplazar los activos del sitio, pero hay una serie de inconvenientes y peculiaridades que se deben tener en cuenta a la hora de elegir si usar URI de datos o no..
¿Recuerdas que dije eso? alguna ¿Se pueden usar datos binarios en el esquema de URI de datos? Ahora que hemos visto las imágenes codificadas en base64, veamos cómo convertir una fuente de icono en un URI de datos e implementarla en un proyecto.
De hecho, los URI de datos son una combinación perfecta para las fuentes de iconos, especialmente si solo planea usar algunos símbolos con un tamaño de archivo pequeño.
Vamos a utilizar la aplicación web en línea IcoMoon para generar un conjunto de fuentes personalizado, generar el URI de datos y generar el código CSS final.
Primero, dirígete al sitio de IcoMoon y haz clic en el enlace "Comenzar a usar la aplicación":
A continuación, explore los conjuntos de fuentes para seleccionar sus fuentes de iconos personalizados o use el campo de búsqueda en la parte superior izquierda de la página para encontrar fuentes que coincidan con las etiquetas 'Comentario', 'Corazón', 'Ojo' y 'Buscar'.
He usado el conjunto de fuentes Broccolidry de Visual Idiot en este ejemplo.
A continuación, vaya a la página de configuración de descarga haciendo clic en el botón 'Fuente' en la parte inferior de la pantalla:
En la página de configuración de descarga, cambie la Línea de base al 10%, haga clic en el ícono de configuración para que aparezcan las opciones avanzadas y seleccione la casilla de verificación 'Base64 Encode & Embed in CSS'. Haga clic en el icono 'Guardar' para descargar su fuente.
Una vez que haya descargado y extraído la fuente personalizada, puede abrir el archivo 'index.html' para ver su fuente y sus combinaciones de Unicode:
Ahora que hemos creado nuestro conjunto de fuentes de iconos personalizados, veamos cómo podemos usarlo en un proyecto.
Primero, abra la hoja de estilo provista en la descarga de IcoMoon y localice el siguiente CSS. Ya que el nombre del juego se trata de reducir las solicitudes HTTP, vamos a copiar y pegar todo el CSS provisto en nuestra propia hoja de estilo principal.
@ font-face font-family: 'customFont'; src: url (datos: fuente / SVG; charset = utf-8; base64, PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI / Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiID4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8bWV0YWRhdGE + ClRoaXMgaXMgYSBjdXN0b20gU1ZHIGZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uCjEKPC9tZXRhZGF0YT4KPGRlZnM + Cjxmb250IGlkPSJjdXN0b21Gb250IiBob3Jpei1hZHYteD0iNTEyIiA + Cjxmb250LWZhY2UgdW5pdHMtcGVyLWVtPSI1MTIiIGFzY2VudD0iNDYxIiBkZXNjZW50PSItNTEiIC8 + CjxtaXNzaW5nLWdseXBoIGhvcml6LWFkdi14PSI1MTIiIC8 + CjxnbHlwaCB1bmljb2RlPSImI3gyMTsiIGQ9Ik0gNTA3LjQ0LTIuMjQ4YyA2LjA5Ni02LjA5NiwgNi4wOTYtMTUuOTg0LDAuMDAtMjIuMDk2bC0yMi4wOTYtMjIuMDk2CgljLTYuMTEyLTYuMDk2LTE2LjAwLTYuMDk2LTIyLjA5NiwwLjAwbC0xNTQuNjg4LDE1NC42ODhjLTEuNjgsMS42OC0yLjgwLDMuNjY0LTMuNTUyLDUuNzc2QyAyNzMuMjgsOTAuODQsIDIzNC4zMiw3Ny4wMCwgMTkyLjAwLDc3LjAwCglDIDg1Ljk2OCw3Ny4wMCwwLjAwLDE2Mi45NjgsMC4wMCwyNjkuMDBDMC4wMCwzNzUuMDMyLCA4NS45NjgsNDYxLjAwLCAxOTIuMDAsNDYxLjAwYyAxMDYuMDMy LDAuMDAsIDE5Mi4wMC04NS45NjgsIDE5Mi4wMC0xOTIuMDBjMC4wMC00Mi4zMi0xMy44NC04MS4yOC0zNy4wMjQtMTEzLjAwOAoJYyAyLjExMi0wLjc1MiwgNC4wOTYtMS44NTYsIDUuNzc2LTMuNTUyTCA1MDcuNDQtMi4yNDh6IE0gMTkyLjAwLDM5Ny4wMGMtNzAuNjg4LDAuMDAtMTI4LjAwLTU3LjMxMi0xMjguMDAtMTI4LjAwYzAuMDAtNzAuNjg4LCA1Ny4zMTItMTI4LjAwLCAxMjguMDAtMTI4LjAwcyAxMjguMDAsNTcuMzEyLCAxMjguMDAsMTI4LjAwCglDIDMyMC4wMCwzMzkuNjg4LCAyNjIuNjg4LDM5Ny4wMCwgMTkyLjAwLDM5Ny4wMHoiIC8 + CjxnbHlwaCB1bmljb2RlPSImI3gyMjsiIGQ9Ik0gMjU2LjAwLDEzLjQ5NmMtMTAuMzg0LDAuMDAtMjUuNTg0LDExLjY4LTM1LjY2NCwxMi43NTJjLTI4Ljc1Mi0yNC4xMTItNTguNzA0LTUzLjEzNi05OS40MjQtNjguMjI0CgljLTE3Ljc3Ni03LjUzNi0zMy4wNC0xMS45MDQtMzcuMDA4LTcuMTUyYy01LjMyOCw2LjE5Mi0xMy4zNzYsMTQuNzg0LTE0LjgwLDE3LjA4OGMgMC4wOCwzLjQyNCwgNC4yMjQsMC43MiwgOC43MzYsNS41ODQKCWMgMjQuNTc2LDEwLjMzNiwgNDAuNDQ4LDM3LjAwOCwgNTEuMTIsNjkuNjE2QyA1MS45ODQsODEuNzM2LDAuMDAsMTU0LjEwNCwwLjAwLDIzNy4yMDhDMC4wMCwzNjAuNzQ0LCAxMTQuNjI0LDQ2MC45MDQsIDI1Ni4wMCw0NjAuOTA0cyAyNTYuMDAtMTAwLjE0NCwgMjU2LjAwLTIyMy42OTYKCVMgMzk3LjM3NiwxMy40OTYsIDI1Ni4wMCwx My40OTZ6IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjM7IiBkPSJNIDM2OC4wMCw0MjkuMDBjLTM4LjQ2NCwwLjAwLTY5LjI5Ni0xMy44MDgtOTYuNDgtNDEuMDA4Yy0wLjAxNi0wLjAxNi0wLjAzMi0wLjAzMi0wLjA0OC0wLjA0OAoJbC0wLjAxNiwwLjAwTCAyNTYuMDAsMzY4LjQ3MkwgMjQwLjU0NCwzODYuNzZjLTAuMDE2LDAuMDE2LTAuMDMyLDAuMDMyLTAuMDQ4LDAuMDQ4TCAyNDAuNDgsMzg2LjgwOCBsMC4wMCwwLjAwQyAyMTMuMjgsNDE0LjAyNCwgMTgyLjQ2NCw0MjkuMDAsIDE0NC4wMCw0MjkuMDBTIDY5LjM3Niw0MTQuMDI0LCA0Mi4xNzYsMzg2LjgyNAoJQyAxNC45OTIsMzU5LjYyNCwwLjAwLDMyMy40NjQsMC4wMCwyODUuMDBjMC4wMC0zOC40MzIsIDE0Ljk2LTc0LjU5MiwgNDIuMTI4LTEwMS43NzZMIDIzMy4yOC05LjUyOEMgMjM5LjI4LTE1LjU5MiwgMjQ3LjQ3Mi0xOS4wMCwgMjU2LjAwLTE5LjAwcyAxNi43MiwzLjQwOCwgMjIuNzIsOS40NzIKCWwgMTkxLjEzNiwxOTIuNzUyQyA0OTcuMDI0LDIxMC40MDgsIDUxMi4wMCwyNDYuNTUyLCA1MTIuMDAsMjg1LjAwYzAuMDAsMzguNDY0LTE0Ljk5Miw3NC42MjQtNDIuMTc2LDEwMS44MjRDIDQ0Mi42MjQsNDE0LjAyNCwgNDA2LjQ2NCw0MjkuMDAsIDM2OC4wMCw0MjkuMDBMIDM2OC4wMCw0MjkuMDB6IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjQ7IiBkPSJNIDI1Ni4wMCwzNjUuMDBDIDExNC42MDgsMzY1LjAwLDAuMDAsMjA1LjAwLDAuMDAsMjA1LjAwcyAx MTQuNjA4LTE2MC4wMCwgMjU2LjAwLTE2MC4wMHMgMjU2LjAwLDE2MC4wMCwgMjU2LjAwLDE2MC4wMFMgMzk3LjM5MiwzNjUuMDAsIDI1Ni4wMCwzNjUuMDB6IE0gMjU2LjAwLDEwOS4wMAoJCQljLTUzLjAwOCwwLjAwLTk2LjAwLDQyLjk5Mi05Ni4wMCw5Ni4wMHMgNDIuOTkyLDk2LjAwLCA5Ni4wMCw5Ni4wMHMgOTYuMDAtNDIuOTkyLCA5Ni4wMC05Ni4wMFMgMzA5LjAwOCwxMDkuMDAsIDI1Ni4wMCwxMDkuMDB6IE0gMjU2LjAwLDI2OS4wMGMtMzUuMzQ0LDAuMDAtNjQuMDAtMjguNjU2LTY0LjAwLTY0LjAwcyAyOC42NTYtNjQuMDAsIDY0LjAwLTY0LjAwcyA2NC4wMCwyOC42NTYsIDY0LjAwLDY0LjAwCgkJCVMgMjkxLjM0NCwyNjkuMDAsIDI1Ni4wMCwyNjkuMDB6IiAvPjwvZm9udD48L2RlZnM + PC9zdmc +) formato ( 'svg'), url (datos: fuente / ttf; charset = utf-8; base64, AAEAAAANAIAAAwBQRkZUTWJ6KjIAAAbwAAAAHEdERUYANQAGAAAG0AAAACBPUy8yT9zb + QAAAVgAAABWY21hcARB + dYAAAHQAAABUmdhc3D // wADAAAGyAAAAAhnbHlmq9ef6AAAAzgAAAGoaGVhZPoP + 5cAAADcAAAANmhoZWED / f / WAAABFAAAACRobXR4CqoAAAAAAbAAAAAgbG9jYQGQASoAAAMkAAAAEm1heHAATQApAAABOAAAACBuYW1lOPxXYAAABOAAAAGqcG9zdJ + wTbMAAAaMAAAAOgABAAAAAQAAJNzn + l8PPPUACwIAAAAAAMx4XYAAAAAAzHhdgAAA / 80CAAHNAAAACAACAAAAAAAAAAEAAAHN / 80ALgIAAAD + AAIAAAEAAAAAAAAAAAAAA AAAAAAAIAAEAAAAIACYAAwAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQMAAAAAAAAAAAABEAAAAAAAAAAAAAAAUGZFZABAACHwAAHN / 80ALgHNADOAAAABAAAAAAAAAgAAAAAAAAAAqgAAAgAAAAIAAAACAAAAAgAAAAAAAAAAAAADAAAAAwAAABwAAQAAAAAATAADAAEAAAAcAAQAMAAAAAgACAACAAAAAAAk8AD // // wAAAAAAIfAA 8AAP / iEAcAAQAAAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAwQFBgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMgBkAIoAxgDUAAAAAgAA / 9EB / AHNABUAHQAABRYPAQYvASYnBiMiJjQ2MhYVFAcWFyYiBhQWMjY0AfsLCxYLC5oDATM + UHBwoHAlAwNsaktLaksCCwsWCwuaAwMlcKBwcFA + MwED9UtqS0tqAAAAAAEAAP / OAgABzQAeAAAlIiYjDgQHBicuAic0PgE3NjcuATU0NjIWFAYBAAYZBQIdCxgVDCAFAgcFAQIFAiESO0aW1JaWDQ0BGQkSCwQNBgIIBgEBAQICDTgeZz1dg4O5hAAAAAABAAD / 7QIAAa0AFgAAASIHIwcnMCMxJiMiBhQfARYy PwE2NCYBcDcpAQ8PASo2PFQqvwoaCr8qVAGtKRQTKlR4KsEJCcEqeFQAAAAAAwAAAC0CAAFtABUAHQAlAAAAIg4CDwEeBDI + Aj8BLgMGIiY0NjIWFCYiBhQWMjY0AShQUT0xDQwFETc4U1BRPTENDAURNzhTUDg4UDhFNiUlNiUBbSEvLxARBxU3KiMhLy8QEQcVNyrdOFA4OFBoJTYlJTYAAAAAAQAA / 80CAAHNAAIAABEBIQIA / gABzf4AAAAAAAAADACWAAEAAAAAAAEACgAWAAEAAAAAAAIABwAxAAEAAAAAAAMAJgCHAAEAAAAAAAQACgDEAAEAAAAAAAUACwDnAAEAAAAAAAYACgEJAAMAAQQJAAEAFAAAAAMAAQQJAAIADgAhAAMAAQQJAAMATAA5AAMAAQQJAAQAFACuAAMAAQQJAAUAFgDPAAMAAQQJAAYAFADzAGMAdQBzAHQAbwBtAEYAbwBuAHQAAGN1c3RvbUZvbnQAAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAAEYAbwBuAHQARgBvAHIAZwBlACAAMgAuADAAIAA6ACAAYwB1AHMAdABvAG0ARgBvAG4AdAAgADoAIAAxADQALQA5AC0AMgAwADEAMgAARm9udEZvcmdlIDIuMCA6IGN1c3RvbUZvbnQgOiAxNC05LTIwMTIAAGMAdQBzAHQAbwBtAEYAbwBuAHQAAGN1c3RvbUZvbnQAAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAAVmVyc2lvbiAxLjAAAGMAdQBzAHQAbwBtAEYAbwBuAHQAAGN1c3RvbUZvbnQAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAQACAAQABQAGAAcBAgd1bmlGMDAwAAAAAAAB // == 8AAgABAAAADgAAABgAAAAAAAIAAQADAAcAAQAEAAAAAgAAAAAAAQAAAADJiW8xAAAAAMx4XYAAAAAAzHhdgA ) formato ('truetype'); fuente-peso: normal; estilo de letra: normal;Estas pocas líneas de CSS ahora tendrán su Fuente de Icono personalizada lista para funcionar en todos los navegadores modernos. Si desea admitir el modo de compatibilidad de IE9 y las versiones anteriores de IE, deberá agregar una regla adicional (tenga en cuenta que esto buscará recursos adicionales, pero solo cuando el Agente de usuario lo solicite).
@ font-face font-family: 'customFont'; src: url ('… /fonts/customFont.eot'); src: url ('… /fonts/customFont.eot?#iefix') formato ('embedded-opentype'); fuente-peso: normal; estilo de letra: normal;¿Curioso acerca de estas correcciones de IE? Paul Irish tiene una excelente publicación de blog sobre una sintaxis a prueba de balas @ font-face.
Ahora que hemos creado nuestras reglas, hay dos formas en que podemos incluir la fuente personalizada en nuestro diseño, las cuales usan entidades de Unicode para hacer referencia al icono correspondiente. Lo mejor de la aplicación IcoMoon es que todo el CSS ya se ha generado para nosotros, listo para ser copiado en nuestra hoja de estilo principal, dependiendo del enfoque que decidamos usar (o ambos).
Usando la fuente de su icono: Enfoque del icono de datos
La primera técnica para usar la fuente de su icono es el enfoque del icono de datos, que mantiene nuestro marcado agradable y limpio y es fácil de leer para la pantalla.
Digamos que queremos incluir un icono de comentario (en este caso con el valor Unicode de
& # x22;) dentro de un elemento span en nuestra página.Nuestro HTML:
El CSS relevante (tomado directamente de la hoja de estilo IcoMoon descargada) es el siguiente (los comentarios son míos).
/ * A: antes de que se cree un pseudo elemento para cualquier elemento HTML con el atributo del icono de datos * / [icono de datos]: antes de que / * la familia de fuentes se establezca en nuestra regla @ font-face * / font-family : 'Fuente personalizada'; / * El contenido para el pseudo elemento se obtiene del icono de datos HTML (por ejemplo, ") * / content: attr (icono de datos); / * Instrucciones adicionales para lectores de pantalla (no reconocidos universalmente) * / speak: none; / * Estilo de fuente universal * / font-weight: normal; -webkit-font-smoothing: antialiased; span / * Estilo de fuente específico * / font-size: 2em; color: # A2A2A2; relleno: 2px 5px 2px 5px; margen derecho: 5px;Si bien este enfoque es agradable y simplificado, y evita la acumulación adicional de clases en su marca, puede que no sea la mejor opción para el código de mantenimiento. A menos que su memoria de caracteres Unicode sea tanto enciclopédica como fotográfica, este enfoque no contiene ninguna información dentro del HTML que lo induzca a qué icono se mostrará..
Usando la fuente de su icono: Enfoque de clase adicional
Como un enfoque alternativo, puede elegir usar clases de CSS adicionales en su HTML para mostrar el icono. Esto tiene la ventaja de ingresar información semántica y descriptiva directamente en su marca, lo que mejora la legibilidad de su código..
Para usar este enfoque, agregue un elemento en su HTML con un nombre de clase como lo proporciona la hoja de estilos IcoMoon:
Nuestro CSS se verá así (los comentarios son míos).
/ * La regla se aplicará a cualquier elemento HTML con una clase de 'icon- * l y establece un pseudo-elemento al elemento * / [class ^ = "icon -"]: antes, [class * = "icon- "]: antes de / * Familia de fuentes se establece el nombre establecido en nuestra regla de font-face * / font-family: 'personalizado'; estilo de letra: normal; hablar: ninguno; fuente-peso: normal; -webkit-font-smoothing: suavizado; .icon-comment: before / * El contenido para el pseudo elemento se establece en unicode escapado (es decir, "se convierte en '/ 22') * / content:" \ 22 ";Ahora, con un poco de estilo adicional, puede implementar fácilmente fuentes de iconos de gran apariencia en su próximo proyecto, sin atascar su árbol de recursos con recursos adicionales.
Conclusión
Gracias por tomarse el tiempo de explorar algunas de las maneras en que puede aprovechar al máximo los URI de datos para su próximo proyecto.
Es importante recordar que los URI de datos no son siempre la mejor solucion. Si bien el uso de CSS3, SVG e Icon Fonts tiene algunos beneficios muy convincentes sobre el uso de imágenes (especialmente en el ámbito del diseño responsivo), los beneficios de codificar sus imágenes en base64 son más variados. Al considerar si usar URI de datos en su próximo proyecto, sopese los tiempos de carga y las solicitudes HTTP reducidas con capacidad de mantenimiento de código; simplemente considere los URI de datos como otra herramienta en su caja de herramientas!
¿Disfrutó de este tutorial y ahora está ansioso por comenzar a utilizar estas técnicas de una manera más práctica? Esté atento a los nuevos contenidos premium pronto, en los que utilizaremos URI de datos de forma extensa para crear un diseño de interfaz de usuario ligero. Mira este espacio!
¿Cómo ha utilizado las fuentes de iconos y las URI de datos en sus proyectos? Suscríbete y deja un comentario.!
Recursos adicionales
