Typowa strona internetowa zazwyczaj składa się z kilku różnych elementów, z których większość jest zakodowana w różnych kolorach i napisana różnymi czcionkami i stylami. Czasami natykamy się na strony internetowe tak pięknie zaprojektowane, że sprawiają, że chcemy zagłębić się w ich atrybuty; być może bardzo elegancki motyw lub ładna, profesjonalna czcionka.

Osoby, które znają się na czcionkach i są nimi zafascynowane, często korzystają z bezpłatnych narzędzi do identyfikacji czcionek online,^{(free online font identifier tools)} aby pomóc w odkrywaniu czcionek w sieci. Te narzędzia online wymagają wprowadzenia adresu URL^(URL) lub przesłania obrazu z prezentowaną czcionką, który jest następnie sprawdzany. Jeśli nie chcesz przechodzić przez kłopoty z nauką korzystania z nowego narzędzia, ten post jest dla Ciebie. Dzisiaj omówimy, w jaki sposób użytkownicy mogą zidentyfikować czcionkę używaną na danej stronie internetowej bez korzystania z rozszerzenia przeglądarki, aplikacji lub jakichkolwiek narzędzi online.

Procedura, którą będziemy omawiać w tym artykule, będzie się obracać wokół ustawienia oferowanego przez większość przeglądarek internetowych, a mianowicie „ Narzędzia dla programistów^{(Developer Tools)} ” lub, mówiąc konkretnie, opcji o nazwie Sprawdź element^{(Inspect Element)} . Tutaj omówimy, w jaki sposób można zidentyfikować czcionki w dwóch przeglądarkach – Chrome , Edge i Firefox .

Identyfikuj^(Identify) czcionki na stronie internetowej za pomocą Inspect Element w Firefoksie^(Firefox)

Odwiedź stronę internetową czcionki, którą chcesz zidentyfikować, i kliknij prawym przyciskiem myszy tekst zapisany czcionką, która Cię interesuje.

Z wyświetlonej listy opcji (menu kontekstowe) kliknij opcję Sprawdź element^{(Inspect Element)} . Spowoduje^(Doing) to otwarcie Narzędzi dla programistów^{(Developer Tools)} na dole strony.

W prawym dolnym rogu sekcji Narzędzia^{(Development Tools)} programistyczne znajdziesz podtytuł o nazwie Czcionki^(Fonts) , kliknij go.

Następnie wyświetli dla Ciebie właściwości czcionki, na którą chcesz spojrzeć, takie jak jej rozmiar, wysokość linii, grubość itp., A także to, czy czcionka jest pisana kursywą, czy nie, chociaż jest to zawsze oczywiste.

Jeśli chcesz dowiedzieć się więcej o używanej czcionce, Firefox również to obejmuje. Jeśli przewiniesz sekcję czcionek i klikniesz „Wszystkie czcionki na stronie”, karta czcionek rozszerzy się i zobaczysz wszystkie czcionki, które są używane na stronie, którą aktualnie przeglądasz, a także gdzie są są używane. Nie tylko to, ale także otrzymujesz podgląd, jak wygląda konkretna czcionka. Najechanie kursorem myszy na czcionki w Narzędziach dla programistów^{(Developer Tools)} podświetli sekcje strony internetowej, które używają tej czcionki.

Zidentyfikuj czcionkę za pomocą Narzędzi dla programistów^{(Developer Tools)} w Chrome

Proces jest podobny do opisanego powyżej. Wykonaj dwa pierwsze kroki, tak jak w przypadku Firefoksa^(Firefox) , aby otworzyć Narzędzia programistyczne^{(Developer Tools)} po prawej stronie.

Kliknij podtytuł „Obliczone”.

Przewiń^(Scroll) trochę w dół, a znajdziesz informacje o czcionce, która Cię interesuje (rodzina czcionki, rozmiar itp.)

Niestety, Chrome nie dostarcza żadnych dodatkowych informacji, takich jak Firefox .

Określ^(Identify) , która czcionka^(Font) jest używana za pomocą narzędzi programistycznych Edge^{(Edge Developer Tools)}

1. Otwórz krawędź
2. Kliknij prawym przyciskiem myszy i wybierz tekst
3. Wybierz Sprawdź
4. W otwartych Narzędziach dla programistów^{(Developer Tools)} spójrz w obszarze Obliczone^(Computed)
5. Zobaczysz szczegóły czcionki.

Jeśli uważasz, że nie możesz pracować z narzędziami programistycznymi^{(Developer Tools)} przeglądarki i że narzędzia online będą dla Ciebie bardziej odpowiednie, jest kilka z nich, które działają bardzo dobrze.

Czytaj dalej^{(Read next)} : Jak znaleźć podobne darmowe alternatywy dla płatnych czcionek^{(find similar free alternatives to paid Fonts)} .

