Due dei principali problemi, quando si sviluppa una web app o si utilizza un responsive web design, sono la velocità di caricamento delle pagine e la scalabilità delle immagini e delle grafiche.
Le immagini 'rubano' sempre molta banda e nell'utilizzare media queries per creare per esempio la versione mobile di un sito web, si ha spesso la necessità di ridimensionare icone e altri piccoli elementi grafici allo scalare del layout.
La tecnica degli sprite CSS risolve in parte il 1° problema ma è non così veloce da implementare nei CSS e non è scalabile perchè si tratta comunque di immagini bitmap.
Trattandosi comunque di un'immagine bitmap, è possibile modificare gli sprites solo rieditando prima il file che contiene tutte le immagini con un programma di grafica.
Perchè usare e dove trovare Icon Fonts
Un'altra tecnica, che si sta diffondendo a macchia d'olio, è utilizzare un web font che contenga icone al posto di caratteri tipografici: un Icon Font.
Un web font è vettoriale, è scalabile a piacere e gode di un'ottima accessibilità e compatibilità browser. Un'icon font ha le stesse caratteristiche e può essere embeddato in una pagina web allo stesso modo, cioè usando la direttiva @font-face.
Esistono molte raccolte di icon font già pronte all'uso, a pagamento e free. Chi già conosce Font Squirrel per il suo generatore, può fare qualche test usando subito un loro icon font che si chiama 'Modern Pictograms' e che contiene un icon font free in formato OTF convertibile da subito in un @font-face Kit pronto all'uso:
Ecco il contenuto del foglio di stile incluso nel kit:
@font-face {
font-family: 'ModernPictogramsNormal';
src: url('modernpics-webfont.eot');
src: url('modernpics-webfont.eot?#iefix') format('embedded-opentype'),
url('modernpics-webfont.woff') format('woff'),
url('modernpics-webfont.ttf') format('truetype'),
url('modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
font-weight: normal;
font-style: normal;
}La procedura da seguire
Un icon font è composto da un set predefinito di icone 'mappate' ognuna con un carattere dell'alfabeto. Nel nostro caso infatti, su Font Squirrel è presente anche una mappa dei caratteri dalla quale si vede facilmente che alla lettera 'F' corrisponde l'icona di Facebook, alla 'P' il pulsante PLAY di un video, alla 'T' un uccellino...e cosi via.
Ecco ad esempio la sintassi HTML/CSS da usare per creare un link a facebook, il markup è piuttosto semplice:
<a href="http://facebook.com">
<span aria-hidden="true" data-icon="l"></span>
facebook
</a>- Lo
<span>serve a racchiudere l'icona che verrà inserita via CSS aria-hidden="true"è una nuova specifica HTML5 che in questo caso serve a fare in modo che uno screen reader legga solamente Facebook e non "F Facebook".data-icon="l"è un'altra nuova specifica HTML5 che ci serve per scegliere l'icona desiderata dalla nostra mappa dei caratteri
Ecco il CSS:
[data-icon]:before {
font-family: 'ModernPictogramsNormal';
content: attr(data-icon);
-webkit-font-smoothing: antialiased;
}Con il pseudo-selettore :before e la proprietà content possiamo generare contenuto via CSS e precederlo al testo vero e proprio del link nell'HTML.
Possiamo stilare il contenuto generato includendo quindi la font-family e assicurarci un'ottima resa su tutti i browser WebKit (Chrome, Safari, Mobile Safari, Android, ecc) grazie a:
-webkit-font-smoothing: antialiased;Ecco un esempio della tecnica appena descritta in azione.
Usare Icon Font è conveniente, veloce, scalabile e scegliendo una font-family di qualità si può arrivare ad un ottimo risultato.
Si possono applicare stili CSS3 alle icone (text-shadow, gradienti, box-shadow e altro ancora) e provare combinazioni grafiche on-the-fly con Firebug senza tornare su Photoshop.
Link utili
