Sprievodca lepšími a ostrejšími používateľskými ikonami s webovými písmenami

Ak ste oboznámení s používaním bitmapových obrázkových formátov (ako PNG a GIF) na zobrazenie ikon na webových stránkach, potom by ste boli tiež oboznámení s jeho nedostatkami. Po prvé, v závislosti od rozmeru a koľko informácií o farebnej farbe má ikona veľkosti súboru ikon.

Ak máme príliš veľa ikon na vloženie webových stránok, môže to tiež potenciálne spomaliť výkonnosť webových stránok, pretože prehliadač musí vykonať mnoho žiadostí HTTP. Hoci sa tento problém dá vyriešiť pomocou programu CSS sprite, veľkosť súboru je stále veľká.

Bitová ikona má tiež nedostatky v pružnosti a škálovateľnosti; povedzme, že potrebujeme zväčšiť alebo priblížiť ikonu na určitú úroveň, alebo ju zobraziť veľmi vysokým rozlíšením obrazovky, napríklad na displeji sietnice; ikona bude určite vyzerajú rozmazané.

No, ak vezmete do úvahy niektoré z týchto vecí, pravdepodobne budete musieť používať písma s ikonami.

Použitie ikon písma

písmo ikony je sada ikon zabalených do webového písma, ktoré sa neskôr môžu vložiť na webovú stránku @ Font-face. Ako poukázal Chris v CSS-triku, existuje veľa výhod využívania písma nad obrazom na zobrazovanie ikon;

• Písmo je objekt založený na vektoroch, ktorý je svojou povahou nezávislý od rozlíšenia, takže ikona zostane ostrá v rozličných rozlíšeniach obrazovky, vrátane veľmi vysokých rozlíšení obrazovky (napríklad na úrovni sietnice).
• Je tiež škálovateľný, čo umožňuje rozšírenie na mnohých úrovniach bez straty kvality a presnosti.
• Keďže ikona je v podstate písmo, môžeme tiež ovládať farbu, priehľadnosť, textový tieň a dokonca zmeniť veľkosť pomocou štýlu šablón
• Môžeme tiež animovať ikonu pomocou CSS3.
• Ikona sa volá pomocou tlačidla @ Font-face pravidlo, ktoré bolo podporované už od Internet Explorera 4 (s .eot).
• Menšia žiadosť HTTP a nižšia veľkosť súboru.

Tu sú niektoré z najlepších voľných ikon písma môžeme nájsť:

• Font Awesome
• IcoMoon
• Ikony sociálnych médií
• Zurb Ikony nadácie

Uistite sa, že ste skontrolovali a dodržiavali licenciu predtým, ako ste ju vložili na svoje webové stránky, aby ste počúvali čas a tvrdú prácu autora.

@ font-face Rule

Ako sme už spomenuli, ikony sú vložené pomocou @ Font-face spravovať cez štýl, ktorý definuje nové font-family. V nasledujúcom príklade budeme používať webové symboly;

 @ písmo-tvár font-family: 'WebSymbolsRegular'; src: url ('fonty / websymbols-regular-webfont.eot'); src: url ('fonts / websymbols-regular-webfont.eot? #iefix') formát ('embedded-opentype'), url ('fonty / websymbols-regular-webfont.ttf') formát ('truetype'), url ('fonts / websymbols-regular-webfont.svg # WebSymbolsRegular') formát ('svg');  

Potom v dokumente HTML je potrebné pridať iba znaky, ktoré predstavujú ikonu, a skôr než použiť novú font-family v dokumente, môžeme konkrétnejšie urobiť tým, že pridáme triedy navyše k určitým prvkom, ktorým musí byť ikona vykreslená, ako je tomu tak;

 
 
hod
 
ja
 
j
  
ja
 
 

Späť na štýl štýlov definujeme nový font-family pre túto triedu, ktorú sme práve pridali:

 .ikona-font font-family: WebSymbolsRegular; veľkosť písma: 12pt;  

• Demo @ font-face

Použitie pseudo-elementov

Ak sa táto ikona považuje za bočný prvok, môžeme tiež zobraziť ikonu pseudo-prvok. Za predpokladu, že naša HTML značka je nasledovná:

 
 
