icone font vs icone png

Question

uso icone per le etichette, ma ho visto questo sito Web: www.fontello.com dove è possibile creare caratteri con icone.

Ma quando creo font con icone è più grande di tutte le mie icone, perché ci sono svg, ttf, woff ed eot, tutti i 4 caratteri sono più grandi di tutte le icone 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; 
} 

Tutte le mie icone sono optipng compresse .png immagini.

Funziona su tutti i browser?

Quindi perché dovrei usare questo metodo di font?

E qualsiasi alternativa per fontello.com?

Answer 1

Buona domanda. Attualmente sto sperimentando con Fontello e le icone dei caratteri per vedere se è un approccio praticabile.

È un approccio praticabile. Ho utilizzato icone basate su font nelle applicazioni di produzione e testato su quasi tutti i browser/dispositivi più diffusi (Fontello ha esempi che supportano anche IE7). Ho solo cose positive da dire su Fontello, ma puoi usare qualsiasi strumento tu voglia.

Le icone dei caratteri possono essere ridimensionate in base alle dimensioni (proporzionate) desiderate e funzionano su qualsiasi densità di pixel. Se guardi il tuo sito su un display ad alta densità (come Apple Retina, e sempre più popolare su tutti i dispositivi mobili) c'è un'enorme differenza tra un formato raster (come PNG) e un formato vettoriale.

È possibile definire tutte le icone in un singolo file (come uno sprite), ma a differenza di uno sprite non è necessario preoccuparsi delle dimensioni degli elementi all'interno del file. Inoltre, puoi ridimensionare ogni elemento indipendentemente dagli altri elementi nel file.

Considerazioni

• Sarà necessario per gestire il file di font. Questi non sono leggibili dall'uomo, quindi dovrai usare uno strumento.
• Ci sono selettori CSS associati da mantenere (di solito un selettore per icona).
• Il markup extra è occasionalmente necessario per ottenere un particolare effetto/risolvere un problema.
• Problemi di dimensionamento minori; non tutte le icone riempiono una scatola in modo uniforme e sono soggette alle idiosincrasie di rendering del testo di ciascun browser.

Queste considerazioni sono probabilmente meno utili rispetto all'utilizzo di sprite o alla creazione di entrambi PNG/SVG per ogni icona.

Ricordare che l'icona di un carattere non contiene alcuna informazione sul colore. Tuttavia, puoi modificarlo come faresti con qualsiasi altro testo.Ciò include l'utilizzo dei colori ARGB e l'applicazione di effetti CSS più avanzati, come indicato nei commenti.

Per quanto riguarda le dimensioni del file, tieni presente che un browser non scarica quasi mai tutti i 4 formati di font. Fatto correttamente, di solito ne verrà scaricato solo uno.

Un approccio alternativo consiste nell'utilizzare gli SVG (non i font SVG) per le icone. Il supporto browser per SVG è inferiore a quello di @font-face, quindi è necessario un fallback raster.

Answer 2

Questo pratico sito mostra le funzionalità CSS supportate da quale browser. In questo caso, < IE9 può darti dei problemi.

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

Personalmente, preferisco usare sprite CSS per i miei elementi dell'interfaccia utente per garantire la coerenza acroass browser.

Answer 3

disclaimer rapido: ho lavorato su una libreria di font di icone denominata pictonic.

quando creo carattere con le icone che è più grande di tutte le mie icone, perché c'è svg, TTF, WOFF e EOT, tutto ciò che 4 i font sono più grandi che tutte le icone PNG.

in termini di dimensione del file, si potrebbe trovare il seguente confronto dei PNG vs icona Font interessante:

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

è necessario verificare che le icone vengono convertiti in formato vettoriale con tracciamento. dal momento che molti formati vettoriali come svg supportano anche bitmap, se le tue icone vengono importate come bitmap non sperimenterai alcuno dei benefici relativi alla dimensione dei file convertendoli in un font vettoriale.

nella mia esperienza, anche a 16x16px, un font ttf dovrebbe essere molto più piccolo della dimensione combinata di 20 icone. man mano che la dimensione dell'immagine aumenta, questo spazio si allarga man mano che i vettori hanno la stessa dimensione di file.

Funziona su tutti i browser?

dipende dai metodi che si utilizzano. pictonic è testato su tutti i browser fino a ie5 ma richiede un po 'di js per vecchie versioni ie (5-7). Quindi in teoria è possibile ottenere caratteri di icone funzionanti in tutti i browser.

Quindi perché dovrei usare questo metodo di font?

I caratteri di icona sono davvero versatili, è possibile manipolarli con css in modi che rendono le icone di immagini piuttosto rigide. Ecco una demo: https://pictonic.co/#main-demo

così, ad esempio, puoi sperimentare con il tuo layout e cambiare il colore, la dimensione e l'ombra di tutte le tue icone con solo poche righe di css. questo è abbastanza utile.

inoltre, dato che sono basati su vettori, sono retina già pronti per l'uso, quindi sono fantastici sugli schermi retina come quelli sugli schermi retina mela (retina macbook, iphone 4+, ipad3 +), mentre le immagini richiedono query multimediali per scambiare versioni a doppia risoluzione che occupano ancora più spazio.

Credo che siano abbastanza efficienti se si utilizza il formato giusto.

E qualsiasi alternativa per fontello.com?

pictonic non ha ancora la possibilità di importare icone generate dall'utente, ma consente di generare caratteri di icone personalizzati da oltre 2000 icone sbalorditive, tra cui un set di icone libero piuttosto grande. e siamo sempre l'aggiunta di più, in modo da fare have a look

Answer 4

Un'altra alternativa per voi potrebbe essere: http://fontastic.me/

;)

Answer 5

1. Con le icone dei caratteri si includono file di font che sono dell'estensione .woff , .ttf, .eot, .svg e il file css per quel tipo di carattere. Sono di dimensioni inferiori e puoi modificare la dimensione dell'icona quando richiesto, con i file immagine png/jpeg distorce il file immagine, dove le icone dei caratteri vengono ridimensionate correttamente.
2. Con più immagini è necessario effettuare più richieste http sul server, cosa che può essere evitata qui.
3. I file di icona del carattere sono anche disponibili su cdn, quindi non è necessario richiederlo dal server se qualche sito Web precedente lo ha già memorizzato nella cache nel browser.
4. Con fontello è possibile personalizzare e utilizzare solo le icone necessarie.
5. È inoltre disponibile la versione 4.2 di fontawesome dove è possibile ottenere le icone dei caratteri, se è necessario il supporto per la versione precedente dei browser è possibile optare per la versione precedente n. 3.
6. È inoltre possibile personalizzarlo utilizzando LESS/SASS.
7. Un'altra opzione è l'uso di sprite css che è possibile ottimizzare utilizzando metodi tradizionali o utilizzando i servizi online.
8. Usarlo in html è piuttosto semplice, una volta che si è sicuri che i file css e i file dei font siano caricati nel browser, è sufficiente aggiungere il nome della classe all'elemento html e si è pronti, è possibile personalizzare il carattere dimensione, colore, colore di sfondo secondo il vostro desiderio.

Font awesome

Fontello

È possibile trovare il CDN here