Jak změnit ikony na webové písmo
Vytvořil jsem nějaké elegantní ikony pro redesign webových stránek, které jsem dělal, a já jsem si prohlížel nové stránky na starém iPadu. Rozložení vypadalo v normální velikosti, ale při přiblížení k části stránky jsem najednou viděl, že moje ikona je rozmazaný nepořádek, zatímco hlavička založená na textu byla stále ostrý a ostrý. Na novějším displeji iPad na displeji Retina ikony nevypadaly docela ostré, a to ani v normální velikosti.
První nápad, který jsem měl, bylo vytvořit dvojité obrazy sprite a nastavit je na polovinu jejich velikosti pomocí CSS. Zatímco to způsobilo, že vypadají lépe na displeji Retina v normální velikosti, hned jak začnete sešlápnout a přiblížit, rozmazání se vrátilo. Ale text byl stále ostrý a špičatý.
Odpověď byla zřejmá. Potřeboval jsem obrátit své ikony do písma.
V tomto tutoriálu se podíváme na to, jak přenést vektorové ikony na webové písmo pomocí skvělé bezplatné webové aplikace s názvem IcoMoon. Pak se podíváme, jak používat generované soubory písem a CSS na webové stránce.
Výhody použití písma ikony
Písmo s ikonou má navíc k ostrosti obrazu několik výhod oproti bitmapovým obrázkům.
- Vhodnost: písmo s ikonou bude mnohem menší než u sérií obrázků, zejména pokud jste použili obrazy s dvojitou velikostí pro displeje Retina. A jakmile je písmo načteno, vaše ikony budou okamžitě vykresleny, aniž by bylo nutné stahovat obrázek.
- Škálovatelnost: písmo ikony lze nastavit na libovolnou velikost nastavením
font-sizevlastnictví v doprovodném CSS. To vám umožní experimentovat s různými velikostmi; zatímco u bitmapových obrázků byste museli vygenerovat obrazový soubor v každé velikosti. - Flexibilita: textové efekty lze snadno aplikovat na vaši ikonu, včetně barev, stínu stínu a stavy převrácení. Budou také dobře zobrazovat proti libovolné barvě nebo pozadí obrazu.
- Kompatibilita: webová písma jsou podporována všemi moderními prohlížeči a staršími prohlížeči, i IE 6 a staršími.
Takže začněte!
Vytváření písma ikony
Symbolová písma mohou být vytvořena pomocí speciální aplikace pro vytváření písem, například Glyfy , ale profesionální typografický nástroj překračuje potřeby nebo požadavky na vytvoření jednoduchého písma ikon, ve kterém není důležitý vztah mezi znaky (tj. kerning a ligaturace).
Zdánlivě nejjednodušší je použít skvělou bezplatnou online aplikaci nazvanou IcoMoon , Keyamoon, který odstraňuje veškeré potíže s konverzí symbolů na webové písmo.
Tato aplikace HTML5 odstraňuje veškerou bolest při vytváření souborů písma pro jednoduché použití, jako je například písma ikon budovy. IcoMoon je dodáván s množstvím sady ikon, které jsou již načtené, a do vaší knihovny můžete přidávat další, z nichž většina může být zdarma (zkontrolujte licencování). Pokud hledáte poměrně standardní ikony, například "stahování souborů" a "nákupní košík", pak byste mohli zjistit, že použití jednoho z nich je lepší než vytváření vlastních.
Krok za krokem
1. Připravte si ilustrace
Nejprve je třeba vytvořit ikony ve vektorovém výkresovém programu, který je schopen exportovat do formátu SVG, jako je například Illustrator nebo Inkscape.
Při navrhování můžete pracovat s libovolnými barvami, které se vám líbí, ale ikony musí být jedna plná barva. Ujistěte se, že každá ikona má přibližně stejnou velikost. Mít jednu ikonu mnohem vyšší nebo delší než jiný způsobí, že bude těžké vytvořit konzistentní písmo. Zde jsem musel snížit šířku ikony vzducholodi tak, aby odpovídal ostatním.
2. Vyčistěte
Zkontrolujte každou ikonu pečlivě, abyste se ujistili, že nedochází k nedokonalosti - podrobnosti, které vypadají OK v menších velikostech, mohou při zvětšování skrýt malé vady. V níže uvedené ikoně musím odstranit zubaté kroky, které se při vrstevnatých prvcích objevily.
V nástroji Illustrator můžete pomocí nástroje Pathfinder spojit překrývající se prvky a prvek Minus Front odstranit prvky výřezu, například hvězdu v těchto ikonách.
Klíčovým principem je zajistit, aby vaše ikona byla čitelná v malých měřítkách. Zjednodušte co nejvíce.
3. Export do SVG
Nyní vyberte ikonu a zkopírujte ji a vložte do nového čtvercového dokumentu (například 200 × 200 pixelů). Zvětšete ikonu tak, aby odpovídala. Možná je vhodné nastavit pravítko základní čáry. Označte ikonu tak, aby byla na černém bílém pozadí.
Nyní zvolte File… Save as a uložit soubor jako soubor SVG. Použijte výchozí nastavení SVG. Jakmile to provedete pro všechny ikony, jste připraveni vytvořit webové písmo.
4. Import do IcoMoon
Otevři Webová aplikace IcoMoon . Chcete-li importovat ikonu, klikněte na tlačítko Importovat ikony a vyberte soubory SVG, které chcete přidat - můžete přidat více souborů najednou. Zobrazí se v části "Vaše vlastní ikony". Pokud jsou zvýrazněny žlutě, budou součástí písma ikon, které vytvoříte. V tomto příkladu můžete vidět, že jsem se rozhodl nevygenerovat jednu ze svých vlastních ikon a přidal jsem jednu ikonu z "Mini-ikon".
5. Exportujte písmo z IcoMoonu
Klepnutím na tlačítko Upravit můžete upravit polohu, velikost nebo rotaci ikony. Pomocí tlačítka "Uložit kopii" vytvoříte varianty ikon (například zrcadlový obraz ikony). Přidejte do ikony smysluplnou značku, protože to bude použito k vytvoření názvu třídy pro ni.
Když jste připraveni, klikněte na tlačítko "Font" ve spodní části obrazovky a začněte vytvářet písmo. Zde můžete přiřadit, která ikona je mapována, na který znak; pokud je například sada ikon šest obrazů rotující koule, můžete přiřadit znaky q, w, e, r, t a y k šesti snímkům. V předvolbách zvolte název písma. Můžete také upravit metriky písma, ale pokud si neplánujete nastavit vlastní písmo vedle standardního textu, nemusíte se o to starat.
6. Stáhněte soubory písma
Klepnutím na tlačítko Stáhnout stáhněte soubor písma do počítače. Bude to podsložka obsahující samotná písma (ve formátech WOFF, EOT a TTF), stejně jako vzorová stránka HTML a odpovídající CSS. Je dokonce i soubor JavaScript s řešením, pokud potřebujete podporovat IE 6 nebo 7.
Chcete-li přidat písma do projektu, zkopírujte do svých stránek podsložku písem. Můžete kopírovat a vkládat CSS ze stylu.css do souboru CSS vlastního webu, ale mým přístupem je přejmenovat jej jako fonts.css a ponechat jej jako samostatný soubor CSS. Poté musíte přidat odkaz na tento soubor CSS do souboru HTML pomocí relativního odkazu:
<link rel="stylesheet" href="fonts.css" />V prvku @ font-face v souboru CSS budete muset změnit odkaz na adresu URL na nové relativní umístění písma nebo jednoduše byste mohli vložit složku písma ve složce stylového listu.
7. Volání písma
Jak vidíte ve vzorovém index.html souboru, existují dva způsoby, jak odkazovat na vlastní písmo, ať už jeho znakem (unicode nebo jménem) nebo názvem jeho třídy. První příklad používá podmínku s ikonou dat HTML5
<div aria-hidden="true" data-icon="g"></div>Zde se používá třída fs1 pro nastavení velikosti písma. Aria-skrytá reference pomáhá zajistit, aby znak nebyl mluvený žádnými čtečky obrazovky.
Druhá metoda používá span element:
<span aria-hidden="true"></span>Tato metoda je užitečná, když chcete, aby symbol seděl v řádku s normálním textem.
Chcete-li ikonu vytvořit odkaz, můžete ji zabalit do href :
8. Pokročilé nápady
Jak jsme právě zjistili se stavem pohybu myši, změna barvy ikony je stejně snadná jako nastavení vlastností barvy v našem CSS a změna velikosti je stejně snadná jako nastavení vlastnosti písma. Můžete také nastavit další vlastnosti, jako například stín textu a průhlednost, a to při zachování nezávislosti písma.
Vyzkoušejte to a zaručuji, že už nikdy nebudete používat bitmapové ikony.
Pokusili jste se používat písma pro ikony? Jak jsi to našel? Dejte nám vědět v komentářích.