odpoveď
 
Odpovedať všetkým
 
vpred
 
pripevnenie
 
obraz
 
 

Môžeme to tak urobiť v štýle štýlov:

 ul.icon-font.pseudo li: pred font-family: WebSymbolsRegular; margin-right: 5px;  ul.icon-font.pseudo li: nth-child (1): pred obsah: "h";  ul.icon-font.pseudo li: nth-child (2): pred obsah: "i";  ul.icon-font.pseudo li: nth-child (3): pred obsah: "j";  ul.icon-font.pseudo li: nth-child (4): pred obsah: "A";  ul.icon-font.pseudo li: nth-child (5): pred obsah: "I";  

• Demo pseudo-element

Súkromné ​​použitie Unicode

Existuje situácia, keď ikony neboli vložené v písmenách (A, B, C, D atď.), Ale boli vložené do Unicode Private Use, aby sa minimalizovalo striedanie znakov. Rovnako ako v programe FontAwesome, autor našťastie pridal všetky znaky kód v štýle list, ktorý vyzerá takto;

 .ikona-sklo: pred content: "\ f0c6";  

Ale keď potrebujeme vložiť ikonu priamo do HTML, niečo ako nasledujúci kód \ f0c6 nebude zobrazovať špicatú ikonu, pretože nie je platný znak zakódovaný v jazyku HTML.

HTML vyžaduje numerickú referenčnú značku na vykreslenie špeciálnych znakov. Pokryli sme to trochu v našom predchádzajúcom cvičení na tlačidlách CSS3; tento znak je predponovaný kombináciou znaku ampersand (&), znak hash (#) a an X potom nasleduje hexadecimálne číslo, ktoré predstavuje znak.

Napríklad f0c6 je hexadecimálne číslo, takže číselný znakový odkaz v HTML bude & # Xf0c6;, v FontAwesome tento kód zobrazí ikona z klipu, ako;

• Demo Unicode

Zoskupovanie písma

Ikony v zbierke nemusia byť všetky potrebné. V takom prípade môžeme zrušiť nepoužité znaky tým, že podčiarkne písmo, ktoré bude tiež výsledkom nižších veľkostí súborov písma. Našťastie existuje praktický nástroj od firmy FontSquirrel, ktorý umožňuje jednoduchú prácu, @ font-face generator.

Po prejdení na túto stránku a pridaní písma vyberte položku odborník. Uvidíte niektoré ďalšie možnosti; vybrať Vlastné nastavenie podsúborov.

V tomto príklade používame písmo Sociolico na zobrazenie ikon sociálnych médií na našej webovej lokalite, ale ikony, ktoré budeme potrebovať, sú iba Dribble, Facebook a Twitter, ktoré sú príslušnými znakmi reprezentované. d, f a T. Vložte tieto znaky do vstupného poľa Jednodielne znaky takto:

A my sme hotoví. Teraz môžeme stiahnuť písmo a v mojom prípade veľkosť písma sa ukázala byť len 3Kb až 5Kb. Pamätajte tiež, že jediné znaky, ktoré bude vykreslené do ikony iba d, f a t, zatiaľ čo ostatné znaky sa stanú len pravidelným listom.

Konečná myšlienka

Jedna vec, ktorú nemôžeme urobiť v tejto praxi, je pridanie veľmi detailných efektov ako ikona.

Ak však náš celkový dizajn nevyžaduje podrobnosti na tejto úrovni, tento prístup by mohol byť lepší spôsob, ako slúžiť ikonám na webových stránkach. Má flexibilitu, škálovateľnosť, je pripravená na sietnicu s veľmi malou veľkosťou súboru, čo ešte môžeme požiadať?

Nakoniec, ak sa chcete ponoriť hlbšie do tejto témy, nižšie sme dali dohromady niekoľko užitočných referencií, rovnako ako náš demo a zdrojový kód na stiahnutie.

• Ako vytvoriť svoju vlastnú ikonu Webfont - WebDesignerDepot.com
• Zobrazenie atribútov písiem a údajov - 24 hodín
• Súkromné ​​používanie Unicode - Wikipedia

• demonštrácie
• Stiahnuť zdroj