Geresnio ir švaresnio UI piktogramų su žiniatinklio šriftais vadovas

Jei esate susipažinę su bitų vaizdo formatų (pvz., PNG ir GIF) naudojimu, kad būtų rodomos piktogramos svetainėje, tuomet jūs taip pat žinotumėte jo trūkumus. Visų pirma, priklausomai nuo matmens ir spalvos informacijos, kurią piktograma turi, piktogramos failo dydis gali būti labai didelis.

Jei svetainėje yra per daug piktogramų, tai taip pat gali sulėtinti svetainės našumą, nes naršyklė turi atlikti daug HTTP užklausų. Nors šią problemą galima išspręsti CSS sprite, failo dydis vis dar yra didelis.

„Bitmap“ piktograma taip pat turi lankstumo ir mastelio keitimo trūkumų; Tarkime, mes turime padidinti ar padidinti mastelį iki tam tikro lygio, arba peržiūrėti jį per labai didelę ekrano skiriamąją gebą, pvz., tinklainės ekrane; piktograma tikrai bus pasirodys neryškus.

Na, jei atsižvelgsite į kai kuriuos aukščiau minėtus klausimus, tikriausiai turite naudoti piktogramų šriftus.

Naudojant piktogramų šriftus

An piktogramos šriftas yra piktogramų rinkinys, supakuotas į žiniatinklio šriftą, kuris vėliau gali būti įterptas į svetainę naudojant @ šrifto veidas. Kaip pažymėjo Chrisas CSS trikoje, yra daug naudos, kai piktogramas pristatyti naudokite šriftą virš vaizdo;

• Šriftas yra vektorinis objektas, kuris pagal savo pobūdį yra nepriklausomas nuo rezoliucijos, taigi piktograma išliks tokia ryški įvairiose ekrano rezoliucijose, įskaitant labai aukštas ekrano rezoliucijas (pvz., Tinklainės lygį).
• Jis taip pat yra keičiamo dydžio, leidžiantis jį išplėsti daugeliu lygių neprarandant kokybės ir tikslumo.
• Kadangi piktograma iš esmės yra šriftas, mes taip pat galime kontroliuoti spalvą, skaidrumą, teksto šešėlį ir netgi pakeisti jį per stiliaus lapą
• Taip pat galime animuoti piktogramą su CSS3.
• Piktograma yra vadinama @ šrifto veidas taisyklė, kuri buvo palaikoma jau nuo „Internet Explorer 4“ (su .eot).
• Mažesnis HTTP prašymas ir mažesnis failo dydis.

Štai keletas geriausių nemokamų piktogramų šriftų, kuriuos galime rasti:

• Šriftas nuostabus
• IcoMoon
• Socialinės žiniasklaidos piktogramos
• Zurb fondo piktogramos

Įsitikinkite, kad patikrinote ir sekėte licenciją prieš įdėdami ją į savo svetainę, kad pagerintumėte autoriaus laiką ir sunkų darbą.

@ šrifto-veido taisyklė

