html - insertar - pack de iconos png

iconos de fuente vs iconos png

Question

Utilizo iconos para las etiquetas, pero vi este sitio web: www.fontello.com donde puede crear fuentes con iconos.

Pero cuando creo una fuente con iconos, es más grande que todos mis iconos, porque hay svg, ttf, woff y eot, todas esas 4 fuentes son más grandes que todos los iconos png.

@font-face {
  font-family: ''fonticons'';
  src: url("../font/fonticons.eot");
  src: url("../font/fonticons.eot?#iefix") format(''embedded-opentype''), url("../font/fonticons.woff") format(''woff''), url("../font/fonticons.ttf") format(''truetype''), url("../font/fonticons.svg#fonticons") format(''svg'');
  font-weight: normal;
  font-style: normal;
}

Todos mis íconos están optando por imágenes .png comprimidas.

Funciona esto en todos los navegadores?

Entonces, ¿por qué debería usar este método de fuente?

¿Y alguna alternativa para fontello.com ?

Answer 1

Este práctico sitio muestra que las características de CSS son compatibles con cada navegador. En este caso, <IE9 puede darte problemas.

http://caniuse.com/#feat=fontface

Personalmente, prefiero usar sprites de CSS para los elementos de mi UI para garantizar la coherencia de los navegadores acroass.

Answer 2

Descargo de responsabilidad rápido: he estado trabajando en una biblioteca de fuentes de iconos llamada pictonic .

cuando creo una fuente con iconos, es más grande que todos mis iconos, porque hay svg, ttf, woff y eot, todas esas 4 fuentes son más grandes que todos los iconos png.

en términos de tamaño de archivo, es posible que encuentre la siguiente comparación de pngs vs icon fonts interesting:

http://blog.pictonic.co/post/32260064131/icon-fonts-could-speed-up-your-page-loading-time-by-14

debe verificar que los íconos se conviertan a formato vectorial mediante el rastreo. dado que muchos formatos vectoriales como svg también admiten mapas de bits, si sus iconos se importan como mapas de bits, no experimentará ninguna de las ventajas relacionadas con el tamaño de archivo de convertirlos en una fuente vectorizada.

en mi experiencia, incluso a 16x16px, una fuente ttf debería ser mucho más pequeña que el tamaño de archivo combinado de aproximadamente 20 iconos. a medida que aumenta el tamaño de la imagen, esta brecha se amplía a medida que los vectores tienen el mismo tamaño de archivo en cada escala.

Funciona esto en todos los navegadores?

depende de qué métodos uses pictonic se prueba en todos los navegadores de nuevo a ie5 pero requiere un poco de js para las antiguas versiones de ie (5-7). Entonces, en teoría, es posible obtener fuentes de íconos que funcionen en todos los navegadores.

Entonces, ¿por qué debería usar este método de fuente?

las fuentes de los iconos son realmente versátiles, puedes manipularlas con CSS de forma que los iconos de las imágenes parezcan inflexibles. Aquí hay una demostración: https://pictonic.co/#main-demo

así que, por ejemplo, puedes experimentar con tu diseño y cambiar el color, el tamaño y la sombra de todos tus íconos con solo unas pocas líneas de CSS. esto es bastante útil.

Además, dado que se basan en vectores, están listos para retina, por lo que se ven increíbles en pantallas de retina como las pantallas de retina de manzana (retina macbook, iphone 4+, ipad3 +), mientras que las imágenes requieren consultas de medios para intercambiar en doble versiones de resolución que ocupan aún más espacio.

Creo que son bastante eficientes si usa el formato correcto.

¿Y alguna alternativa para fontello.com?

pictonic aún no tiene la capacidad de importar íconos generados por el usuario, pero le permite generar fuentes de íconos personalizados de más de 2000 íconos deslumbrantes, incluyendo un conjunto de iconos bastante grande. y siempre estamos agregando más, así que mira

Answer 3

Otra alternativa para usted podría ser: http://fontastic.me/

;)

Answer 4

Buena pregunta. Actualmente estoy experimentando con Fontello y los iconos de fuentes para ver si es un enfoque viable.

Es un enfoque viable. Utilicé íconos basados ​​en fuentes en aplicaciones de producción y probé en casi todos los navegadores / dispositivos populares (Fontello tiene ejemplos que incluso soportan IE7). Solo tengo cosas buenas que decir sobre Fontello, pero puede usar cualquier herramienta que desee.

Los iconos de fuente pueden escalar a cualquier dimensión (proporcional) deseada y trabajar en cualquier densidad de píxeles. Si observa su sitio en una pantalla de alta densidad (como Apple Retina y cada vez es más popular en todos los dispositivos móviles), existe una enorme diferencia entre un formato de mapa de bits (como PNG) y un formato vectorial.

Puede definir todos los iconos en un solo archivo (como un sprite), pero a diferencia de un sprite no tiene que preocuparse por las dimensiones de los elementos dentro del archivo. Además, puede escalar cada elemento independientemente de otros elementos en el archivo.

Consideraciones

• Tendrá que administrar el archivo de fuente. Estos no son legibles por humanos, por lo que deberá usar una herramienta.
• Hay selectores de CSS asociados para mantener (generalmente un selector por icono).
• A veces se necesita un marcado adicional para lograr un efecto / solución particular de un problema.
• Problemas de tamaño menor; no todos los íconos llenan un casillero de manera uniforme y están sujetos a la idiosincrasia de representación de texto de cada navegador.

Estas consideraciones son probablemente menos trabajo que usar sprites o crear PNG / SVG para cada ícono.

Tenga en cuenta que un icono de fuente no contiene ninguna información de color. Sin embargo, puedes diseñarlo como lo harías con cualquier otro texto. Esto incluye el uso de colores ARGB y la aplicación de efectos CSS más avanzados como se señala en los comentarios.

En cuanto al tamaño del archivo, tenga en cuenta que un navegador casi nunca descargará los 4 formatos de fuente. Hecho correctamente, generalmente solo se descargará uno.

Un enfoque alternativo es usar SVG (no fuentes SVG) para iconos. El soporte del navegador para SVG es menor que el de @font-face , por lo que necesitará un respaldo de ráster.

Answer 5

1. Con los íconos de fuentes, incluye el archivo de fuentes que son de la extensión .woff, .ttf, .eot, .svg y el archivo css para esa fuente. Tienen menos tamaño y se puede cambiar el tamaño del icono cuando sea necesario, con los archivos de imagen png / jpeg distorsiona el archivo de imagen, mientras que los iconos de fuente se escalan correctamente.
2. Con múltiples imágenes, debe realizar varias solicitudes HTTP al servidor, lo que se puede evitar aquí.
3. Los archivos de icono de fuente también están disponibles en cdn, por lo tanto, no es necesario que lo solicite al servidor si algún sitio web anterior ya lo ha almacenado en caché en su navegador.
4. Con fontello puedes personalizar y usar solo los iconos que se requieren.
5. También hay una versión actual de fontawesome 4.2 donde puedes obtener los íconos de las fuentes, si necesitas soporte para versiones anteriores de los navegadores puedes optar por la versión anterior no 3.
6. También puede personalizarlo usando LESS / SASS.
7. Otra opción es usar sprites css para optimizarlo usando métodos tradicionales o usando servicios en línea.
8. Usarlo en html es bastante simple, una vez que se asegura de que los archivos css y de fuente se carguen en el navegador solo necesita agregar el nombre de clase al elemento html y está listo, puede personalizar el tamaño de la fuente, el color , color de fondo según su deseo.

Fuente impresionante

Fontello

Puedes encontrar el CDN aquí