Czy kiedykolwiek zadarzało Ci się, że spodobał się design strony? Posiada atrakcyjne zdjęcia, ciekawy układy tresści, jasny schemat kolorów, ale co najważniejsze - znakomity font, który chiałbyś wykorzystać na swojej witrynie.
Projektanci często napotykają na sytuacje, gdy trzeba dowiedzieć się nazwę fontu użytego na zdjęciu lub na stronie internetowej. Przeglądanie ogoromnych kolekcji fontów nie gwarantuje sukcesu, nie mówiąc, że to zajęcie wymaga poświęcenia mnóstwa czasu. I nie fak, że pożądany font znajduje się w przeglądanym zestawie.
Zawsze możesz poprosić o pomoc doświadczonych projektantów , znaleźć odpowiednie forum lub wyszukać wybrać font z kolekcji TemplateMonster. Jeśli chodzi o fora, przygotuj się na czekanie: może dzień, może kilka tygodni.
... Ale co, jeśli nie masz czasu na to?
Dobra wiadomość jest taka, że jest to łatwiejsze niż myślisz. Możesz szukać font według zdjęć za pomocą specjalnych stron internetowych. Możesz nawet pobrać rozszerzenie przeglądarki dla większej wygody.
Dzisiaj wybrałam kilka darmowych detektorów fontów, o których powinniście wiedzieć jako projektanci stron internetowych. Wybór narzędzia do rozpoznawania fontów to tylko pierwszy krok do umieszczenia ich na własnej stronie internetowej.
Krok 1 - Rozpoznaj font ze zdjęcia za pomocą narzędzi takich jak:
1. What Font Is
"What Font Is" to najpopularniejszy serwis do rozpoznawania fontów ze zdjęcia lub zrzutu ekranu. Wystarczy przesłać zdjęcie (lub podać adres URL), a oprogramowanie wyświetli najbardziej podobne opcje dostępne w sklepie MyFonts. Według twórców What Font Is wymagania dla obrazu to:
- wyraźnie poziomy tekst
- wysokość liter nie mniejsza niż 100 pikseli
- litery nie stykają się ze sobą
- nie więcej niż 50 znaków
2. What The Font
WhatTheFont jeszcze jeden znany serwis do rozpoznawania fontów. Na pierwszy rzut oka wydaje się, że jest podobny do serwisu What Font Is, ale nie. Z WhatTheFont wszystko jest nieco bardziej skomplikowane: ostateczny wynik zależy bezpośrednio od jakości zdjęcia z fontem. Nawiasem mówiąc, oprogramowanie automatycznie nie optymalizuje zdjęcia.
3. Font Squirrel
Może wydawać się, że FontSquirrel działa dokładnie tak samo, jak poprzednie dwa serwisy: przesyłasz zdjęcia, przycinasz font, a oprogramowanie wykrywa możliwe pasujące warianty. Ale Font Squirrel posiada jedną wyjątkową funkcję - możliwość obracania zdjęć i rozpoznawania fontów osadzonych w niekonwencjonalnej formie. Jest to bardzo przydatny instrument, gdy zdjęcie zawieraja fonty, które nie są umieszczone w zwykłej poziomej pozycji.
4. Matcherator
Matcherator jest niesamowitym narzędziem do rozpoznawania fontów pod względem łatwości użycia. Witryna ma wygodną funkcję "Przeciągnij-i-Upuść. Oznacza to, że możesz umieścić zdjęcie z fontem po prostu przeciągając go na stronę za pomocą myszy. Program z pewnością znajdzie to, czego potrzebujesz! Za pomocą tego narzędzia można bez żadnych opłat rozpoznać wszystkie rodzaje fontów.
5. Fontface Ninja
FontFaceNinja jest obecnie niekwestionowanym liderem. Rozszerzenie nie tylko pomaga w znalezieniu tytułu fontu na stronie, ale pozwala aby wypróbować ten font. Co więcej, pozwala pobrać fonty, które znalazłeś!
Także FontFaceNinja posiada specjalnie narzędzie, które ukrywa wszystkie reklamy na stronie, co pozwala pracować tylko z fontami. Rozszerzenie jest całkowicie bezpłatne i działa z Chrome i Safari.
6. Type Sample
To jest kolejne przydatne rozszerzenie, niestety, tylko dla użytkowników przeglądarki Chrome. Działa podobnie do poprzedniego narzędzia, chociaż Type Sample może pochwalić się kilkoma wyjątkowymi funkcjami. Możliwość "gry z fontami" w czasie rzeczywistym zasługuje na szczególną uwagę. Po kliknięciu na podświetlony blok tekstowy można zmienić rozmiar fontu, obejrzeć pangram, wpisać własny tekst i wypróbować kilka innych funkcji niedostępnych w innych serwisach.
7. WhatFont
Dostępne dla Chrome i Firefox rozszerzenie WhatFont na pierwszy rzut oka nie wydaje się serwisem super funkcjonalnym. Ale prawda jest taka, że ten serwis dostarcza użytkownikom wielu informacji na temat wybranego fontu. Funkcja WhatFont umożliwia definiowanie nie tylko font tiles, ale także ich wysokości, stylu, rozmiaru, rodziny fontów oraz aktualnego kodu kolorów. Także można przejrzeć wszystkie litery oznaczone tym fontem, a nawet pobrać je pod warunkiem, że zostały opracowane przez Google.
8. Typ.io
Typ.io to idealny wybór dla maksymalistów, którzy nie lubią wykonywać dodatkowe czynności lub osób, którzy po prostu nie zawaracają sobie główy stylami fontów i kodami kolorów. Po zainstalowaniu rozszerzenia zobaczysz przycisk z literą "T" w dolnym kącie przeglądarki. Kliknięcie tego przycisku spowoduje wyświetlenie tytułów wszystkich fontów wskazanych na stronie w oddzielnej kolumnie. Aby dowiedzieć się, gdzie znajduje się font, kliknij w jego nazwę.
9. Fount
Fount to świetna wtyczka do rozpoznawania fontów na stronach internetowych. Aby skorzystać ze wtyczki, musisz dodać stronę do zakładek i kliknąć na nią. Kursor zmieni się w krzyż, więc po kliknięciu na font zobaczysz okno z tytułem, rozmiarem w pikselach, masą i stylem. Aby wyłączyć tryb Fountera - naciśnij go ponownie. Rozszerzenie działa z takimi przeglądarkami jak Safari, Chrome, Firefox i IE8 +.
Krok 2 - Podgląd fontu
Teraz, gdy już znalazłeś TEN font, trzeba sprawdzić czy pasuje on do stylu Twojej witryny. Ale pobieranie każdego fontu i wypróbowanie go na stronie będzie stratą czasu i pieniędzy, prawda?
Dobrą wiadomością jest to, że jeśli jesteś użytkownikiem przeglądarki Chrome, możesz uzyskać podgląd dowolnego dontu. Rozszerzenie Google Font Previewer pozwala przetestować dowolne fonty na stronie bez konieczności wchodzenia w tryb edycji. Możesz również "zaznaczać" najczęściej oglądane fonty i odznaczać je jako ulubione w aplikacji.
Krok 3 - Dodaj niestyndardowy font na stronę
Więc wybrałeś odpowiednie fonty, teraz nadszedł czas, aby dodać je na stronę. Najczęstszym sposobem na dodawanie niestandardowego fontu na stronę jest użycie reguły FontFace CSS.
- Pobierz fonty w odpowiednim formacie (.ttf lub .otf)
- Stwórz zestaw WebFont dla cross-browsing za pomocą generatora Webfont Generator
- Prześlij ten zestaw na stronę za pomocą FTP lub menedżera plików
- Zaktualizuj plik CSS
- Użyj niestandardowego dontu w swoich deklaracjach CSS
Jeśli Twoja strona jest oparta na WordPress, dodawanie fontu na stronę jest jeszcze łatwiejsze - po prostu skorzystaj ze specjalnej wtyczki. Możesz też dodać font ręcznie, używając pliku functions.php.
* * *
Ten artykuł został przetłumaczony z angielskiego. Oryginał można znaleźć tutaj: 9 Ways to Identify Fonts from Images and Web Text + Upload Them to Your Site.
* * *
Czasami najlepszym sposobem na znalezienie właściwego fontu jest poszukiwanie pięknych przykładów i kolekcji fontów w Internecie. Teraz, gdy masz dziewięć sposobów na rozpoznawanie fontów, gdy napotkasz na piękny font bez nazwy będziesz w stanie dowiedzieć się ją w ciągu kilka minut ... a może nawet szybciej!
P.S. Być może znasz inne dobre narzędzia do rozpoznawania fontów, o których nie wspomniałam. Daj mi znać w sekcji komentarzy!