Jak się dowiedzieć, jakich czcionek używa witryna?

Jeśli kiedykolwiek widziałeś szczególnie atrakcyjną witrynę i zastanawiałeś się, jak sprawdzić, jakich czcionek używa ta witryna, odpowiedź jest tak prosta, jak otwarcie inspektora przeglądarki. Każdy fragment strony jest interpretowany w Twojej przeglądarce. Tak więc, jeśli wiesz, jak prawidłowo korzystać z inspektora przeglądarki, możesz nie tylko znaleźć źródła, ale także obrazy, które zawiera, właściwości CSS każdego innego elementu znajdującego się na stronie.

W tym poście zobaczymy, jak korzystać z inspektora przeglądarki Chrome, aby dowiedzieć się, jakich czcionek używa witryna, a nawet jak zacząć się nimi bawić. Ale najpierw wyjaśnię, jak uzyskać do niego dostęp i jakie funkcje masz dostępne w inspektorze.

Uzyskaj dostęp do Inspektora Chrome

Jeśli używasz przeglądarki Chrome i chcesz sprawdzić witrynę, pierwszą rzeczą, którą powinieneś zrobić, jest dostęp do okna inspektora. Można to zrobić na kilka sposobów:

• Naciskając klawisz F12 lub
• Klikając prawym przyciskiem myszy określony element i w otwartym menu, uzyskaj dostęp do opcji Inspect . Zaletą tej metody jest to, że bezpośrednio podkreśla dany element lub
• Naciskając kombinację klawiszy Control + Shift + I (w systemie Windows) lub Cmd + Alt + I (w systemie Mac) lub
• Wchodząc do menu Chrome (3 kropki w prawym górnym pasku) » Więcej narzędzi » Narzędzia programistyczne.

Okno inspektora może być wyświetlane jako zintegrowane z samym oknem przeglądarki lub wyświetlane w osobnym oknie. Aby uzyskać dostęp do tych opcji, możesz to zrobić, klikając ikonę konfiguracji (3 kropki) w prawym górnym rogu inspektora i zmieniając wartość właściwości «Dock Side».

Masz również możliwość przeglądania zawartości strony w trybie widoku komputera lub tak, jakbyś przeglądał ją na urządzeniu mobilnym. Kliknij drugi przycisk po lewej stronie górnego paska inspektora, a zobaczysz, jak zawartość będzie automatycznie wyświetlana tak, jakbyś uzyskiwał do niej dostęp z urządzenia mobilnego.

Możesz również wskazać typ urządzenia, na którym chcesz go wyświetlać, rozmiar lub czy chcesz wyświetlać go w trybie pionowym lub poziomym.

Główne karty inspektora

Jak zapewne zauważyłeś, inspektor składa się z różnych zakładek.

Z każdego z nich będziesz miał dostęp do różnych funkcjonalności i funkcji:

• Elementy : pokazuje kod HTML strony oraz zastosowane style. możesz je także modyfikować i szybko dodawać nowe reguły.
• Konsola : pokazuje różne komunikaty o błędach i ostrzeżenia, które pojawiają się na stronie (obrazy, które się nie ładują, błędy JavaScript,…)
• Źródła : wyświetla drzewo zasobów strony. Możesz zobaczyć, skąd pochodzą różne zasoby i modyfikować je.
• Sieć : pokazuje różne żądania wysłane ze strony internetowej, dostęp do treści żądania, uzyskaną odpowiedź, czasy…
• Wydajność : pokazuje uruchomione procesy i służy do pomiaru wydajności strony.
• Pamięć : pokazuje pamięć zużytą podczas ładowania i wykonywania strony internetowej.
• Aplikacja : wyświetla przydatne informacje o zasobach używanych przez aplikację internetową.
• Bezpieczeństwo : wyświetla informacje o różnych witrynach otwieranych ze strony i ich odpowiednich certyfikatach.
• Audyty : umożliwia wygenerowanie raportu z audytu w celu sprawdzenia błędów.
• Istnieją wtyczki, które dodają zakładki i funkcje do inspektora, więc może być więcej zakładek. Na poprzednim obrazku widać, że zainstalowaliśmy wtyczkę Redux DevTools .

