En vejledning til bedre og skarpere brugergrænseflader med webfonte

Hvis du er bekendt med at bruge bitmap billedformater (som PNG og GIF) for at vise ikoner på et websted, så vil du også være bekendt med sine mangler. Først og fremmest, afhængigt af dimensionen og hvor mange farveoplysninger, som ikonet har, kan en ikonfilstørrelse være meget stor.

Hvis vi har for mange ikoner til at sætte ind på et websted, vil det også muligvis bremse hjemmesiden ydeevne, da mange HTTP-anmodninger skal udføres af browseren. Selvom dette problem kan løses med CSS sprite, er filstørrelsen stadig stor.

Bitmap-ikonet har også mangler i fleksibilitet og skalerbarhed; lad os sige, at vi skal forstørre eller zoome ikonet til et bestemt niveau eller se det gennem en meget høj skærmopløsning som f.eks. på nethinden. ikonet vil helt sikkert vise sig sløret.

Tja, hvis du tager nogle af disse spørgsmål i betragtning, skal du sandsynligvis bruge ikon skrifttyper.

Brug ikonfonte

en ikon skrifttype er et sæt ikoner pakket i en web skrifttype, der senere kan indlejres på et websted ved hjælp af @ Font-face. Som Chris på CSS-trick har påpeget, er der mange fordele ved at bruge skrifttype over billede for at levere ikoner;

Skrifttype er et vektorbaseret objekt, som i sin natur er opløsningsuafhængigt, så ikonet forbliver så skarpt i forskellige skærmopløsninger, herunder meget høje skærmopløsninger (som nethindeniveau).
Det er også skalerbart, så det kan forstørres på mange niveauer uden at miste kvalitet og præcision.
Da ikonet er dybest set en skrifttype, Vi kan også kontrollere farven, gennemsigtigheden, tekstskyggen og endda ændre størrelsen på det via stilarket
Vi kan også animere ikonet med CSS3.
Ikonet kaldes med @ Font-face regel, der er blevet støttet fra så tidligt som Internet Explorer 4 (med .eot).
Mindre HTTP-anmodning og lavere filstørrelse.

Her er nogle af de bedste gratis ikon skrifttyper, vi kan finde:

Font Awesome
IcoMoon
Social Media Ikoner
Zurb Foundation Ikoner

Sørg for at du har kontrolleret og fulgt tilladelsen, inden du indlejrede den på din hjemmeside for at ære forfatterens tid og hårdt arbejde.

@ font-face-regel

Som vi har nævnt, er ikonerne indlejret ved hjælp af @ Font-face Regel gennem stilarket, der definerer nyt font-family. I det følgende eksempel bruger vi websymbolerne;

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

Så i HTML-dokumentet behøver vi kun at tilføje de tegn, der repræsenterer ikonet, og i stedet for at anvende det nye font-family bredt i dokumentet kan vi gøre mere specifikt ved at tilføje en ekstra klasse til visse elementer, som ikonet skal indgives til, ligesom det;

  h
 jeg
 j
 EN
 jeg

Tilbage til stilarket definerer vi det nye font-family for den klasse, som vi lige har tilføjet:

 .ikon-skrifttype font-family: WebSymbolsRegular; skrifttypestørrelse: 12pt;

Demo @ font-face

Brug af Pseudo-elementer

Hvis ikonet behandles som sideelementet, kan vi også levere ikonet igennem pseudo-element. Under forudsætning af at vores HTML-opdeling er som følger:

  Svar
 Svar alle
 Frem
 Vedhæftet fil
 Billede

Vi kan gøre det på denne måde i stilarket:

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

Demo Pseudo-element

Privat brug Unicode

Der er en omstændighed, hvor ikonerne ikke blev indlejret i bogstaver (A, B, C, D osv.), Men blev indlejret i Unicode Private Use for at minimere sammenstød mellem tegnene. Ligesom i FontAwesome har forfatteren heldigvis tilføjet alle tegnkoden i stilarket, der ser sådan ud;

 .ikon-glas: før indhold: "\ f0c6";

Men når vi har brug for at indlejre ikonet direkte i HTML'en, så ligner den følgende kode \ f0c6 vil ikke gøre det spidse ikon, da det ikke er et gyldigt tegn kodet i HTML.

HTML har brug for en numerisk reference markup at lave specialtegn. Vi har dækket det lidt i vores tidligere tutorial på CSS3 Buttons; denne karakter er præfikset med en kombination af et ampersand tegn (&), et hash-tegn (#) og an x derefter efterfulgt af det hexadecimale tal, der repræsenterer karakteren.

F.eks f0c6 er et hexadecimalt tal, så den numeriske tegnreference i HTML vil være & # Xf0c6;, i FontAwesome den kode vil vise ikon for papirclips, ligesom;

Demo Unicode

Font Subsetting

Ikonerne i samlingen er muligvis ikke alle nødvendige. I så fald kan vi tabe de ubrugte tegn ved at sætte skrifttypen i stykker, der også vil resulterer i lavere skrifttype filstørrelser. Heldigvis er der et praktisk værktøj fra FontSquirrel til nemt at gøre dette job, @ font-face generator.

Når du har gået til siden og tilføjet skrifttypen, skal du vælge Ekspert. Du vil se nogle flere muligheder; Vælg Brugerdefineret subsetting.

I dette eksempel bruger vi Sociolico skrifttypen til at vise sociale medier ikoner på vores hjemmeside, men de ikoner, vi skal bruge er kun Dribble, Facebook og Twitter, som henholdsvis er repræsenteret af disse tegn; d, f og t. Så sæt disse tegn i indgangsfeltet Single Characters som følger:

Og vi er færdige. Nu kan vi downloade skrifttypen, og i min størrelse har skrifttypestørrelsen kun vist sig kun 3Kb til 5Kb. Husk også, at de eneste tegn der vil blive gengivet til et ikon er kun d, f og t, mens de andre tegn gør det kun at være et almindeligt brev.

Endelig tanke

En ting, som vi ikke kan gøre på denne praksis, er at tilføje meget detaljerede effekter som dette til ikonet.

Men hvis vores overordnede design ikke kræver detaljer på dette niveau, kan denne tilgang være en bedre måde at betjene ikoner på websteder. Det har fleksibilitet, skalerbarhed, er nethinden klar med en meget lille filstørrelse, hvad kan vi mere bede om?

Endelig, hvis du ønsker at dykke dybere ind i dette emne, har vi lavet et par nyttige referencer, samt vores demo og kildekode til download.

Sådan laver du din egen ikon Webfont - WebDesignerDepot.com
Viser skrifttyper og dataattributter - 24Ways
Privat brug Unicode - Wikipedia

Demo
Download kilde