Przewodnik po lepszych i ostrzejszych ikonach interfejsu użytkownika za pomocą czcionek internetowych

Jeśli jesteś zaznajomiony z używaniem formatów obrazów bitmapowych (takich jak PNG i GIF) do wyświetlania ikon na stronie internetowej, będziesz również zaznajomiony z jego wadami. Przede wszystkim, w zależności od wymiaru i liczby informacji o kolorze, które ma ikona, rozmiar pliku ikony może być bardzo duży.

Jeśli mamy zbyt wiele ikon do umieszczenia w witrynie, potencjalnie spowolni to działanie strony internetowej, ponieważ przeglądarka musi wykonać wiele żądań HTTP. Chociaż ten problem można rozwiązać za pomocą ikonki CSS, rozmiar pliku jest nadal duży.

Ikona bitmapy ma również braki w elastyczności i skalowalności; powiedzmy, że musimy powiększyć lub powiększyć ikonę do pewnego poziomu lub wyświetlić ją za pomocą bardzo wysokiej rozdzielczości ekranu, np. na wyświetlaczu siatkówki; ikona na pewno okazują się rozmyte.

Cóż, jeśli weźmiesz pod uwagę niektóre z powyższych kwestii, prawdopodobnie będziesz musiał użyć czcionek ikon.

Korzystanie z czcionek ikon

Na czcionka ikony to zestaw ikon zapakowanych w czcionkę internetową, którą można później osadzić na stronie internetowej @ font-face. Jak zauważył Chris w CSS-trick, istnieje wiele korzyści płynących z używania czcionki w obrazie do dostarczania ikon;

Czcionka to obiekt oparty na wektorze, który ze swej natury jest niezależny od rozdzielczości, więc ikona pozostanie tak wyraźna w różnych rozdzielczościach ekranu, w tym w bardzo wysokich rozdzielczościach ekranu (takich jak poziom siatkówki).
Jest również skalowalny, umożliwiając powiększanie na wielu poziomach bez utraty jakości i precyzji.
Ponieważ ikona jest w zasadzie czcionką, możemy również kontrolować kolor, przezroczystość, cień tekstu, a nawet zmieniać jego rozmiar za pomocą arkusza stylów
Możemy również animować ikonę za pomocą CSS3.
Ikona jest wywoływana za pomocą @ font-face reguła, która była obsługiwana już od Internet Explorera 4 (z .eot).
Mniejsza prośba HTTP i mniejszy rozmiar pliku.

Oto niektóre z najlepszych darmowych czcionek ikon, które możemy znaleźć:

Czcionka niesamowita
IcoMoon
Ikony mediów społecznościowych
Ikony podstawki Zurb

Upewnij się, że sprawdziłeś i przestrzegałeś licencji, zanim umieścisz ją w swojej witrynie, aby uczcić czas i ciężką pracę autora.

@ font-face Reguła

