Jak rozpoznać font umieszczony na obrazku (zdjęciu jpg, bmp, gif, png itp.)

laptop blog

Kategoria wpisu Frontend, Grafika, Kursy Tagi: , , , , , , , , on przez .



Zapewne każdy choć raz oglądając grafiki na stronach internetowych zastanawiał się jakiego fontu (tzw. czcionki) na niej użyto. Czasem są to proste fonty i łatwo się domyśleć jaki to może być krój, ale przeważnie jest to dość kłopotliwe (np. w logach i logotypach). Co gorsza mnie samej zdarza się, że piszę coś na obrazku a potem nie pamiętam jakiego fonta użyłam.

font czy czionkaPrzeważnie kończyło to się przeglądaniem całej biblioteki fontów w wielu programach nazywanych czcionkami (np. w Gimp, OpenOffice) zapisanych na moim komputerze. Co jest bardzo czasochłonne.

Dlatego zaczęłam szukać sposobu, który ułatwił by mi pracę. Poniżej napiszę jak to zrobić:

Jak rozpoznać krój fontu w internecie

Otwieramy obrazek w programie do obrabiania grafiki np. Adobe Photoshop, Gimp, Paint.

Następnie wycinamy z obrazka fragment zawierający tekst. Robimy to w taki sposób by na wyciętym kawałku nie było innych zbędnych elementów.

Zapisujemy obrazek w formacie: jpg, bmp, gif, png

Teraz przechodzimy na jedną z stron internetowych:

Na stronie dostępne są dwie opcje.
Za pomocą pierwszej ładujemy obrazek z dysku naszego komputera.
Druga umożliwia wpisanie adresu URL pliku graficznego

Teraz wybieramy przycisk Continue i czekamy chwilę aż skrypt na stronie przeanalizuje font.

Warto też zwrócić uwagę na to czy tło ładowanego obrazka nie jest ciemniejsze od tekstu. W takim przypadku musimy zaznaczyć odpowiednią opcje.

W kolejnym etapie litery zaprezentowane przez aplikacje mogą być podzielone na rożne fragmenty w takim przypadku musimy je poprawnie złożyć. Wystarczy chwycić jeden element i dodać go do kolejnego.

http://www.myfonts.com/WhatTheFont

składanie fonta/czcionki elektronicznej http://www.myfonts.com/WhatTheFont

Czasami musimy też samodzielnie wprowadzić nazwy pojedynczych liter. Część stron tego typu nie posiada w swojej bazie fontów z polskimi znakami dlatego warto zamienić je na odpowiedniki bez znaków diakrytycznych typowych dla języka czyli ą na a, ę na e.

Na koniec otrzymamy nazwę interesującego nas kroju oraz listę fontów, które zdaniem skryptu są podobne do tej z obrazka.

propozycje fonta

propozycje fonta

Uwaga: jeśli obrazek jest mały a napis jest niewyraźny, zamazany algorytm programu może mieć problem z określeniem jaki to font. Mimo to zaproponuje nam najbardziej jego zdanie zbliżony krój.

W związku, że wpis dotyczy rozpoznawania fontu na ilustracjach i grafikach pominęłam w nim metody rozpoznawania fontu treści na stronach internetowych (np. z pomocą WhatFont, Fontface Ninja).

Jaki font (czcionka) został użyty na stronie?

Dodatkowe tagi:
jaka to czcionka
jak rozpoznać font
napis na obrazku
ilustracja z tekstem
wykrywacz czcionek elektronicznych
jakie to czcionki
zdjęciu jpg, bmp, gif, png itp.
font umieszczony na obrazku
czym jest napisany tekst na płótnie, rycinie

Przeczytaj również

Google fonts – fonty na twoją stronę interne... Jak pisałam we wcześniejszym artykule nie można umieszczać dowolnego fontu na stronie internetowej nie ryzykując, tego że u kogoś się źle wyświetli lu...
Zmiana wyglądu pierwszej litery Z pewnością ładnie jest rozpocząć tekst jak w starych księgach z wyróżnioną pierwszą literą. Z pozoru może się to wydawać trudne jednak w cale takie n...
Zabezpieczanie strony za pomocą .htaccess Plik .htaccess to ukryty plik konfiguracyjny serwera Apache (ale nie tylko). Za jego pomocą można sterować ustawieniami strony.  Wystarczy umieścić .h...
Jak zrobić własną stronę błędu 404? – htacce... Strona błędu 404 - brzmi to z ozoru trochę enigmatycznie. Mimo to strona ta znana praktycznie każdemu - ponieważ oznacza brak konkretnej podstrony w d...