Průvodce pro lepší a ostřejší ikony uživatelského rozhraní s webovými fonty

Pokud jste obeznámeni s používáním bitmapových obrazových formátů (např. PNG a GIF) pro zobrazení ikon na webových stránkách, pak byste také měli znát jeho nedostatky. V první řadě, v závislosti na rozměru a kolik informací o barvě, které má ikona, může být velikost souboru ikony velmi velká.

Pokud máme příliš mnoho ikon, které lze umístit na webové stránky, bude také potenciálně zpomalit výkonnost webových stránek, protože mnoho požadavků HTTP musí být provedeno prohlížečem. Ačkoli tento problém lze vyřešit pomocí CSS sprite, velikost souboru je stále velká.

Ikona bitmap má také nedostatky ve flexibilitě a škálovatelnosti; řekněme, že musíme zvětšit nebo přiblížit ikonu na určitou úroveň, nebo si ji prohlédnout prostřednictvím velmi vysokého rozlišení obrazovky, jako je displej sítnice; ikona bude určitě vypadají rozmazaně.

Pokud vezmete v úvahu některé z výše uvedených skutečností, budete pravděpodobně muset použít ikonová písma.

Použití ikon písma

An ikona písmo je sada ikon zabalených ve webovém písmu, které lze později vložit na webové stránky @ font-face. Jak poukázal Chris na CSS-triku, existuje mnoho výhod používání fontu přes obrázek pro doručování ikon;

Písmo je objekt založený na vektoru, který je svým charakterem nezávislý na rozlišení, takže ikona zůstane stejně ostrá v různých rozlišeních obrazovky, včetně velmi vysokého rozlišení obrazovky (jako je úroveň sítnice)..
Je také škálovatelný, což umožňuje jeho zvětšení na mnoha úrovních bez ztráty kvality a přesnosti.
Protože ikona je v podstatě písmo, Můžeme také ovládat barvu, průhlednost, textový stín a dokonce jej měnit pomocí šablony stylů
Ikonu můžeme také animovat pomocí CSS3.
Ikona je volána pomocí @ font-face pravidlo, které bylo podporováno již od aplikace Internet Explorer 4 (s příponou .eot).
Menší požadavek HTTP a nižší velikost souboru.

Zde jsou některé z nejlepších bezplatných ikon fontů, které můžeme najít:

Písmo Awesome
IcoMoon
Sociální media ikony
Ikony Nadace Zurb

Ujistěte se, že jste zkontrolovali a následovali licenci, než ji vložíte do svých webových stránek, abyste ctili čas autora a tvrdou práci.

@ font-face Pravidlo

Jak jsme zmínili, ikony jsou vloženy pomocí @ font-face pravidlo, které definuje nový styl font-family. V následujícím příkladu použijeme webové symboly;

 @ font-face rodina fontů: 'WebSymbolsRegular'; src: url ('fonts / websymbols-regular-webfont.eot'); src: url ('fonts / websymbols-regular-webfont.eot? #iefix') formát ('embedded-opentype'), url ('fonts / websymbols-regular-webfont.woff') formát ('woff'), url ('fonts / websymbols-regular-webfont.ttf') format ('truetype'), url ('fonts / websymbols-regular-webfont.svg # WebSymbolsRegular') formát ('svg');

V dokumentu HTML pak stačí přidat znaky, které představují ikonu, a nikoli použít nové font-family v dokumentu můžeme dělat mnohem konkrétněji přidáním další třídy k určitým prvkům, které je třeba do této ikony vykreslit;

  h
 i
 j
 A
 Já

Zpět na seznam stylů definujeme nový font-family pro tuto třídu, kterou jsme právě přidali:

 .icon-font font-family: WebSymbolsRegular; velikost písma: 12pt;

Demo @ font-face

Použití Pseudo-elementů

Pokud se s ikonou zachází jako s postranním prvkem, můžeme ji také doručit pseudo-element. Za předpokladu, že naše značení HTML je následující:

  Odpověď
 Odpovědět všem
 Vpřed
 Příloha
 obraz

Můžeme to udělat ve stylu:

 ul.icon-font.pseudo li: before font-family: WebSymbolsRegular; pravý okraj: 5px;  ul.icon-font.pseudo li: nth-child (1): before content: "h";  ul.icon-font.pseudo li: nth-child (2): before content: "i";  ul.icon-font.pseudo li: nth-child (3): before content: "j";  ul.icon-font.pseudo li: nth-child (4): before content: "A";  ul.icon-font.pseudo li: nth-child (5): before content: "I";

Demo Pseudo-element

Soukromé použití Unicode

Existuje okolnost, že ikony nebyly vloženy do písmen (A, B, C, D atd.), Ale byly vloženy do soukromého použití Unicode, aby se minimalizovalo střetnutí mezi znaky. Stejně jako v FontAwesome, autor naštěstí přidal všechny kódy znaků do šablony stylů, která vypadá takto;

 .icon-glass: before content: "f0c6";

Ale když potřebujeme vložit ikonu přímo do HTML, něco jako následující kód f0c6 nebude vykreslovat špičatou ikonu, protože není platným znakem kódovaným v HTML.

HTML potřebuje číselné referenční označení k vykreslení speciálních znaků. V našem předcházejícím tutoriálu o CSS3 Buttons jsme se o tom trochu bavili; tento znak je označen kombinací znaku ampersand (&), znak hash (#) a písm X poté následuje hexadecimální číslo, které představuje znak.

Například f0c6 je hexadecimální číslo, takže číselný odkaz v HTML bude & # xf0c6;, v programu FontAwesome se tento kód zobrazí ikona sponky, jako tak;

Demo Unicode

Podmnožina písma

Ikony ve sbírce nemusí být všechny potřebné. V takovém případě můžeme nepoužité znaky zrušit podmnožením písma, které bude také výsledkem jsou nižší velikosti souborů písem. Naštěstí je k dispozici šikovný nástroj od FontSquirrel, aby tuto práci snadno provedl, @ font-face generátor.

Poté, co přejdete na tuto stránku a přidáte písmo, vyberte možnost Expert. Uvidíte další možnosti; vybrat Vlastní podmnožina.

V tomto příkladu používáme písmo Sociolico k zobrazení ikon sociálních médií na našich webových stránkách, ale ikony, které budeme potřebovat, jsou pouze Dribble, Facebook a Twitter, které jsou reprezentovány těmito znaky; d, f a t. Umístěte tyto znaky do pole Jednotné znaky následujícím způsobem:

A jsme hotovi. Nyní si můžeme stáhnout písmo a v mém případě se velikost písma ukázala být pouze 3Kb až 5Kb. Nezapomeňte také, že jediné znaky, které budou vykresleny do ikony jsou pouze d, f a t, zatímco ostatní postavy budou jen obyčejný dopis.

Závěrečná myšlenka

Jedna věc, kterou na této praxi nemůžeme udělat, je přidání vysoce detailních efektů na tuto ikonu.

Pokud však náš celkový design na této úrovni nevyžaduje detail, tento přístup by mohl být lepším způsobem, jak sloužit ikonám na webových stránkách. To má flexibilitu, škálovatelnost, je sítnice-ready s velmi malou velikost souboru, co jiného můžeme požádat?

Nakonec, pokud se chcete ponořit hlouběji do tohoto tématu, níže jsme sestavili několik užitečných odkazů, stejně jako naše demo a zdrojový kód ke stažení..

Jak si vytvořit vlastní ikonu Webfont - WebDesignerDepot.com
Zobrazení fontů a datových atributů - 24Ways
Soukromé použití Unicode - Wikipedia

Demo
Stáhněte si zdroj