Nie ważne czy wierzysz w badania nad przyzwyczajeniami i skojarzeniami, chcesz by Twoja strona była przyjemna dla oka odwiedzających, czy też po prostu chcesz by użytkownicy mogli szybko dowiedzieć się do czego służy dany element - w tej czy innej postaci na Twojej stronie pewnie znajdują się jakieś ikonki.

Moje logo musi być większe!

Każdy kto tworzył kiedykolwiek stronę internetową wie ile wiąże się z tym problemów - często koncepcja zmienia się parokrotnie, raz zmieniamy kształt, raz kolor, innym razem dodajemy cień. Dla polepszenia wydajności strony montujemy nasze ikonki w sprite by przeglądarka nie musiała pobierać dziesiątek obrazków. W takim wypadku zmiana ciągnie za sobą konieczność zmiany sprite, a nie daj Bóg klient wymyśli sobie, by ikonka była większa - nasz idealnie wykalkulowany sprite wziął w łeb i dopychamy kolejny symbol. No i nie wspominajmy już o problemie skalowania - często obrazki wykorzystane w tle po prostu nie chcą skalować się tak, jak byśmy tego oczekiwali.

Z pomocą przychodzi nam stosowanie czcionek, w których zamiast liter (pozwolę sobie na takie uproszczenie) autorzy osadzili różne często wykorzystywane ikony czy logotypy. Jedną z takich czcionek jest WebSymbols.

Jeżeli zajrzymy na stronę projektu - a nasza przeglądarka obsługuje @font-face - ujrzymy zestawienie symboli i logotypów. Nie są to jednak obrazki, ale glify (znowu upraszczam) ze wspomnianej czcionki - każdy zastępuje jedną literę, znak czy cyfrę.

Ok, ale po co mi kolejny "sprite"?

Dzięki takiemu rozwiązaniu możemy utworzyć coś na kształt spritu obrazków, jednak zawierać będzie on tylko symbole. Co ciekawsze, możemy zmieniać ich rozmiar (font-size), kolor (color) oraz tło (background). Możemy także pójść na całość - dodać cień, albo proste animacje (na powyższej stronie animacja "ładowania" to po prostu element, którego zawartość zamieniana jest na kolejne cyfry z zestawu 1 - 7). Oto przykład ze strony powyżej:

Każdy z tych elementów wyświetlony został bez użycia obrazków - dodatkowy efekt wygładzenia zależny jest od konfiguracji przeglądarki i systemu operacyjnego.

Dodatkowo, czcionka w najpopularniejszym (pod wzg. obsługi przez przeglądarki) formacie - TTF - to jedyne 12kb - dużo mniej niż umieszczenie wszystkich tych symboli jako grafika.

Jedno ale ...

Niestety, jeżeli czcionka nie zawiera interesującego nas elementu mamy 3 wyjścia:

• znaleźć inną, która będzie go zawierać (np. Fico, rozwiązanie płatne)
• zastosować element graficzny
• przygotować własny zestaw glifów i stworzyć własną czcionkę

Przyznam, że osobiście nie miałem jeszcze okazji wykorzystać tego rozwiązania w większym projekcie, ale podczas testów wewnątrz firmy nie napotkałem żadnych problemów ze stosowaniem tej techniki.

Komentarze

1

Komentarz użytkownika zx

08 12 2011

Kurcze, fajne! Prosty sposób na wektory na stronach. Choć w sumie można by użyć SVG.

2

Komentarz użytkownika BTM

08 12 2011

W paczce z czcionką znajdziesz także plik websymbols-regular-webfont.svg, dla przeglądarek, które obsługują/preferują ten format :)

3

Komentarz użytkownika skoruppa

08 12 2011

Dwa super użyteczne wpisy pod rząd :D dzięki! Zasłużyłeś na subskrypcje :) Czekam z niecierpliwością na kolejne wpisy!

4

Komentarz użytkownika Januszek

09 12 2011

Ej, ale to chyba nie jest takie różowe i w ogóle - te ikonki twitterra, linkedina i bloggera (?) będą wyglądały tak ładnie tylko na takim tle - na czarnym te wszystkie białe miejsca będą czarne, rajt?

5

Komentarz użytkownika jam łasica

09 12 2011

sf.net stosuje chyba coś podobnego, przykład: http://sourceforge.net/projects/vlc/files/ (ikona RSS lub folderu)
Tylko po wyłączeniu opcji gfx.downloadable_fonts.enabled w Fx, wszystko wygląda dziwnie ;)

6

Komentarz użytkownika BTM

09 12 2011

@Januszek: tak, nie jest to rozwiązanie doskonałe - przy definiowaniu fontów nie możesz określić, że któryś element musi być zawsze biały etc.

@jam łasica: SF używa płatnej czcionki Pictos. Przy wyłączeniu opcji pobierania / wyświetlania czcionek ... cóż - nie wygląda to różowo. Gdyby IE obsługiwało :before/:after i content można by się postarać o fajny fallback - a tak zostaje nam mieć nadzieję, że nikt sobie tego nie wyłączy ;)

8

Komentarz użytkownika trójkąt

09 12 2011

Zawsze można wykorzystać też znaczki UTF - http://tools.arantius.com/utf?f=9472&t=9841

9

Komentarz użytkownika BTM

09 12 2011

Jasne, jeżeli chcesz mieć ramki jak w DOS ;) A tak poważniej - oczywiście, że można, jednak domyślnie nie ma wśród nich praktycznie nic co nadawało by się na strony (poza strzałkami etc.)