En guide til bedre og skarpere UI-ikoner med webfonter

Hvis du er kjent med bruk av bitmap-bildeformater (som PNG og GIF) for å vise ikoner på et nettsted, vil du også være kjent med sine mangler. Først av alt, avhengig av dimensjonen og hvor mange fargedata som ikonet har, kan en filstørrelse for en fil være svært stor.

Hvis vi har for mange ikoner til å sette inn et nettsted, vil det også potensielt redusere nettsidenes ytelse, da mange HTTP-forespørsler må utføres av nettleseren. Selv om dette problemet kan løses med CSS sprite, er filstørrelsen fortsatt stor.

Bitmap-ikonet har også mangler i fleksibilitet og skalerbarhet; la oss si at vi må forstørre eller zoome ikonet til et visst nivå, eller se det gjennom en svært høy skjermoppløsning som for eksempel på netthinnen. ikonet vil definitivt vise seg å være uskarpt.

Vel, hvis du tar noen av disse sakene i betraktning, må du sannsynligvis bruke ikonfonter.

Bruke ikonfonter

en ikon skrifttype er et sett med ikoner pakket i en web skrifttype som senere kan legges inn på et nettsted ved hjelp av @ Font-face. Som Chris på CSS-trick har påpekt, er det mange fordeler med å bruke skrift over bildet for å levere ikoner;

Font er et vektorbasert objekt som av sin natur er oppløsningsuavhengig, så ikonet vil forbli så skarpt i forskjellige skjermoppløsninger, inkludert svært høye skjermoppløsninger (som retina-nivå).
Den er også skalerbar, slik at den kan forstørres på mange nivåer uten å miste kvalitet og presisjon.
Siden ikonet er i utgangspunktet en skrifttype, Vi kan også kontrollere farge, gjennomsiktighet, tekstskygge og til og med endre størrelsen på det gjennom stilarket
Vi kan også animere ikonet med CSS3.
Ikonet kalles med @ Font-face regel som har blitt støttet fra så tidlig som Internet Explorer 4 (med .eot).
Mindre HTTP-forespørsel og lavere filstørrelse.

Her er noen av de beste gratis ikonfonter som vi finner:

Font Awesome
IcoMoon
Sosiale medier Ikoner
Zurb Foundation Ikoner

Pass på at du har sjekket og fulgt lisensen før du legger den inn på nettstedet ditt for å ære forfatterens tid og hardt arbeid.

@ font-face-regelen

Som vi har nevnt, er ikonene innebygd med @ Font-face styre gjennom stilarket som definerer nytt font-family. I det følgende eksemplet vil vi bruke websymbolene;

 @ font-face font-family: 'WebSymbolsRegular'; src: url ('skrifter / websymboler-vanlig-webfont.eot'); src: url ('fonter / websymbols-regular-webfont.eot? #iefix') format ('embedded-opentype'), url ('fonter / websymbols-regular-webfont.woff') format format ('skrifttyper / websymboler-regular-webfont.ttf') format ('truetype'), format ('svg') for url ('fonter / websymboler-regular-webfont.svg # WebSymbolsRegular');

Da, i HTML-dokumentet, trenger vi bare å legge til tegnene som representerer ikonet, og heller enn å bruke det nye font-family Det er mye i dokumentet, vi kan gjøre mer spesifikt ved å legge til en ekstra klasse for enkelte elementer som ikonet må gjengis inn i, slik som det;

  h
 Jeg
 j
 EN
 Jeg

Tilbake til stilarket definerer vi det nye font-family for den klassen som vi nettopp har lagt til:

 .ikonfont font-family: WebSymbolsRegular; skriftstørrelse: 12pt;

Demo @ font-face

Bruke Pseudo-elementer

Hvis ikonet er behandlet som sideelementet, kan vi også levere ikonet gjennom pseudo-element. Forutsatt at HTML-oppslaget vårt er som følger:

  Svare
 Svar alle
 Framover
 Vedlegg
 Bilde

Vi kan gjøre det på denne måten i stilarket:

 ul.icon-font.pseudo li: før font-family: WebSymbolsRegular; margin-høyre: 5px;  ul.icon-font.pseudo li: nth-child (1): før innhold: "h";  ul.icon-font.pseudo li: nth-child (2): før innhold: "jeg";  ul.icon-font.pseudo li: nth-child (3): før innhold: "j";  ul.icon-font.pseudo li: nth-child (4): før innhold: "A";  ul.icon-font.pseudo li: nth-child (5): før innhold: "I";

Demo Pseudo-element

Privat bruk Unicode

Det er en situasjon der ikonene ikke var innebygd i bokstaver (A, B, C, D, etc.), men ble innebygd i Unicode Private Use for å minimere sammenstøt mellom tegnene. Som i FontAwesome har forfatteren heldigvis lagt til alle tegnkodene i stilarket, som ser ut som dette;

 .ikon-glass: før innhold: "\ f0c6";

Men når vi trenger å legge inn ikonet direkte i HTML, noe som følgende kode \ f0c6 vil ikke gjengi det spisse ikonet, da det ikke er et gyldig tegn kodet i HTML.

HTML trenger en numerisk referanse markup å gjengi spesialtegn. Vi har dekket litt om det i vår tidligere veiledning på CSS3 Knapper; denne karakteren er prefixed med en kombinasjon av et forsterkende tegn (&), et hash-tegn (#) og en x deretter etterfulgt av det heksadesimale tall som representerer tegnet.

For eksempel, f0c6 er et heksadesimalt tall, så numerisk tegnreferanse i HTML vil være & # Xf0c6;, i FontAwesome den koden vil vise ikon for papirklipp, som så;

Demo Unicode

Font Subsetting

Symbolene i samlingen er kanskje ikke alle nødvendige. I så fall kan vi slippe de ubrukte tegnene ved å underkaste skrifttypen som vil også resulterer i lavere skriftfilstørrelser. Heldigvis er det et praktisk verktøy fra FontSquirrel for å gjøre denne jobben lett, @ font-face generator.

Etter at du har gått til siden og lagt til fonten, velger du Ekspert. Du vil se flere alternativer; å velge Tilpasset subsetting.

I dette eksemplet bruker vi sosioliskfonten til å vise sosiale medierikoner på nettstedet vårt, men ikonene vi trenger er bare Dribble, Facebook og Twitter som henholdsvis er representert av disse tegnene; d, f og t. Så, sett disse tegnene i inntastingsfeltet Single Characters som følger:

Og vi er ferdige. Nå kan vi laste ned skrifttypen, og i mitt tilfelle har skriftstørrelsen vist seg å være bare 3Kb til 5Kb. Husk også at de eneste tegnene som vil bli gjengitt til et ikon er bare d, f og t, mens de andre tegnene kommer til å bare være et vanlig brev.

Endelig tanke

En ting vi ikke kan gjøre på denne praksisen, er å legge til svært detaljerte effekter som dette på ikonet.

Men hvis vår generelle design ikke krever detaljer på det nivået, kan denne tilnærmingen være en bedre måte å betjene ikoner på nettsteder. Den har fleksibilitet, skalerbarhet, er netthinnen klar med en svært liten filstørrelse, hva mer kan vi be om?

Til slutt, hvis du vil dykke dypere inn i dette emnet, har vi satt sammen noen nyttige referanser, så vel som vår demo og kildekode for nedlasting.

Hvordan lage ditt eget ikon Webfont - WebDesignerDepot.com
Viser fonter og datadata - 24 veier
Privat bruk Unicode - Wikipedia

Demo
Last ned kilde