Ceļvedis par labāku un asāku UI ikonas ar tīmekļa fontiem

Ja jūs esat iepazinušies ar bitmap attēlu formātu (piemēram, PNG un GIF) izmantošanu, lai attēlotu ikonas tīmekļa vietnē, tad jūs arī būtu iepazinušies ar tās nepilnībām. Pirmkārt, atkarībā no izmēra un to, cik daudz krāsu informācijas ikona ir, ikonu faila lielums varētu būt ļoti liels.

Ja mums ir pārāk daudz ikonas, lai ievietotu tīmekļa vietni, tas arī potenciāli palēninās vietnes veiktspēju, jo pārlūkprogrammai ir jāveic daudzi HTTP pieprasījumi. Lai gan šo problēmu var atrisināt ar CSS sprite, faila lielums joprojām ir liels.

Bitmap ikonai ir arī elastības un mērogojamības trūkumi; teiksim, ka mums ir nepieciešams palielināt vai tuvināt ikonu uz noteiktu līmeni, vai arī apskatīt to ar ļoti augstu ekrāna izšķirtspēju, piemēram, tīklenes displejā; ikona noteikti būs izrādīties izskata miglains.

Nu, ja ņemat vērā dažus no iepriekš minētajiem jautājumiem, jums, iespējams, ir jāizmanto ikonas.

Izmantojot ikonas fontus

An ikonas fonts ir ikonu komplekts, kas iepakots tīmekļa fontā, ko vēlāk var ievietot tīmekļa vietnē, izmantojot @ font-face. Kā norādījis Chriss CSS triks, ir daudz priekšrocību, izmantojot fontu, izmantojot attēlu, lai sniegtu ikonas;

• Fonts ir uz vektoru balstīts objekts, kas pēc savas būtības ir neatkarīgs no izšķirtspējas, tāpēc ikona paliks tik izteiksmīga dažādās ekrāna izšķirtspējās, ieskaitot ļoti augstas ekrāna izšķirtspējas (piemēram, tīklenes līmeņa).
• Tas ir arī pielāgojams, ļaujot to paplašināt daudzos līmeņos, nezaudējot kvalitāti un precizitāti.
• Tā kā ikona būtībā ir fonts, mēs varam arī kontrolēt krāsu, caurspīdīgumu, teksta ēnu un pat mainīt tā izmērus caur stila lapu
• Mēs varam arī animēt ikonu ar CSS3.
• Ikona tiek izsaukta ar @ font-face noteikums, kas tika atbalstīts jau no Internet Explorer 4 (ar .eot).
• Mazāks HTTP pieprasījums un zemāks faila lielums.

Šeit ir daži no labākajiem bezmaksas ikonas fontiem, kurus var atrast:

• Fonts Awesome
• IcoMoon
• Sociālo mediju ikonas
• Zurb fonda ikonas

Pirms ievietojat to savā tīmekļa vietnē, pārliecinieties, vai esat pārbaudījis un sekojis licencei, lai ievērotu autora laiku un smago darbu.

@ fontu sejas noteikums