Jak już wspomnieliśmy, ikony są osadzone za pomocą @ font-face rządzić przez arkusz stylów definiujący nowy rodzina czcionek. W poniższym przykładzie użyjemy symboli internetowych;

 @ font-face font-family: 'WebSymbolsRegular'; src: url ('fonts / websymbols-regular-webfont.eot'); src: url ('fonts / websymbols-regular-webfont.eot? #iefix') format ('embedded-opentype'), url ('fonts / websymbols-regular-webfont.woff') format ('woff'), adres URL (format „fonts / websymbols-regular-webfont.ttf”) („truetype”), url („fonts / websymbols-regular-webfont.svg # WebSymbolsRegular”) w formacie („svg”);

Następnie w dokumencie HTML musimy tylko dodać znaki reprezentujące ikonę, a nie stosować nowe rodzina czcionek szeroko w dokumencie, możemy zrobić bardziej szczegółowo, dodając dodatkową klasę do pewnych elementów, w które ikona musi być renderowana, tak;

  h
 ja
 jot
 ZA
 ja

Wracając do arkusza stylów, definiujemy nowy rodzina czcionek dla tej klasy, którą właśnie dodaliśmy:

 .icon-font font-family: WebSymbolsRegular; rozmiar czcionki: 12pt;

Demo @ font-face

Korzystanie z pseudoelementów

Jeśli ikona jest traktowana jako element boczny, możemy również dostarczyć ikonę pseudoelement. Zakładając, że nasz znacznik HTML wygląda następująco:

  Odpowiadać
 Odpowiedz wszystkim
 Naprzód
 przywiązanie
 Obraz

Możemy to zrobić w ten sposób w arkuszu stylów:

 ul.icon-font.pseudo li: before font-family: WebSymbolsRegular; margin-right: 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

Prywatne użycie Unicode

Istnieją okoliczności, w których ikony nie zostały osadzone w literach (A, B, C, D itp.), Ale zostały osadzone w Unicode Private Use, aby zminimalizować konflikt między postaciami. Podobnie jak w FontAwesome, autor na szczęście dodał cały kod znaków w arkuszu stylów, który wygląda tak;

 .icon-glass: before content: "0c6";

Ale kiedy musimy osadzić ikonę bezpośrednio w HTML, coś takiego jak poniższy kod f0c6 nie renderuje wskazanej ikony, ponieważ nie jest to prawidłowy znak zakodowany w HTML.

HTML potrzebuje numerycznego znacznika referencyjnego do renderowania znaków specjalnych. Omówiliśmy to nieco w naszym poprzednim samouczku na temat przycisków CSS3; ta postać jest poprzedzona kombinacją znaku handlowego i znaku (&), znak skrótu (#) i x następnie następuje liczba szesnastkowa reprezentująca znak.

Na przykład f0c6 jest liczbą szesnastkową, więc numeryczne odwołanie do znaków w HTML będzie & # xf0c6;, w FontAwesome ten kod wyświetli ikona spinacza do papieru, tak;

Demo Unicode

Podzbiór czcionek

Ikony w kolekcji mogą nie być potrzebne. W takim przypadku możemy upuścić nieużywane znaki, ustawiając czcionkę, która również będzie powodują mniejsze rozmiary plików czcionek. Na szczęście istnieje poręczne narzędzie FontSquirrel do łatwego wykonywania tej pracy, generator @ font-face.

Po przejściu na tę stronę i dodaniu czcionki wybierz Ekspert. Zobaczysz więcej opcji; Wybierz Niestandardowe podzbiór.

W tym przykładzie używamy czcionki Sociolico, aby wyświetlić ikony mediów społecznościowych w naszej witrynie, ale potrzebne nam ikony to tylko Dribble, Facebook i Twitter, które są odpowiednio reprezentowane przez te znaki; d, f i t. Tak więc umieść te znaki w polu wprowadzania pojedynczych znaków w następujący sposób:

I skończyliśmy. Teraz możemy pobrać czcionkę iw moim przypadku rozmiar czcionki okazał się wynosić tylko od 3 KB do 5 KB. Pamiętaj też, że jedynymi postaciami, które zostanie wyrenderowany jako ikona tylko d, f i t, podczas gdy inne znaki będą tylko zwykłą literą.

Końcowa myśl

Jedną z rzeczy, których nie możemy zrobić w tej praktyce, jest dodanie bardzo szczegółowych efektów, takich jak ten, do ikony.

Jeśli jednak nasz ogólny projekt nie wymaga szczegółów na tym poziomie, takie podejście może być lepszym sposobem wyświetlania ikon na stronach internetowych. Ma elastyczność, skalowalność, jest gotowy na siatkówkę z bardzo małym rozmiarem pliku, o co jeszcze możemy prosić?

Na koniec, jeśli chcesz zagłębić się w ten temat, poniżej zebraliśmy kilka przydatnych referencji, a także nasze demo i kod źródłowy do pobrania.

Jak zrobić własną ikonę Webfont - WebDesignerDepot.com
Wyświetlanie czcionek i atrybutów danych - 24 dni
Prywatne użycie Unicode - Wikipedia

Próbny
Pobierz źródło