Jak sprawdzić, jakiej czcionki używa witryna?

Jeśli kiedykolwiek byłeś całkowicie zafascynowany czcionką, którą zobaczyłeś na stronie internetowej, być może zastanawiałeś się, jak odkryć, jak to się nazywa, aby móc użyć jej we własnych treściach. Wysokiej jakości typografia może poprawić wrażenia czytelnicze odwiedzających, dlatego warto spróbować ją znaleźć. Bez względu na powód, dla którego sprawdzasz, jaka czcionka jest używana na stronie internetowej, istnieje wiele narzędzi, które mogą pomóc.

W tym artykule omówimy, dlaczego warto sprawdzić, jakiej czcionki używa strona internetowa. Pokażemy Ci również, jak to zrobić.

Zacznijmy!

Subskrybuj nasz kanał YouTube

Dlaczego warto sprawdzić, jakiej czcionki używa strona internetowa

Jak już wspomnieliśmy, piękne i czytelne czcionki mogą poprawić wrażenia użytkownika (UX) i czytelność Twojej witryny. Zapewnia również, że odwiedzający mogą wygodnie korzystać z Twoich treści, nie próbując ich rozszyfrować. Jeśli Twój tekst jest stylowy, ale nieczytelny, czytelnicy będą mieli trudności ze zrozumieniem lub docenieniem Twojego materiału.

Przyciski wezwania do działania (CTA) mogą również okazać się prawie bezużyteczne, jeśli ich tekst nie jest czytelny. Dlatego warto mieć listę czcionek, które przyciągają uwagę, ponieważ są zarówno stylowe, jak i czytelne. Następnie możesz ich używać na swojej stronie lub dla klienta w przyszłości.

Jak sprawdzić, jakiej czcionki używa strona internetowa (3 dostępne metody)

Istnieje wiele metod, których możesz użyć, aby sprawdzić, jakiej czcionki używa strona internetowa. Funkcja inspekcji przeglądarki jest doskonałym rozwiązaniem, ale istnieją rozszerzenia, które mogą dawać równoważne efekty. Możesz nawet znaleźć czcionki z obrazów za pomocą narzędzi online. Przyjrzyjmy się każdej z tych opcji.

1. Zidentyfikuj czcionki za pomocą narzędzia Browser Inspector

Jednym z najłatwiejszych sposobów sprawdzenia, jakiej czcionki używa witryna, jest użycie narzędzia inspektora przeglądarki. Chociaż w tym przykładzie będziemy pracować z Inspektorem Chrome, warto zauważyć, że inne przeglądarki mają równoważne funkcje.

Najpierw kliknij prawym przyciskiem myszy stronę zawierającą czcionkę, którą chcesz znaleźć. Z wyświetlonego menu wybierz Sprawdź:

Jeśli wolisz używać skrótu klawiaturowego, spróbuj Ctrl+Shift+I dla Windows lub Linux. Jeśli używasz komputera Mac, odpowiednikiem jest Cmd+Shift+I.

W oknie po prawej stronie ekranu poszukaj tekstu przy użyciu czcionki, którą chcesz sprawdzić. Zostanie podświetlony po wybraniu odpowiedniego elementu HTML:

Następnie kliknij kartę Obliczone i wyszukaj „rodzina czcionek”:

Powinieneś zobaczyć tutaj nazwę czcionki i jej styl.

Aby zobaczyć CSS związany z czcionką, zajrzyj na kartę Style . Możesz przewijać, aby wyszukać wartości związane z czcionkami. Jednakże, ponieważ mogą tu występować nadpisania i nieistotne reguły stylów, karta Obliczone jest zwykle bardziej pomocna.

2. Znajdź czcionki za pomocą rozszerzenia przeglądarki

Rozszerzenia przeglądarki mogą zapewnić prostszy sposób znajdowania szczegółów czcionek w witrynie, zwłaszcza jeśli nie czujesz się komfortowo z Inspektorem. Co więcej, zazwyczaj szybciej udzielą odpowiedzi, której szukasz, dzięki czemu możesz wrócić do wykonywanego zadania.

Niektóre takie dodatki obejmują:

