Egy tipikus weboldal általában több különböző elemből áll, amelyek többsége különböző színekkel van kódolva, és különböző betűtípusokkal és stílusokkal van írva. Néha olyan gyönyörűen megtervezett weboldalakkal találkozunk, amelyek arra késztetnek bennünket, hogy mélyen elmélyüljünk tulajdonságaikba; egy nagyon elegáns téma vagy egy szép, professzionális betűtípus, talán.

Azok az emberek, akik ismerik a betűtípusokat, és lenyűgözik őket, gyakran használnak ingyenes online betűtípus-azonosító eszközöket^{(free online font identifier tools)} a betűtípusok megtalálásához az interneten. Ezekhez az online eszközökhöz meg kell adnia egy URL -t , vagy fel kell töltenie egy képet a megjelenített betűtípussal, amelyet a rendszer ezután megvizsgál. Abban az esetben, ha nem szeretnél egy új eszköz használatának elsajátításával kínlódni, ez a bejegyzés neked szól. Ma azt fogjuk megvitatni, hogy a felhasználók hogyan határozhatják meg, hogy egy adott weboldal milyen betűtípust használ böngészőbővítmény, alkalmazás vagy bármilyen online eszköz használata nélkül.

Az ebben a cikkben tárgyalandó eljárás egy olyan beállítás körül forog, amelyet a legtöbb webböngésző kínál, nevezetesen a " Fejlesztői eszközök " vagy konkrétabban az ^{(Developer Tools)}Elem^{(Inspect Element)} vizsgálata nevű opció . Itt megvitatjuk, hogyan azonosíthatók a betűtípusok két böngészőben – a Chrome -ban, az Edge -ben és a Firefoxban^(Firefox) .

Azonosítsa^(Identify) a betűtípusokat a weboldalon az Inspect Element segítségével a Firefoxban^(Firefox)

Látogassa meg az azonosítani kívánt betűtípus weboldalát, és kattintson a jobb gombbal az Önt érdeklő betűtípussal írt szövegre.

A megjelenő opciók listájában (a helyi menüben) kattintson az Elem^{(Inspect Element)} vizsgálata elemre . Ezzel^(Doing) megnyílik a Fejlesztői eszközök^{(Developer Tools)} az oldal alján.

A Fejlesztői eszközök^{(Development Tools)} rész jobb alsó sarkában talál egy Fonts nevű alcímet , kattintson rá.

Ezután megjeleníti a font tulajdonságait, amelyeket meg akart vizsgálni, például a méretét, a sor magasságát, a súlyát stb., valamint azt is, hogy a betűtípus dőlt betűs-e vagy sem, bár ez mindig nyilvánvaló.

Ha többet szeretne megtudni a használt betűtípusról, a Firefox ezzel is foglalkozik. Ha lefelé görget a betűtípusok szakaszban, és rákattint az "Összes betűtípus az oldalon" elemre, a Betűtípusok lap kinyílik, és megjelenik az összes betűtípus, amelyet az éppen böngészett weboldalon használ, és az is, hogy hol vannak használatban vannak. Nem csak ez, hanem előnézetet is kap arról, hogyan néz ki egy adott betűtípus. Ha az egeret a betűtípusok fölé viszi a Fejlesztői eszközökben^{(Developer Tools)} , akkor kiemeli a weboldal azon részeit, amelyek ezt a betűtípust használják.

Azonosítson egy betűtípust a Chrome Fejlesztői eszközök segítségével^{(Developer Tools)}

A folyamat hasonló a fent leírtakhoz. Kövesse az első két lépést a Firefoxhoz hasonlóan a ^(Firefox)Fejlesztői eszközök^{(Developer Tools)} megnyitásához az oldal jobb oldalán.

Kattintson a „Számított” alfejre.

Görgessen^(Scroll) le egy kicsit, és információkat talál az Önt érdeklő betűtípusról (a betűtípus családja, mérete stb.)

Sajnos a Chrome nem ad további információkat, mint a Firefox .

^(Identify)Az Edge Developer Tools^{(Edge Developer Tools)} segítségével azonosítsa a használt betűtípust^(Font)

1. Nyissa meg az Edge-et
2. Kattintson a jobb gombbal, és válassza ki a szöveget
3. Válassza az Ellenőrzés lehetőséget
4. A megnyíló Fejlesztői eszközökben^{(Developer Tools)} keresse meg a Számított elemet^(Computed)
5. Látni fogja a betűtípus részleteit.

Ha úgy gondolja, hogy nem tudja megkerülni a böngésző fejlesztői eszközeit^{(Developer Tools)} , és az online eszközök jobban megfelelnének Önnek, számos közülük nagyon jól működik.

Olvassa el a következőt^{(Read next)} : Hogyan találhat hasonló ingyenes alternatívákat a fizetős betűtípusokhoz^{(find similar free alternatives to paid Fonts)} .

Identify fonts in Chrome, Edge and Firefox using Developer Tools

A typical web page generаlly consists of severаl different elements with moѕt of them coded in diffеrent сolorѕ and written in different fonts аnd styles. Sometimes, we come across web pages ѕo beautifully designed that they make us want to delve deep into their attributеs; 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

• Betűtípus letöltése egy webhelyről a Fejlesztői eszközök segítségével

• Törölje a webhelyadatokat egy adott webhelyhez a Chrome-ban vagy az Edge-ben a Fejlesztői eszközök segítségével

• Az alapértelmezett betűtípus megváltoztatása Chrome, Edge, Firefox böngészőben

• Tiltsa le a Fejlesztői eszközöket az Edge-ben a beállításjegyzék vagy a csoportházirend használatával

• Homályos fájl megnyitása párbeszédpanel javítása a Google Chrome-ban és a Microsoft Edge-ben

• 400 rossz kérés, túl nagy a cookie – Chrome, Edge, Firefox

• Ez a webhely nem biztonságos üzenet az Edge, Chrome vagy Firefox böngészőben

• Mindig jelenítse meg a Letöltés gombot Chrome, Firefox és Edge böngészőben

• Weboldal fordítása Chrome, Firefox és Edge böngészőben

• Az Avast bővítmény használata Chrome, Firefox és Edge böngészőkben

• Webhelyparancsikon létrehozása asztali számítógépen a Chrome, Edge, Firefox használatával

• Kényszerítse a hivatkozások megnyitását a háttérben a Chrome, Edge, Firefox és Opera lapon

• Hogyan lehet megnyitni a helyi fájlokat a Chrome, a Firefox és az Edge böngészőben

• A Chrome, Edge, Firefox, Opera böngészők Jegyzettömbként való használata

• Cookie-k, webhelyadatok és gyorsítótár törlése adott webhelyhez: Chrome Edge Firefox

• Harmadik féltől származó cookie-k letiltása vagy engedélyezése a Chrome, Firefox, Edge és Opera böngészőben

• Egyszerre zárja be az összes megnyitott böngészőlapot a Chrome-ban, az Edge-ben vagy a Firefoxban

• A Chrome, Edge vagy Firefox böngésző megnyitása teljes képernyős módban

• Mi az a lusta betöltés? Engedélyezze vagy tiltsa le a Chrome-ban, Firefoxban, Edge-ben

• Cookie-k letiltása, engedélyezése a Chrome, Edge, Firefox és Opera böngészőben