Jak zamienić swoje ikony w czcionkę internetową
Stworzyłem kilka zgrabnych ikon do przeprojektowania strony, którą robiłem, i przeglądałem nową stronę na starym iPadzie. Układ wyglądał dobrze w normalnym rozmiarze, ale zbliżając się do części strony, nagle zobaczyłem, że moja ikona była rozmytym bałaganem, podczas gdy tekstowy nagłówek wciąż był ostry i wyraźny. Na nowszym iPadzie z wyświetlaczem Retina ikony nie wyglądały na ostre, nawet w normalnym rozmiarze.
Pierwszym pomysłem, jaki miałem, było stworzenie podwójnych obrazów ikonek, ustawienie ich na połowę rozmiaru przy użyciu CSS. Chociaż sprawiło to, że wyglądają lepiej na ekranie Retina w normalnym rozmiarze, gdy tylko zaczniesz szczypać i powiększać, powróciło rozmazanie. Ale tekst był wciąż ostry i wyraźny.
Odpowiedź była oczywista. Musiałem włączyć moje ikony do czcionki.
W tym samouczku przyjrzymy się, jak zamienić ikony wektorowe na czcionki internetowe za pomocą świetnej bezpłatnej aplikacji internetowej o nazwie IcoMoon. Następnie przyjrzymy się, jak korzystać z wygenerowanych plików czcionek i CSS na stronie internetowej.
Zalety korzystania z czcionki ikon
Czcionka ikony ma kilka zalet w stosunku do obrazów bitmapowych, oprócz ostrości obrazu.
- Przydatność: czcionka ikony będzie o wiele mniejsza w rozmiarze pliku niż seria obrazów, szczególnie jeśli w przypadku wyświetlaczy Retina zostały użyte obrazy o podwójnych rozmiarach. Po załadowaniu czcionki ikony będą renderowane natychmiast, bez konieczności pobierania obrazu.
- Skalowalność: czcionkę ikony można ustawić na dowolny rozmiar, ustawiając
font-sizewłaściwość w towarzyszącym CSS. Umożliwia to eksperymentowanie z różnymi rozmiarami; mając na uwadze, że w przypadku obrazów bitmapowych konieczne będzie wydrukowanie pliku obrazu w każdym rozmiarze. - Elastyczność: efekty tekstowe można łatwo zastosować do ikony, w tym kolory, cienie i stoczenia. Będą również dobrze wyświetlane na tle dowolnego koloru lub obrazu.
- Kompatybilność: czcionki internetowe są obsługiwane przez wszystkie nowoczesne przeglądarki, a także starsze przeglądarki, nawet IE 6 i wcześniejsze.
Więc zacznijmy!
Tworzenie czcionki ikony
Czcionki symboli można budować za pomocą dedykowanej aplikacji do tworzenia czcionek, takiej jak Glify , ale profesjonalne narzędzie do typografii wykracza daleko poza potrzeby lub wymagania związane z budowaniem prostej czcionki ikon, w której relacja między postaciami (tj. kerning i ligatury) nie jest ważna.
Zdecydowanie najłatwiej jest użyć świetnej bezpłatnej aplikacji online o nazwie IcoMoon , przez Keyamoon, który usuwa wszystkie problemy związane z przekształcaniem symboli w czcionkę internetową.
Ta aplikacja HTML5 eliminuje wszelkie problemy związane z tworzeniem plików czcionek do prostych zastosowań, takich jak tworzenie czcionek ikon. IcoMoon jest dostarczany z wieloma zestawami ikon już załadowanymi, a możesz dodać więcej do swojej biblioteki, z których większość może być używana za darmo (sprawdź licencję). Jeśli szukasz dość standardowych ikon, takich jak "pobierz plik" i "koszyk na zakupy", może się okazać, że skorzystanie z jednego z nich jest lepsze niż stworzenie własnego.
Krok po kroku
1. Przygotuj swoje ilustracje
Na początek musisz utworzyć ikony w programie do rysowania wektorów, który może eksportować do formatu SVG, takiego jak Illustrator lub Inkscape.
Podczas projektowania możesz pracować z dowolnymi kolorami, ale ikony muszą być jednolite. Upewnij się, że każda ikona ma mniej więcej taki sam rozmiar. Posiadanie jednej ikony o wiele wyższej lub dłuższej od innej, utrudni zbudowanie spójnej czcionki. Tutaj musiałem zmniejszyć szerokość mojej ikony sterowca, aby pasowała do pozostałych.
2. Oczyść
Sprawdź dokładnie każdą ikonę, aby upewnić się, że nie ma ona niedoskonałości - szczegóły, które wyglądają dobrze w mniejszych rozmiarach, mogą ukryć małe defekty przy powiększaniu. W poniższej ikonie muszę usunąć postrzępione stopnie, które wkradły się podczas układania warstw.
W programie Illustrator użyj narzędzia Pathfinder, aby zjednoczyć nakładające się elementy, oraz elementu Minus Front, aby usunąć elementy wycinania, takie jak gwiazda w tych ikonach.
Podstawową zasadą jest zapewnienie czytelności ikony w małych skalach. Uprość jak najwięcej.
3. Eksportuj do SVG
Teraz wybierz ikonę, a następnie skopiuj i wklej ją do nowego dokumentu kwadratowego (na przykład 200 × 200 pikseli). Skaluj ikonę, aby pasowała. Przydatne może być ustawienie linijki bazowej. Pokoloruj ikonę, aby stała się czarna na białym tle.
Teraz wybierz File… Save as i zapisz plik jako plik SVG. Użyj domyślnych ustawień SVG. Po wykonaniu tej czynności dla wszystkich ikon możesz przystąpić do tworzenia czcionki internetowej.
4. Zaimportuj do IcoMoon
Otworzyć Aplikacja internetowa IcoMoon . Aby zaimportować ikonę, kliknij przycisk "Importuj ikony", a następnie wybierz pliki SVG, które chcesz dodać - możesz dodać wiele plików naraz. Będą one wyświetlane pod "Twoimi ikonami niestandardowymi". Jeśli zostaną podświetlone na żółto, będą częścią czcionki ikony, którą utworzysz. W tym przykładzie widać, że postanowiłem nie eksportować jednej z moich własnych ikon, a dodałem jedną z ikon z "Mini-ikon".
5. Wyeksportuj czcionkę z IcoMoon
Możesz kliknąć przycisk "Edytuj", jeśli chcesz zmienić pozycję, rozmiar lub obrót ikony. Użyj przycisku "Zapisz kopię", aby utworzyć wariacje ikon (na przykład odbicie lustrzane ikony). Dodaj znaczący znacznik do ikony, ponieważ będzie on używany do generowania dla niego nazwy klasy.
Kiedy będziesz gotowy, kliknij przycisk "Czcionka" u dołu ekranu, aby rozpocząć generowanie czcionki. Tutaj możesz przypisać ikonkę do której postaci; na przykład, jeśli twój zestaw ikon to sześć obrazów obracającej się kulki, możesz przypisać znaki do sześciu ramek , q, w, e, r, t i y . W preferencjach wybierz nazwę czcionki. Możesz także dostosować parametry czcionki, ale jeśli nie ustawisz niestandardowej czcionki obok tekstu standardowego, nie musisz się tym martwić.
6. Pobierz pliki czcionek
Kliknij "Pobierz", aby pobrać pakiet czcionek na swój komputer. Będzie to podfolder zawierający same czcionki (w formatach WOFF, EOT i TTF), a także przykładową stronę HTML i odpowiedni CSS. Istnieje nawet plik JavaScript z obejściem, jeśli potrzebujesz obsługi IE 6 lub 7.
Aby dodać czcionki do projektu, skopiuj podfolder czcionki do swojej witryny. Możesz skopiować i wkleić CSS z pliku style.css do pliku CSS swojej własnej strony, ale moim podejściem jest zmiana nazwy na fonts.css i zachowanie go jako oddzielnego pliku CSS. Następnie musisz dodać odniesienie do tego pliku CSS w pliku HTML za pomocą odnośnego linku:
<link rel="stylesheet" href="fonts.css" />W elemencie @ font-face pliku CSS należy zmienić odniesienie do nowej względnej lokalizacji czcionek lub po prostu upuścić folder czcionek w folderze arkusza stylów.
7. Wywołanie czcionki
Jak widać w przykładowym pliku index.html , istnieją dwa sposoby odniesienia czcionki niestandardowej poprzez jej znak (unikod lub nazwę) lub nazwę klasy. Pierwszy przykład wykorzystuje stan ikony danych HTML5
<div aria-hidden="true" data-icon="g"></div>W tym przypadku klasa fs1 służy do ustawiania rozmiaru czcionki. Ukryte w arii referencje pomagają upewnić się, że postać nie jest odczytywana przez żadne czytniki ekranu.
Druga metoda wykorzystuje element span:
<span aria-hidden="true"></span>Ta metoda jest przydatna, gdy chcesz, aby symbol siedział w linii z normalnym tekstem.
Jeśli chcesz, aby ikona była linkiem, możesz zawinąć je wszystkie w href :
8. Zaawansowane pomysły
Jak już odkryliśmy po najechaniu kursorem, zmiana koloru ikony jest tak łatwa jak ustawienie właściwości koloru w naszym CSS, a zmiana rozmiaru jest równie łatwa, jak ustawienie właściwości rozmiaru czcionki. Możesz także ustawić inne właściwości, takie jak cienie i przezroczystość tekstu, zachowując jednocześnie rozdzielczość niezależności czcionki.
Wypróbuj i gwarantuję, że nigdy więcej nie użyjesz ikon bitmapowych.
Czy próbowałeś używać czcionek do ikon? Jak to znalazłeś? Daj nam znać w komentarzach.