Juhend parema ja teravama kasutajaliidese ikoonide loomiseks veebifontidega

Kui olete tuttav bittikaartide kujutise vormingute (nt PNG ja GIF) kasutamisega veebisaidi ikoonide kuvamiseks, siis oleksite ka selle puuduste tundmine. Esiteks, olenevalt mõõtmest ja sellest, kui palju värvi teavet ikoonil on, võib ikoonifaili suurus olla väga suur.

Kui meil on veebisaidile paigutamiseks liiga palju ikoone, võib see ka veebisaidi jõudlust aeglustada, kuna brauser peab läbi viima palju HTTP-päringuid. Kuigi seda probleemi saab lahendada CSS sprite abil, on faili suurus siiski suur.

Bitmapi ikoonil on ka puudusi paindlikkuse ja mastaapsuse osas; Oletame, et peame suurendama või suurendama ikooni teatud tasemele või vaatama seda väga suure ekraani eraldusvõimega, näiteks võrkkesta ekraanil; ikoon kindlasti osutuda otsin udune.

Noh, kui võtate mõningaid eespool nimetatud küsimusi arvesse, peate ilmselt kasutama ikoonifonte.

Ikoonifontide kasutamine

An ikooni font on ikoonide kogum, mis on pakitud veebifontidesse, mida saab hiljem veebisaidile lisada @ font-face. Nagu Chris on CSS-trikkis välja toonud, on ikoonide edastamiseks palju rohkem eeliseid, kui fontide kasutamine pildil on;

• Font on vektoripõhine objekt, mis oma olemuselt on eraldusvõimeline, nii et ikoon jääb erinevatele ekraani resolutsioonidele, sealhulgas väga kõrge ekraani eraldusvõimele (näiteks võrkkesta tasemele) teravaks.
• Samuti on see skaleeritav, võimaldades seda paljudel tasanditel suurendada kvaliteeti ja täpsust kaotamata.
• Kuna ikoon on põhimõtteliselt font, me saame kontrollida ka värvi, läbipaistvust, teksti-varju ja muuta selle stiili lehelt
• Samuti saab animeerida ikooni CSS3-ga.
• Ikooni nimetatakse @ font-face reegel, mida on toetatud juba Internet Explorer 4-st (koos .eotiga).
• Vähem HTTP-päring ja väiksem faili suurus.

Siin on mõned parimad tasuta ikoonifontid, mida leiame:

• Font Awesome
• IcoMoon
• Sotsiaalse meedia ikoonid
• Zurbi fondi ikoonid

Veenduge, et olete kontrollinud ja järginud litsentsi, enne kui sisestate selle oma veebisaidile autori aja ja raske töö austamiseks.

@ font-face reegel

Nagu juba mainitud, on ikoonid varjatud @ font-face reeglit läbi uue stiili lehel font-pere. Järgnevas näites kasutame veebisümboleid;

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

Seejärel peame HTML-dokumendis lisama ainult need tähemärgid, mis esindavad ikooni, ja mitte rakendama uut font-pere dokumendis laialt levinud, saame teha täpsemalt, lisades teatud elementidele lisaklassi, mida ikoon vajab, nagu näiteks;

 
 
h
 
i
 
j
 
A
 
I
 
 

Tagasi stiili lehele määratleme uue font-pere selle klassi jaoks, mille oleme just lisanud:

 .icon-font font-family: WebSymbolsRegular; fondi suurus: 12pt;  

• Demo @ font-nägu

Pseudoelementide kasutamine

Kui ikooni käsitletakse külgelemendina, saame ka ikooni läbi viia pseudoelement. Eeldades, et meie HTML-märgistus on järgmine:

 
 
Vastus
 
Vasta kõigile
 
Edasi
 
Manus
 
Pilt
 
 

Me saame seda teha stiili lehel järgmiselt:

 ul.icon-font.pseudo li: enne font-family: WebSymbolsRegular; marginaal-parem: 5px;  ul.icon-font.pseudo li: n-laps (1): enne sisu: "h";  ul.icon-font.pseudo li: n-laps (2): enne sisu: "i";  ul.icon-font.pseudo li: n-laps (3): enne sisu: ";  ul.icon-font.pseudo li: n-laps (4): enne sisu: "A";  ul.icon-font.pseudo li: n-laps (5): enne sisu: "I";  

• Demo Pseudo-element

Isiklik kasutamine Unicode

On olemas olukord, kus ikoone ei sisestatud tähtedesse (A, B, C, D jne), kuid need olid varjatud Unicode'i erakasutusse, et minimeerida sümbolite vahelist kokkupõrget. Nagu FontAwesome'is, on autoril õnneks lisanud kõik stiili lehel olevad tähemärgid, mis näeb välja selline;

 .ikoon-klaas: enne sisu: "f0c6";  

Aga kui me peame ikooni otse HTML-i sisse panema, siis midagi sellist koodi f0c6 ei muuda teravat ikooni, kuna see ei ole HTML-is kodeeritud kehtiv märk.

HTML vajab numbrilist viitenumbrit erimärkide esitamiseks. Oleme sellest natuke arutanud meie eelmises juhendis CSS3 nuppude kohta; see märk on eesliini ja tähise kombinatsioon (&), räsimärk (#) ja x seejärel järgneb heksadecimaalne number, mis tähistab märki.

Näiteks f0c6 on kuueteistkümnendnumber, nii et HTML-i numbriline viide on & # xf0c6;, FontAwesome'is kuvatakse see kood kirjaklambri ikoon, niimoodi;

• Demo Unicode

Fontide liitmine

Kogu ikoonid ei pruugi olla kõik vajalikud. Sellisel juhul võime kasutamata tähemärki langeda, lisades sellele ka fondi tulemuseks on väiksemad fondifailide suurused. Õnneks on FontSquirrelist mugav tööriist selle töö hõlbustamiseks, @ font-face generaator.

Pärast seda lehte ja fondi lisamist valige Ekspert. Te näete veel mõningaid võimalusi; valige Kohandatud tellimine.

Selles näites kasutame meie veebisaidil sotsiaalmeedia ikoonide näitamiseks Sociolico fondi, kuid ikoonid, mida me vajame, on ainult Dribble, Facebook ja Twitter, mida esindavad vastavalt need tähemärgid; d, f ja t. Niisiis pange need tähemärgid sisestusväljale Single Characters järgmiselt:

Ja me oleme valmis. Nüüd on võimalik alla laadida font ja minu puhul on fondi suurus osutunud ainult 3Kb kuni 5Kb. Samuti pidage meeles, et ainult need tegelased kuvatakse ikooniks ainult d, f ja t, teised tähemärgid on ainult tavaline kiri.

Lõplik mõte

Üks asi, mida me seda praktikat teha ei saa, on lisada sellesse ikoonile sellised väga üksikasjalikud mõjud.

Kui aga meie üldine disain ei nõua selles osas üksikasju, võib see lähenemisviis olla parem viis veebisaitide ikoonide teenindamiseks. Sellel on paindlikkus, mastaapsuse võimalus, võrkkestvalmis väga väikese faili suurus, mida me veel küsida?

Lõpuks, kui soovite selle teema juurde põhjalikumalt sukelduda, oleme allpool koostanud mõned kasulikud viited, samuti meie allalaadimiseks mõeldud demo- ja lähtekoodi..

• Kuidas teha oma ikoon Webfont - WebDesignerDepot.com
• Fontide ja andmete atribuutide kuvamine - 24Ways
• Erakasutus Unicode - Wikipedia

• Demo
• Allalaadimise allikas