Vodnik za boljše in ostrejše ikone uporabniškega vmesnika s spletnimi pisavami

Če ste seznanjeni z uporabo bitnih slik (npr. PNG in GIF) za prikaz ikon na spletnem mestu, potem ste seznanjeni tudi z njegovimi pomanjkljivostmi. Najprej, odvisno od dimenzije in števila barvnih informacij, ki jih ima ikona, je lahko velikost datoteke ikone zelo velika.

Če imamo na spletnem mestu preveč ikon, bo to morda tudi upočasnilo delovanje spletne strani, saj mora brskalnik izvajati več zahtev HTTP. Čeprav je to težavo mogoče rešiti z CSS sprite, je velikost datoteke še vedno velika.

Bitmap ikona ima tudi pomanjkljivosti v prilagodljivosti in razširljivosti; recimo, da moramo ikono povečati ali povečati na določeno raven ali pa jo prikazati z zelo visoko ločljivostjo zaslona, kot je na zaslonu mrežnice; ikona bo zagotovo izkaže se videti zamegljen.

No, če upoštevate nekatere od teh stvari, boste verjetno morali uporabiti pisave ikon.

Uporaba krstnih ikon

An pisave je niz ikon, pakiranih v spletno pisavo, ki jo lahko kasneje vdelate na spletno mesto @ font-face. Kot je poudaril Chris v CSS-triku, obstajajo številne prednosti uporabe pisave nad sliko za dostavo ikon;

Pisava je objekt, ki temelji na vektorjih in je po svoji naravi neodvisen od ločljivosti, zato bo ikona ostala jasna v različnih ločljivostih zaslona, vključno z zelo visokimi ločljivostmi zaslona (kot je raven retine).
Prav tako je prilagodljiva, kar omogoča povečanje na več ravneh brez izgube kakovosti in natančnosti.
Ker je ikona v bistvu pisava, lahko tudi nadziramo barvo, preglednost, tekstualno senco in celo spreminjamo velikost skozi slogovni list
Iketo lahko animiramo tudi s CSS3.
Ikona se pokliče s tipko @ font-face pravilo, ki je bilo podprto že v Internet Explorerju 4 (z .eot).
Manjša zahteva za HTTP in nižja velikost datoteke.

Tu je nekaj najboljših brezplačnih pisav, ki jih lahko najdemo:

Pisava Awesome
IcoMoon
Ikone za družabne medije
Ikone Fundacije Zurb

Prepričajte se, da ste preverili in upoštevali licenco, preden ste jo vdelali v svojo spletno stran, da bi častili avtorjev čas in trdo delo.

@ font-face Pravilo