• Fontanello: Bezpłatne w użyciu, to rozszerzenie pozwala znaleźć nazwę czcionki, wagę, styl i po prostu przez podświetlenie i kliknięcie prawym przyciskiem myszy podczas przeglądania.
• WhatFont: Jeszcze bardziej usprawniając wykrywanie czcionek, WhatFont umożliwia wyświetlenie nazwy kroju pisma po najechaniu na nią kursorem.
• CSS Peeper: Stworzone z myślą o projektantach stron internetowych, to rozszerzenie jest nieco bardziej niezawodne i może podać dodatkowe szczegóły z kodu CSS strony internetowej.

Jednak każde z tych rozszerzeń ma zróżnicowaną obsługę przeglądarek. WhatFont jest dostępny dla przeglądarek Firefox, Chrome, Safari i Internet Explorer. Z drugiej strony Fontanello jest dostępny tylko dla Firefoksa i Chrome. CSS Peeper to narzędzie specyficzne dla Chrome, którego nie możesz używać na żadnej innej platformie.

Aby szybko znaleźć nazwę określonej czcionki, najłatwiejszą opcją jest WhatFont. Ponieważ obsługuje również większość przeglądarek, użyjemy go do szybkiej demonstracji.

Po zainstalowaniu WhatFont możesz sprawdzić, jakiej czcionki używa witryna, aktywując ją na pasku narzędzi przeglądarki i najeżdżając na jakiś tekst:

Gdy po raz pierwszy najedziesz kursorem na tekst, zobaczysz tylko nazwę czcionki. Jednak kliknięcie nazwy spowoduje wyświetlenie rozwiniętego wyskakującego okienka z dodatkowymi szczegółami, takimi jak rozmiar, waga, kolor i wysokość linii. Może również określić, czy krój pisma jest dostępny za pośrednictwem Typekit lub Google Fonts.

Po zakończeniu sprawdzania szczegółów czcionki możesz wyjść z narzędzia za pomocą przycisku Zakończ WhatFont w prawym górnym rogu okna przeglądarki.

3. Wykryj czcionki w obrazach

Na koniec możesz również spróbować wyświetlić czcionki używane w obrazach. Obejmuje to kroje pisma, które widziałeś w logo lub infografikach. Z naszego doświadczenia z wykrywaczami czcionek wynika, że ​​WhatTheFont jest najskuteczniejszym narzędziem online do tego zadania.

Aby użyć WhatTheFont, musisz przesłać dany obraz i wybrać sekcję z odpowiednią czcionką:

Następnie zwróci stronę wyników z kilkoma czcionkami, które są podobne, jeśli nie dokładne, do tej, którą próbujesz zidentyfikować:

Twój wskaźnik sukcesu tutaj może się różnić w zależności od źródła i popularności czcionki. Jeśli dokładna nazwa kroju pisma jest dla Ciebie bardzo ważna, może być trudno znaleźć narzędzie, które da Ci to, czego chcesz.

Jeśli jednak jesteś otwarty na używanie czcionki podobnej do tej, którą znalazłeś na obrazie, wykrywacz online powinien dobrze pasować do Twoich potrzeb.

Wniosek

Atrakcyjne wizualnie i czytelne czcionki mogą poprawić wrażenia z czytania dla odwiedzających Twoją witrynę. Może to skłonić Cię do szukania nowych krojów pisma, których możesz użyć w swojej witrynie lub dla swoich klientów. Bez względu na powód, dla którego chcesz sprawdzić, jakiej czcionki używa strona internetowa, istnieje wiele narzędzi, które mogą Ci pomóc.

W tym poście omówiliśmy trzy metody sprawdzania, jakiej czcionki używa strona internetowa:

1. Identyfikuj czcionki za pomocą narzędzia inspektora przeglądarki.
2. Znajdź czcionki za pomocą rozszerzenia przeglądarki, takiego jak WhatFont.
3. Wykrywaj czcionki w obrazach za pomocą WhatTheFont.

Masz pytania, jak sprawdzić czcionkę używaną na stronie? Daj nam znać w sekcji komentarzy poniżej!

Zdjęcie autorstwa rudall30 / shutterstock.com