Typická webová stránka vo všeobecnosti pozostáva z niekoľkých rôznych prvkov, pričom väčšina z nich je kódovaná rôznymi farbami a napísaná rôznymi typmi písma a štýlmi. Niekedy sa stretávame s webovými stránkami tak krásne navrhnutými, že nás nútia ponoriť sa hlboko do ich vlastností. možno veľmi elegantný motív alebo pekné profesionálne písmo.

Ľudia, ktorí sa vyznajú v písmach a sú nimi fascinovaní, často používajú bezplatné online nástroje^{(free online font identifier tools)} na identifikáciu písiem, ktoré im pomáhajú objaviť písma na webe. Tieto online nástroje vyžadujú, aby ste zadali adresu URL^(URL) alebo odovzdali obrázok s predvedeným písmom, ktoré sa potom skontroluje. V prípade, že sa nechcete učiť používať nový nástroj, tento príspevok je pre vás. Dnes budeme diskutovať o tom, ako môžu používatelia identifikovať, aké písmo používa konkrétna webová stránka bez použitia rozšírenia prehliadača, aplikácie alebo akýchkoľvek online nástrojov.

Postup, o ktorom budeme diskutovať v tomto článku, sa bude točiť okolo nastavenia, ktoré ponúka väčšina webových prehliadačov, menovite „ Nástroje pre vývojárov^{(Developer Tools)} “ alebo konkrétne, možnosť s názvom Inspect Element . Tu si povieme, ako možno písma identifikovať v dvoch prehliadačoch – Chrome , Edge a Firefox .

Identifikujte^(Identify) písma na webovej stránke pomocou funkcie Inspect Element^{(Inspect Element)} vo Firefoxe^(Firefox)

Navštívte webovú stránku písma, ktoré chcete identifikovať, a kliknite pravým tlačidlom myši na text, ktorý je napísaný písmom, ktoré vás zaujíma.

V zozname možností, ktoré sa zobrazia (kontextová ponuka), kliknite na Skontrolovať prvok^{(Inspect Element)} . Ak^(Doing) tak urobíte, otvoria sa Nástroje^{(Developer Tools)} pre vývojárov v spodnej časti stránky.

V pravom dolnom rohu sekcie Vývojové nástroje^{(Development Tools)} nájdete podnadpis Fonts , kliknite naň.

Potom vám zobrazí vlastnosti písma, na ktoré ste sa chceli pozrieť, ako je jeho veľkosť, výška riadku, hrúbka atď., a tiež to, či je písmo v kurzíve alebo nie, hoci to je vždy zrejmé.

Ak máte záujem dozvedieť sa viac o používanom písme, Firefox vám to tiež poskytol. Ak rolujete nadol v sekcii s písmami a kliknete na „Všetky písma na stránke“, karta s písmami sa rozbalí a zobrazia sa vám všetky písma, ktoré sa práve používajú na webovej stránke, ktorú si práve prehliadate, a tiež ich umiestnenie sa používajú. Nielen to, ale získate aj ukážku toho, ako konkrétne písmo vyzerá. Umiestnením kurzora myši na písma v Nástrojoch pre vývojárov^{(Developer Tools)} sa zvýraznia časti webovej stránky, ktoré používajú dané písmo.

Identifikujte písmo pomocou nástrojov pre vývojárov^{(Developer Tools)} v prehliadači Chrome^(Chrome)

Proces je podobný tomu, ktorý je opísaný vyššie. Postupujte podľa prvých dvoch krokov ako v prípade Firefoxu^(Firefox) a otvorte Vývojárske nástroje^{(Developer Tools)} na pravej strane stránky.

Kliknite na podzáhlavie „Vypočítané“.

Posuňte^(Scroll) sa trochu nadol a nájdete informácie o písme, ktoré vás zaujíma (rodina písma, veľkosť atď.)

Bohužiaľ, Chrome vám neposkytuje žiadne ďalšie informácie ako Firefox .

^(Identify)Pomocou nástrojov Edge Developer Tools ^{(Edge Developer Tools)}zistite , ktoré písmo^(Font) sa používa

1. Otvorte Edge
2. Kliknite pravým tlačidlom myši a vyberte text
3. Vyberte možnosť Skontrolovať
4. V nástrojoch pre vývojárov^{(Developer Tools)} , ktoré sa otvoria, sa pozrite do časti Vypočítané^(Computed)
5. Uvidíte podrobnosti o písme.

Ak si nemyslíte, že si s nástrojmi pre vývojárov^{(Developer Tools)} prehliadača neporadíte a že by vám viac vyhovovali online nástroje, existuje niekoľko z nich, ktoré fungujú veľmi dobre.

Čítať ďalej^{(Read next)} : Ako nájsť podobné bezplatné alternatívy k plateným písmam^{(find similar free alternatives to paid Fonts)} .

Identify fonts in Chrome, Edge and Firefox using Developer Tools

A typical web page generally consists of several different elements with most of them coded in different colors and written in different fonts and stуles. Sometimes, we come аcross web pages so beautifully designed that they makе us want to delve deep intо their attributes; a verу elegant theme or a nice, рrofessional font, perhаps.

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

• Ako stiahnuť písmo z webovej lokality pomocou nástrojov pre vývojárov

• Vymažte údaje stránok pre konkrétny web v prehliadači Chrome alebo Edge pomocou nástrojov pre vývojárov

• Ako zmeniť predvolené písmo v prehliadači Chrome, Edge, Firefox

• Zakážte Vývojárske nástroje v Edge pomocou registra alebo skupinovej politiky

• Opraviť dialógové okno Otvoriť rozmazaný súbor v prehliadači Google Chrome a Microsoft Edge

• Ako zakázať vstavaného správcu hesiel v prehliadačoch Chrome, Edge, Firefox

• Vytvorte odkaz na web na pracovnej ploche pomocou prehliadačov Chrome, Edge, Firefox

• 10 najlepších rozšírení Chrome, Edge a Firefox na uloženie stránky na prečítanie neskôr

• Odstráňte VŠETKY uložené heslá naraz v prehliadačoch Chrome, Firefox, Edge

• Ako otvoriť prehliadač Chrome, Edge alebo Firefox v režime celej obrazovky

• Ako prehliadať v režime Iba text v prehliadači Chrome, Edge alebo Firefox

• Doplnky zdieľania tlačidiel pre prehliadače Chrome, Firefox a Edge

• Zakázať, povoliť súbory cookie v prehliadačoch Chrome, Edge, Firefox, Opera

• Ako skryť ikony rozšírenia prehliadača v prehliadači Chrome, Edge alebo Firefox

• Blokovať alebo povoliť súbory cookie tretích strán v prehliadačoch Chrome, Firefox, Edge, Opera

• Vždy zobrazovať tlačidlo Stiahnuť v prehliadačoch Chrome, Firefox a Edge

• Zakázať alebo povoliť Adobe Flash Player v prehliadačoch Chrome, Edge, Firefox, Opera

• Zatvorte všetky otvorené karty prehliadača naraz v prehliadači Chrome, Edge alebo Firefox

• Bezplatný prehliadač webovej vyrovnávacej pamäte pre prehliadače Chrome, Firefox a Edge

• Opravte pomalý problém Máp Google v prehliadačoch Chrome, Firefox a Edge v systéme Windows 11/10