Karta elementów

Wróćmy teraz do omawianego zagadnienia: chcieliśmy poznać czcionkę dowolnej treści na stronie internetowej.

Jak wspomniałem wcześniej, z zakładki Elementy możesz uzyskać dostęp do kodu HTML i stylów różnych elementów na stronie, na której się znajdujesz.

Jak widać na powyższym obrazku, po lewej stronie masz główne okno, które pokazuje kod źródłowy. Po prawej stronie znajduje się panel reguł stylów CSS, które są stosowane do różnych elementów strony.

W rzeczywistości w panelu stylów masz trzy zakładki:

• Style : pokazuje zastosowane reguły CSS i możesz je modyfikować i dodawać nowe.
• Obliczone : pokazuje wszystkie reguły zastosowane do elementu, z panelem, który przedstawia granice, margines i wypełnienie elementu.
• Nasłuchiwania zdarzeń : pokazuje drzewo zdarzeń, które zostały uruchomione na stronie i steruje nimi.

Wyświetl szczegóły przedmiotu

Na przykład, jeśli przejdziesz do naszej głównej strony Nelio Software, wybierz słowa Nelio Software z tytułu i kliknij prawym przyciskiem myszy, aby sprawdzić, co to za przedmiot, otworzy się inspektor, pokazując powyższy obrazek.

Na obrazie inspektora widać, że główne okno mówi mi, że styl tytułu „Nelio Software” to h1 .

W tym samym oknie możesz kliknąć prawym przyciskiem myszy dowolny atrybut lub tekst i zmodyfikować go lub usunąć. Oczywiście wszelkie zmiany, które tutaj wprowadzisz, nie zmienią oryginalnej treści, ale jest to dokładnie bardzo przydatne narzędzie, gdy projektujesz strony i chcesz zorientować się, jak wygląda każda dokonana zmiana.

Zobacz czcionkę

Teraz wiesz, że to nagłówek, ale co z czcionką?

Cóż, bardzo proste, w zakładce Obliczone inspektora znajdziesz wszystkie właściwości wybranego elementu. Przewiń w dół do atrybutu font-family i tam znajdziesz dokładnie tę czcionkę, która ma nagłówek naszej witryny.

A jeśli jesteś ciekawy, jak ten element wyglądałby, gdybyś chciał zmienić czcionkę, przejdź do zakładki Style , przejdź do atrybutu font-family i możesz go zmodyfikować bezpośrednio, dodając żądaną wartość.

Automatycznie zobaczysz swoją witrynę ze zmienionym typem czcionki

Jak widać, inspektor Google Chrome jest bardzo wygodnym i łatwym w użyciu narzędziem do zabawy i testowania projektu, który zostałby pozostawiony po wprowadzeniu jakiejkolwiek modyfikacji do elementu.

A co z czcionką obrazu?

Inspektor Google Chrome, jak już widzieliśmy, umożliwia przeglądanie właściwości dowolnego elementu na stronie. Ale jeśli chcesz zobaczyć czcionkę obrazu na stronie internetowej, nie będziesz mógł tego zobaczyć u inspektora. Inspektor pokaże właściwości obrazu jako takiego wstawionego na twoją stronę, ale nie pokaże szczegółów zawartości tego obrazu.

Aby to zrobić, istnieje kilka narzędzi, takich jak Font Squirrel Matcherator lub Whatfontis.com, które mogą pomóc Ci zidentyfikować czcionkę użytą w obrazie. Aby to zrobić, w obu narzędziach musisz albo pobrać obraz (na whatfontis.com możesz również wskazać adres URL obrazu), a następnie wybrać część obrazu, która zawiera literę, którą chcesz zidentyfikować.

Oba narzędzia pokażą Ci cały zestaw czcionek, które z grubsza pasują do wybranego tekstu. Ale jeśli podejrzewasz, że to nie jest dokładne dopasowanie, możesz wygooglować czcionki podobne do tych wskazanych przez narzędzie, a zobaczysz, co otrzymasz.

Polecane zdjęcie Gemmy Evans na Unsplash.