En guide till bättre och skarpare UI-ikoner med webbfonter

Om du är bekant med att använda bitmappsformat (som PNG och GIF) för att visa ikoner på en webbplats, skulle du också vara bekant med sina brister. Först och främst, beroende på dimensionen och hur mycket färginformation som ikonen har, kan en ikonfilstorlek vara mycket stor.

Om vi har för många ikoner för att lägga in en webbplats, kommer det också att kunna sakta ner webbplatsens prestanda, eftersom många HTTP-förfrågningar måste utföras av webbläsaren. Även om det här problemet kan lösas med CSS-sprite, är filstorleken fortfarande stor.

Bitmap-ikonen har också brister i flexibilitet och skalbarhet; låt oss säga att vi måste förstora eller zooma ikonen till en viss nivå, eller se den genom en mycket hög skärmupplösning, till exempel på näthinnans display. ikonen kommer definitivt visa sig suddig.

Tja, om du tar några av dem som är viktiga med hänsyn till det, måste du förmodligen använda ikonfonter.

Använda ikonfonter

En ikon typsnitt är en uppsättning ikoner packade i ett webbfont som senare kan inbäddas på en webbplats med @ Font-face. Som Chris på CSS-trick har påpekat, det finns många fördelar med att använda teckensnitt över bild för att leverera ikoner;

Teckensnitt är ett vektorbaserat objekt som enligt sin natur är upplösningsoberoende, så ikonen kommer att förbli så skarp i olika skärmupplösningar, inklusive mycket höga skärmupplösningar (som näthinnivå).
Det är också skalbar, vilket gör att det kan förstoras på många nivåer utan att förlora kvalitet och precision.
Eftersom ikonen är i princip en typsnitt, Vi kan också styra färgen, genomskinligheten, textskuggan och även ändra storlek på det genom stilarket
Vi kan också animera ikonen med CSS3.
Ikonen heter med @ Font-face regel som har fått stöd från så tidigt som Internet Explorer 4 (med .eot).
Mindre HTTP-förfrågan och lägre filstorlek.

Här är några av de bästa fria ikonerna som vi kan hitta:

Typsnitt Awesome
IcoMoon
Sociala medier ikoner
Zurb Foundation-ikoner

Se till att du har kontrollerat och följt licensen innan du lagt in den på din webbplats för att hedra författarens tid och hårt arbete.

@ font-face-regeln

Som vi nämnde är ikonerna inbäddade med @ Font-face styra genom stilarket som definierar nytt typsnittsfamilj. I följande exempel använder vi webbsymbolerna;

 @ font-face font-family: 'WebSymbolsRegular'; src: url ('typsnitt / webbsymboler-vanlig-webfont.eot'); src: url ('fonts / websymbols-regular-webfont.eot? #iefix') format ('embedded-opentype'), url ('fonts / websymbols-regular-webfont.woff') format format ("typsnitt / webbsymboler-regular-webfont.ttf") format ("truetype"), url ('fonts / websymbols-regular-webfont.svg # WebSymbolsRegular') format ('svg');

Sedan, i HTML-dokumentet behöver vi bara lägga till de tecken som representerar ikonen, och snarare än att tillämpa det nya typsnittsfamilj allmänt i dokumentet kan vi göra mer specifikt genom att lägga till en extra klass till vissa element som ikonen behöver återges till, som så;

  h
 jag
 j
 en
 jag

Tillbaka till stilarket definierar vi det nya typsnittsfamilj för den klassen som vi just har lagt till:

 .ikon-font font-family: WebSymbolsRegular; typsnittstorlek: 12pt;

Demo @ font-face

Använda Pseudo-element

Om ikonen behandlas som sidelement kan vi även leverera ikonen genom pseudo-elementet. Om vi antar att vår HTML-uppställning är som följer:

  Svar
 Svara alla
 Framåt
 Bilaga
 Bild

Vi kan göra det här på stilarken:

 ul.icon-font.pseudo li: före font-family: WebSymbolsRegular; marginal-höger: 5px;  ul.icon-font.pseudo li: nth-child (1): före innehåll: "h";  ul.icon-font.pseudo li: nth-child (2): före innehåll: "jag";  ul.icon-font.pseudo li: nth-child (3): före innehåll: "j";  ul.icon-font.pseudo li: nth-child (4): före innehåll: "A";  ul.icon-font.pseudo li: nth-child (5): före innehåll: "I";

Demo Pseudo-element

Privat användning Unicode

Det finns en omständighet där ikonerna inte var inbäddade i bokstäverna (A, B, C, D osv.), Men inbäddades i Unicode Private Use för att minimera konflikter mellan tecknen. Liksom i FontAwesome har författaren lyckligtvis lagt till alla teckenkod i stilarket, vilket ser ut så här;

 .ikonglas: före innehåll: "\ f0c6";

Men när vi behöver bädda in ikonen direkt i HTML, något som följande kod \ f0c6 kommer inte att göra den spetsiga ikonen, eftersom det inte är ett giltigt tecken som kodas i HTML.

HTML behöver en numerisk referensmarkering att göra specialtecken. Vi har behandlat det lite i vår tidigare handledning om CSS3 Knappar; denna karaktär är prefixad med en kombination av ett ampersand-tecken (&), ett hash-tecken (#) och en x följt av det hexadecimala talet som representerar karaktären.

Till exempel, f0c6 är ett hexadecimalt tal, så numerisk teckenreferens i HTML kommer att vara & # Xf0c6;, i FontAwesome den koden kommer att visa ikon för pappersklipp, såhär;

Demo Unicode

Teckensnitt Subsetting

Ikonerna i samlingen kanske inte alla behövs. I det fallet kan vi släppa de oanvända tecknen genom att sätta in det teckensnitt som ska också resultera i lägre fontfilstorlekar. Lyckligtvis finns det ett praktiskt verktyg från FontSquirrel för att enkelt göra detta jobb, @ font-face generator.

När du har gått till den sidan och lagt till teckensnittet väljer du Expert. Du kommer att se några fler alternativ; Välj Anpassad Subsetting.

I det här exemplet använder vi Sociolico-teckensnittet för att visa sociala medierikoner på vår hemsida, men ikonerna som vi behöver är endast Dribble, Facebook och Twitter, vilka respektive representeras av dessa tecken; d, f och t. Så sätt dessa tecken i fältet Singeltecken som följer:

Och vi är klara. Nu kan vi ladda ner teckensnittet och i mitt fall har teckensnittstormen visat sig vara endast 3Kb till 5Kb. Kom också ihåg att de enda tecknen som kommer att återges till en ikon är bara d, f och t, medan de andra tecknen kommer att göra att det bara är en vanlig bokstav.

Slutlig tanke

En sak som vi inte kan göra på denna övning är att lägga till mycket detaljerade effekter som detta på ikonen.

Om vår övergripande design inte kräver detaljer på den nivån kan det här sättet vara ett bättre sätt att betjäna ikoner på webbplatser. Den har flexibilitet, skalbarhet, är näthinnan klar med en mycket liten filstorlek, vad mer kan vi begära?

Slutligen, om du vill dyka djupare in i detta ämne, nedan har vi sammanställt några användbara referenser, liksom vår demo och källkod för nedladdning.

Så här skapar du din egen ikon Webfont - WebDesignerDepot.com
Visar teckensnitt och data attribut - 24Ways
Privat användning Unicode - Wikipedia

demo
Hämta källa