Kot smo že omenili, so ikone vgrajene z uporabo @ font-face pravilo prek slogovne datoteke, ki določa novo družina pisav. V naslednjem primeru bomo uporabili spletne simbole;

 @ font-face družina pisav: 'WebSymbolsRegular'; src: url ('fonts / websymbols-regular-webfont.eot'); format src: url (oblika »fonts / websymbols-regular-webfont.eot? #iefix«) (»embedded-opentype«), format url (»fonts / websymbols-regular-webfont.woff«) (»woff«), URL ('fonts / websymbols-regular-webfont.ttf') format ('truetype'), url ('fonts / websymbols-regular-webfont.svg # WebSymbolsRegular') format ('svg');

Nato v dokumentu HTML dodamo le znake, ki predstavljajo ikono, in ne uporabimo novega družina pisav v dokumentu lahko natančneje določimo z dodajanjem dodatnega razreda določenim elementom, da je treba ikono pretvoriti v ikono;

  h
 jaz
 j
 A
 jaz

Nazaj na slogovni list definiramo novo družina pisav za ta razred, ki smo ga pravkar dodali:

 .icon-font družina pisav: WebSymbolsRegular; velikost pisave: 12pt;

Demo @ font-face

Uporaba psevdoelementov

Če se ikona obravnava kot stranski element, lahko ikono prenašamo tudi skozi psevdoelement. Ob predpostavki, da je naša oznaka HTML naslednja:

  Odgovori
 Odgovori vsem
 Naprej
 Priponka
 Slika

To lahko naredimo na ta način v tabeli s slogi:

 ul.icon-font.pseudo li: pred družina pisav: WebSymbolsRegular; margin-right: 5px;  ul.icon-font.pseudo li: nth-otrok (1): pred content: "h";  ul.icon-font.pseudo li: nth-otrok (2): pred content: "i";  ul.icon-font.pseudo li: nth-otrok (3): pred content: "j";  ul.icon-font.pseudo li: nth-otrok (4): pred content: "A";  ul.icon-font.pseudo li: nth-otrok (5): pred content: "I";

Demo psevdoelement

Zasebna uporaba Unicode

Obstajajo okoliščine, ko ikone niso bile vstavljene v črke (A, B, C, D itd.), Temveč so bile vgrajene v Unicode Private Use, da bi zmanjšali nasprotovanje med znaki. Tako kot v programu FontAwesome je avtor na srečo dodal vse kode znakov v slogovni list, ki izgleda tako;

 .ikona steklo: pred vsebina: "f0c6";

Toda, ko moramo ikono vdelati neposredno v HTML, je nekaj podobnega naslednji kodi f0c6 ne bo upodobil ikone, ker ni veljaven znak, ki je kodiran v HTML-ju.

HTML potrebuje številčno referenčno oznako za prikaz posebnih znakov. O tem smo malo prej govorili v prejšnjih vajah o gumbih CSS3; ta znak ima predpono s kombinacijo znaka za znak in (&), znak hašiša (#) in x potem sledi šestnajstiško število, ki predstavlja znak.

Na primer, f0c6 je šestnajstiško število, tako da bo številka numeričnih znakov v HTML-ju & # xf0c6;, v FontAwesome bo ta koda prikazala ikona sponke za papir, tako;

Demo Unicode

Podrejanje pisave

Ikone v zbirki morda niso vse potrebne. V tem primeru lahko neuporabljene znake opustimo tako, da podarimo tudi pisavo povzroči manjšo velikost pisave. Na srečo ima FontSquirrel priročno orodje za enostavno delo, @ font-face generator.

Ko odprete to stran in dodate pisavo, izberite Strokovnjak. Videli boste še nekaj možnosti; izberite Podrejanje po meri.

V tem primeru uporabljamo pisavo Sociolico za prikazovanje ikon družabnih medijev na naši spletni strani, vendar so ikone, ki jih bomo potrebovali, le Dribble, Facebook in Twitter, ki jih predstavljajo ti znaki; d, f in t. Torej jih vnesite v polje za vnos posameznih znakov, kot sledi:

In končali smo. Zdaj lahko prenesemo pisavo in v mojem primeru se je izkazalo, da je velikost pisave le 3Kb do 5Kb. Prav tako ne pozabite, da so edini znaki bo prikazana v ikono samo d, f in t, medtem ko bodo drugi znaki samo navadna pisma.

Končna misel

Ena stvar, ki je ne moremo storiti pri tej praksi, je ikona dodati zelo podrobne učinke, kot je ta.

Če pa celotna zasnova ne zahteva podrobnosti na tej ravni, bi bil lahko ta pristop boljši način za prikazovanje ikon na spletnih mestih. Ima prilagodljivost, razširljivost, je pripravljena na mrežnico z zelo majhno velikostjo datoteke, kaj še lahko zahtevamo?

Nazadnje, če želite poglobiti to temo, smo spodaj sestavili nekaj uporabnih referenc, pa tudi naš demo in izvorno kodo za prenos.

Kako narediti svojo ikono Webfont - WebDesignerDepot.com
Prikazovanje pisav in atributov podatkov - 24-krat
Zasebna uporaba Unicode - Wikipedija

Demo
Prenesi vir