Tyypillinen verkkosivu koostuu yleensä useista eri elementeistä, joista suurin osa on koodattu eri väreillä ja kirjoitettu eri fonteilla ja tyyleillä. Joskus törmäämme verkkosivuihin, jotka on suunniteltu niin kauniisti, että ne saavat meidät haluamaan syventyä niiden ominaisuuksiin. erittäin tyylikäs teema tai mukava, ammattimainen fontti, kenties.

Ihmiset, jotka tuntevat tapansa käyttää kirjasimia ja ovat niistä kiinnostuneita, käyttävät usein ilmaisia ​​online-kirjasinten tunnistetyökaluja^{(free online font identifier tools)} löytääkseen kirjasimia verkosta. Nämä online-työkalut edellyttävät, että syötät URL -osoitteen tai lataat kuvan, jossa on esitelty fontti, joka sitten tarkastetaan. Jos et halua käydä läpi uuden työkalun käytön oppimisen vaivaa, tämä viesti on sinua varten. Tänään keskustelemme siitä, kuinka käyttäjät voivat tunnistaa tietyn verkkosivun käyttämän kirjasimen käyttämättä selainlaajennusta, sovellusta tai muita verkkotyökaluja.

Tässä artikkelissa käsittelevä menettely perustuu useimpien verkkoselaimien tarjoamaan asetukseen, nimittäin " Kehittäjätyökaluihin^{(Developer Tools)} " tai tarkemmin sanottuna vaihtoehtoon nimeltä Tarkista elementti^{(Inspect Element)} . Täällä keskustelemme siitä, kuinka kirjasimet voidaan tunnistaa kahdessa selaimessa – Chromessa^(Chrome) , Edgessä^(Edge) ja Firefoxissa^(Firefox) .

Tunnista^(Identify) verkkosivun fontit Firefoxin ^(Firefox)Inspect Elementin^{(Inspect Element)} avulla

Siirry sen fontin verkkosivulle, jonka haluat tunnistaa, ja napsauta hiiren oikealla painikkeella tekstiä, joka on kirjoitettu sinua kiinnostavalla fontilla.

Napsauta näkyviin tulevasta vaihtoehtoluettelosta (kontekstivalikko) Tarkista elementti^{(Inspect Element)} . Tämä^(Doing) avaa Kehittäjätyökalut^{(Developer Tools)} sivun alareunassa.

Kehitystyökalut^{(Development Tools)} -osion oikeasta alakulmasta löydät alaotsikon nimeltä Fontit^(Fonts) , napsauta sitä.

Sitten se näyttää sinulle tarkasteltavan fontin ominaisuudet, kuten sen koon, rivin korkeuden, painon jne. ja myös sen, onko fontti kursivoitu vai ei, vaikka se on aina ilmeistä.

Jos olet kiinnostunut tietämään lisää käytössä olevasta kirjasimesta, Firefox tarjoaa sinulle myös sen. Jos vierität kirjasimet alas ja napsautat "Kaikki sivun kirjasimet", fontit-välilehti laajenee ja näet kaikki fontit, joita käytetään tällä hetkellä selaamasi verkkosivulla, ja myös missä ne. ovat käytössä. Ei vain sitä, vaan saat myös esikatselun siitä, miltä tietty fontti näyttää. Vie hiiri Kehittäjätyökalujen^{(Developer Tools)} fonttien päälle korostaa verkkosivun osiot, jotka käyttävät kyseistä fonttia.

Tunnista fontti Chromen ^(Chrome)kehittäjätyökalujen^{(Developer Tools)} avulla

Prosessi on samanlainen kuin edellä kuvattu. Noudata kahta ensimmäistä vaihetta samalla tavalla kuin Firefoxin^(Firefox) kanssa avataksesi Kehittäjän työkalut^{(Developer Tools)} sivun oikealla puolella.

Napsauta Laskettu-aliotsikkoa.

Vieritä^(Scroll) hieman alaspäin ja löydät tietoa sinua kiinnostavasta fontista (fonttiperhe, koko jne.)

Valitettavasti Chrome ei tarjoa sinulle mitään lisätietoja kuten Firefox .

Tunnista^(Identify) käytettävä fontti^(Font) käyttämällä Edge Developer Toolsia^{(Edge Developer Tools)}

1. Avaa Edge
2. Napsauta hiiren kakkospainikkeella ja valitse teksti
3. Valitse Tarkista
4. Siirry avautuvien kehittäjätyökalujen^{(Developer Tools)} kohtaan Laskettu^(Computed)
5. Näet kirjasimen tiedot.

Jos et usko, että et voi toimia selaimen kehittäjätyökalujen^{(Developer Tools)} kanssa ja että verkkotyökalut sopivat sinulle paremmin, on useita niistä, jotka toimivat erittäin hyvin.

Lue seuraavaksi^{(Read next)} : Kuinka löytää samanlaisia ​​ilmaisia ​​vaihtoehtoja maksullisille fonteille^{(find similar free alternatives to paid Fonts)} .

Identify fonts in Chrome, Edge and Firefox using Developer Tools

A typical web pаgе generally consistѕ of seνeral different elementѕ wіth most of them coded in different colorѕ and written in different fonts and styles. Sometimes, we come across web pages so beautifully designed thаt thеy makе us want to delve deep into their attributes; a verу 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

• Fontin lataaminen verkkosivustolta kehittäjätyökalujen avulla

• Tyhjennä tietyn sivuston sivustotiedot Chromessa tai Edgessä kehittäjätyökalujen avulla

• Oletusfontin vaihtaminen Chrome-, Edge- ja Firefox-selaimessa

• Poista Edgen kehittäjätyökalut käytöstä rekisterin tai ryhmäkäytännön avulla

• Korjaa epäselvä tiedosto Avaa -valintaikkuna Google Chromessa ja Microsoft Edgessä

• Poista KAIKKI tallennetut salasanat kerralla Chromessa, Firefoxissa ja Edgessä

• Estä tai salli kolmannen osapuolen evästeet Chromessa, Firefoxissa, Edgessä ja Operassa

• Sisäänrakennetun Password Managerin poistaminen käytöstä Chromessa, Edgessä ja Firefoxissa

• Avast-laajennuksen käyttäminen Chrome-, Firefox- ja Edge-selaimissa

• Kuinka saada Flash toimimaan Chromessa, Edgessä, Firefoxissa NYT

• Kuinka käyttää Chrome-, Edge-, Firefox- ja Opera-selaimia muistilehtiöön

• Paikallisten tiedostojen avaaminen Chromessa, Firefoxissa ja Edgessä

• Web-ilmoituspyyntöjen estäminen Chromessa, Firefoxissa, Edge-selaimessa

• Näytä aina Lataa-painike Chromessa, Firefoxissa ja Edgessä

• 10 parasta Chrome-, Edge- ja Firefox-laajennusta sivun tallentamiseen myöhempää lukemista varten

• Tämä sivusto ei ole suojattu viesti Edgessä, Chromessa tai Firefoxissa

• Kuinka piilottaa selaimen laajennuskuvakkeet Chromessa, Edgessä tai Firefoxissa

• Onko salasanojen tallentaminen turvallista Chrome-, Firefox- tai Edge-selaimessa?

• Sulje kaikki avatut selaimen välilehdet kerralla Chromessa, Edgessä tai Firefoxissa

• Uutis- ja kiinnostuksen kohteiden linkkien avaaminen Chromessa tai Firefoxissa; ei Edgeä