Kaip jau minėjome, piktogramos yra įdėtos naudojant @ šrifto veidas valdyti per stiliaus lapą, kuris apibrėžia naują šrifto šeima. Toliau pateiktame pavyzdyje naudosime žiniatinklio simbolius;

 @ šrifto-veido font-family: „WebSymbolsRegular“; src: url („šriftai / websymbols-regular-webfont.eot“); src: url („fonts / websymbols-regular-webfont.eot? #iefix“) formatas („įterptas-opentype“), URL („šriftai / websymbols-regular-webfont.woff“) formatas („Woff“), URL („fonts / websymbols-regular-webfont.ttf“) formatas („truetype“), URL („fonts / websymbols-regular-webfont.svg # WebSymbolsRegular“) formatas („svg“);  

Tada HTML dokumente mums reikia pridėti tik simbolius, kurie atspindi piktogramą, o ne taikyti naujus šrifto šeima dokumente, mes galime padaryti konkretesnius, pridedant papildomą klasę tam tikriems elementams, kad ši piktograma turėtų būti perduodama, pvz.

 
 
h
 
i
 
j
 
A
 
I
 
 

Atgal į stiliaus lapą, mes apibrėžiame naują šrifto šeima tos klasės, kurią ką tik pridėjome:

 .icon-font font-family: WebSymbolsRegular; šrifto dydis: 12pt;  

• Demo @ šrifto veidas

Pseudo elementų naudojimas

Jei piktograma traktuojama kaip šoninis elementas, taip pat galime pateikti piktogramą pseudo elementas. Darant prielaidą, kad mūsų HTML žymėjimas yra toks:

 
 
Atsakyti
 
Atsakyti visiems
 
Persiųsti
 
Priedas
 
Vaizdas
 
 

Tai galime padaryti stiliaus lape:

 ul.icon-font.pseudo li: prieš font-family: WebSymbolsRegular; paraštė dešinėje: 5px;  ul.icon-font.pseudo li: n-vaikas (1): prieš turinys: h ";  ul.icon-font.pseudo li: n-vaikas (2): prieš content: "i";  ul.icon-font.pseudo li: n-vaikas (3): prieš turinys: ";  ul.icon-font.pseudo li: n-vaikas (4): prieš content: "A";  ul.icon-font.pseudo li: n-vaikas (5): prieš content: "I";  

• Demo Pseudo elementas

Privatus naudojimas Unikodas

Yra aplinkybė, kai piktogramos nebuvo įterptos į raides (A, B, C, D ir tt), bet buvo įterptos į Unicode Private Use, kad būtų sumažinta tarp simbolių. Kaip ir „FontAwesome“, autorius laimingai pridėjo visus simbolių kodą stiliaus lape, kuris atrodo taip;

 .icon-glass: prieš content: "f0c6";  

Bet kai mes turime įdėti piktogramą tiesiai į HTML, kažką panašaus į šį kodą f0c6 nerodys smailiosios piktogramos, nes ji nėra tinkamas HTML kodas.

HTML reikia skaitinės nuorodos žymėjimo padaryti specialiuosius simbolius. Apie tai šiek tiek aptarėme ankstesnėje pamokoje apie CSS3 mygtukus; šis simbolis yra sujungtas su ženklu (ir&), maišos ženklas (#) ir x po to seka šešioliktainis skaičius, žymintis simbolį.

Pavyzdžiui, f0c6 yra šešioliktainis skaičius, todėl skaitmeninė simbolių nuoroda HTML bus & # xf0c6;, „FontAwesome“ kode bus rodomas klipo piktograma, kaip ir taip;

• Demo Unicode

Šrifto prenumeravimas

Kolekcijos piktogramos gali būti nebūtinos. Tokiu atveju mes galime nepanaudotus simbolius atsisakyti užrašę šrifto, kuris taip pat bus sumažėja šrifto failų dydis. Laimei, „FontSquirrel“ yra patogus įrankis šiam darbui atlikti, @ šrifto-veido generatorius.

Eidami į šį puslapį ir pridėję šriftą, pasirinkite Ekspertas. Pamatysite daugiau galimybių; pasirinkite Pasirinktinis prenumeravimas.

Šiame pavyzdyje mes naudojame „Sociolico“ šriftą, kad būtų rodomos socialinės žiniasklaidos piktogramos mūsų svetainėje, tačiau piktogramos, kurių mums reikės, yra tik „Dribble“, „Facebook“ ir „Twitter“, kurios atitinkamai yra pateikiamos šiais simboliais; d, f ir t. Taigi, įdėkite šiuos simbolius įvesties lauke „Single Characters“:

Ir mes darome. Dabar galime atsisiųsti šriftą, o mano atveju šrifto dydis pasirodė esantis tik 3Kb iki 5Kb. Taip pat atminkite, kad vieninteliai simboliai bus atvaizduota į piktogramą tik d, f ir t, o kiti simboliai bus tik įprastas laiškas.

Galutinė mintis

Vienas dalykas, kurio mes negalime padaryti dėl šios praktikos, yra pridėti labai išsamius efektus, tokius kaip piktograma.

Tačiau, jei mūsų bendras dizainas nereikalauja išsamios informacijos apie šį lygį, šis metodas galėtų būti geresnis būdas teikti piktogramas svetainėse. Ji turi lankstumą, mastelio, tinklainės tinklą, labai mažą failo dydį, ką dar galime prašyti?

Galiausiai, jei norite giliau įsitraukti į šią temą, toliau pateikiame keletą naudingų nuorodų, o taip pat ir mūsų demonstravimo ir šaltinio kodą atsisiųsti.

• Kaip padaryti savo piktogramą Webfont - WebDesignerDepot.com
• Šriftų ir duomenų atributų rodymas - 24Ways
• Privatus naudojimas Unicode - Vikipedija

• Demo
• Atsisiųsti šaltinį