Kā jau minēts, ikonas tiek iegultas, izmantojot @ font-face kontrolēt stila lapu, kas definē jaunu font-family. Nākamajā piemērā mēs izmantosim Web simbolu;

 @ font-face font-family: 'WebSymbolsRegular'; src: url ('fonti / websymbols-regular-webfont.eot'); src: url (“fonts / websymbols-regular-webfont.eot? #iefix”) formāts (“iegultās opentype”), url (“fonts / websymbols-regular-webfont.woff”) formāts (“woff”), URL (“fonts / websymbols-regular-webfont.ttf”) formāts (“truetype”), url (“fonts / websymbols-regular-webfont.svg # WebSymbolsRegular”) formāts (svg);  

Tad HTML dokumentā mums tikai jāpievieno rakstzīmes, kas attēlo ikonu, nevis jāpielieto jaunais font-family dokumentā, mēs varam darīt konkrētāk, pievienojot papildu klasi dažiem elementiem, ka ikona ir jāpārveido, piemēram,;

 
 
h
 
i
 
j
 
A
 
I
 
 

Atpakaļ pie stila lapas mēs definējam jauno font-family šai kategorijai, ko tikko pievienojām:

 .icon-font font-family: WebSymbolsRegular; fonta lielums: 12pt;  

• Demo @ font-face

Pseidoelementu izmantošana

Ja ikona tiek uzskatīta par sānu elementu, mēs varam arī piegādāt ikonu pseidoelements. Pieņemot, ka mūsu HTML atzīme ir šāda:

 
 
Atbildēt
 
Atbildēt visiem
 
Pārsūtīt
 
Pielikums
 
Attēls
 
 

Mēs to varam darīt šādā veidā stila lapā:

 ul.icon-font.pseudo li: pirms font-family: WebSymbolsRegular; labās malas: 5px;  ul.icon-font.pseudo li: n-bērns (1): pirms saturs: "h";  ul.icon-font.pseudo li: n-bērns (2): pirms saturs: "i";  ul.icon-font.pseudo li: n-bērns (3): pirms saturs: "j";  ul.icon-font.pseudo li: n-bērns (4): pirms saturs: "A";  ul.icon-font.pseudo li: n-bērns (5): pirms saturs: "I";  

• Demo Pseidoelements

Privāta lietošana Unicode

Pastāv apstāklis, kad ikonas netika iekļautas burtos (A, B, C, D utt.), Bet tika iekļautas Unicode privātajā lietojumā, lai mazinātu saslimšanu starp rakstzīmēm. Tāpat kā FontAwesome, autors par laimi ir pievienojis visus rakstzīmju kodus, kas izskatās šādi;

 .ikonu stikls: pirms saturs: "f0c6";  

Bet, kad mums ir nepieciešams iegult ikonu tieši HTML, kaut kas līdzīgs šim kodam f0c6 nenorādīs smailu ikonu, jo tas nav derīgs raksturs, kas kodēts HTML.

HTML ir nepieciešama skaitliska atsauces atzīme lai padarītu īpašas rakstzīmes. Mēs par to mazliet attiecināmies ar iepriekšējo apmācības kursu par CSS3 pogām; šī rakstzīme ir prefiksēta ar apzīmējumu kombināciju (&), hash zīme (#) un x pēc tam seko heksadecimālais skaitlis, kas attēlo rakstzīmi.

Piemēram, f0c6 ir heksadecimālais skaitlis, tāpēc ciparu rakstzīmju atsauce HTML būs & # xf0c6;, programmā FontAwesome šis kods parādīs saspraudes ikona, tāpat kā;

• Demo Unicode

Fonta abonēšana

Iespējams, ka visas kolekcijas ikonas nav nepieciešamas. Tādā gadījumā mēs varam izlaist neizmantotās rakstzīmes, abonējot fontu, kas būs arī samazina fontu failu izmērus. Par laimi, tas ir ērts rīks no FontSquirrel veikt šo darbu viegli, @ font-face ģenerators.

Pēc tam, kad dodaties uz šo lapu un pievienojāt fontu, izvēlieties Eksperts. Jūs redzēsiet vēl citas iespējas; izvēlieties Pielāgota abonēšana.

Šajā piemērā mēs izmantojam Sociolico fontu, lai mūsu tīmekļa vietnē parādītu sociālo mediju ikonas, bet ikonas, kas mums būs nepieciešamas, ir tikai Dribble, Facebook un Twitter, kuras attiecīgi attēlotas ar šīm rakstzīmēm; d, f un t. Tātad, ievietojiet šīs rakstzīmes vienreizējo rakstzīmju ievades laukā šādi:

Un mēs esam darīti. Tagad mēs varam lejupielādēt fontu, un manā gadījumā fonta lielums ir izrādījies tikai 3Kb līdz 5Kb. Arī atcerieties, ka vienīgās rakstzīmes tiks attēloti ikonā, kas ir tikai d, f un t, kamēr citas rakstzīmes būs tikai parastas vēstules.

Galīgā doma

Viena lieta, ko mēs nevaram darīt pēc šīs prakses, ir pievienot ļoti detalizētus efektus ikonai.

Tomēr, ja mūsu vispārējais dizains šajā līmenī neprasa detalizētu informāciju, šī pieeja varētu būt labāks veids, kā tīmekļa vietnēs kalpot ikonas. Tam ir elastīgums, mērogojamība, tīklenes gatavība ar ļoti mazu faila izmēru, ko vēl mēs varam pieprasīt?

Visbeidzot, ja vēlaties dziļāk ienirt šajā tēmā, tālāk mēs esam apkopojuši dažas noderīgas atsauces, kā arī mūsu demo un avota kodu lejupielādei..

• Kā padarīt savu ikonu Webfont - WebDesignerDepot.com
• Fonti un datu atribūti - 24Ways
• Privāta lietošana Unicode - Wikipedia

• Demo
• Lejupielādēt avotu