Identify fonts in Chrome, Edge and Firefox using Developer Tools

A typіcal web pagе generally consistѕ of several differеnt elеments with most of them coded in different colors and written in different fonts and styles. Somеtіmes, we come across web pagеs so beautifully designed that they make us want to delνe deep into their attributes; a very elegant theme or a nice, professional font, perhaps.

People who know their way around fonts and are fascinated by them often use free online font identifier tools to help discover fonts on the web. These online tools require you to enter a URL or upload an image with the font showcased, which is then inspected. In case you don’t want to go through the hassle of learning to use a new tool, this post is for you. Today, we will discuss how users can identify what font a particular web page is using without using a browser extension, an application, or any online tools.

The procedure that we will be discussing in this article will revolve around a setting that most web browsers offer, namely ‘Developer Tools,’ or to be specific, an option called Inspect Element. Here, we will discuss how fonts can be identified in two browsers – Chrome, Edge and Firefox.

Identify fonts on a webpage using Inspect Element in Firefox

Visit the web page of the font of which you want to identify and right-click on the text that is written in the font you are interested in.

From the list of options that show up (the context menu), click on Inspect Element. Doing so would open the Developer Tools on the bottom of the page.

On the bottom right corner of the Development Tools section, you will find a subhead named Fonts, click on it.

It will then display for you the properties of the font you wanted to look into like its size, line height, weight, etc., and also whether or not the font is in italics or not, though that is always apparent.

If you are interested to know more about the font in use, Firefox has you covered with that too. If you scroll down the fonts section and click on ‘All fonts on the page,’ the fonts tab will expand and you will be shown all the fonts that are being used on the web page you are browsing at the moment, and also where they are being used. Not just that, but you also get a preview of how a particular font looks. Hovering your mouse over the fonts in the Developer Tools will highlight the sections of the web page that use that font.

Identify a font using Developer Tools in Chrome

The process is similar to the one described above. Follow the first two steps as you did with Firefox to open the Developer Tools on the right side of the page.

Click on the ‘Computed’ sub-head.

Scroll down a bit and you will find information about the font you’re interested in (font’s family, size, etc.)

Unfortunately, Chrome doesn’t provide you with any additional information like Firefox does.

Identify which Font is used using Edge Developer Tools

1. Open Edge
2. Right-click and select the text
3. Select Inspect
4. In the Developer Tools that open, look under Computed
5. You will see the Font details.

If you don’t think you can’t work around with browser Developer Tools and that online tools would suit you better, there are several of them that work very well.

Read next: How to find similar free alternatives to paid Fonts.

Related posts

• Jak pobrać czcionkę ze strony internetowej za pomocą Narzędzi dla programistów?

• Wyczyść dane witryny dla określonej witryny w Chrome lub Edge za pomocą Narzędzi dla programistów

• Jak zmienić domyślną czcionkę w przeglądarce Chrome, Edge, Firefox?

• Wyłącz narzędzia programistyczne w Edge za pomocą rejestru lub zasad grupy

• Napraw okno dialogowe Otwórz rozmazany plik w Google Chrome i Microsoft Edge

• Wyłącz obrazy w Chrome, Firefox, Edge, Internet Explorer podczas przeglądania

• Bezpieczeństwo, prywatność, narzędzia do czyszczenia dla Edge, Firefox, Chrome, Opera

• Jak sprawić, by Flash działał w Chrome, Edge, Firefox TERAZ

• Jak otwierać linki do wiadomości i zainteresowań w przeglądarce Chrome lub Firefox; nie krawędź

• Wtyczki przycisku udostępniania dla przeglądarek Chrome, Firefox i Edge

• Nie można otworzyć określonej witryny w przeglądarce Chrome, Edge lub Firefox

• Czy zapisywanie haseł w przeglądarce Chrome, Firefox lub Edge jest bezpieczne?

• Uruchom ponownie Chrome, Edge lub Firefox bez utraty kart w systemie Windows 11/10

• Jak używać przeglądarek Chrome, Edge, Firefox, Opera jako Notatnika

• Jak wyłączyć wbudowany menedżer haseł w Chrome, Edge, Firefox?

• Jak otworzyć przeglądarkę Chrome, Edge lub Firefox w trybie pełnoekranowym?

• Usuń WSZYSTKIE zapisane hasła na raz w Chrome, Firefox, Edge

• Co to jest leniwe ładowanie? Włącz lub wyłącz go w Chrome, Firefox, Edge

• 400 nieprawidłowych żądań, plik cookie za duży — Chrome, Edge, Firefox

• 10 najlepszych rozszerzeń Chrome, Edge i Firefox do zapisywania strony do przeczytania później