Una tipica pagina web generalmente è costituita da diversi elementi diversi, la maggior parte dei quali codificati in diversi colori e scritti in diversi tipi di carattere e stili. A volte, ci imbattiamo in pagine web così ben progettate che ci fanno venire voglia di approfondire le loro caratteristiche; un tema molto elegante o un font carino e professionale, forse.

Le persone che conoscono i caratteri e ne sono affascinati spesso utilizzano strumenti di identificazione dei caratteri online gratuiti^{(free online font identifier tools)} per scoprire i caratteri sul Web. Questi strumenti online richiedono l'inserimento di un URL o il caricamento di un'immagine con il carattere mostrato, che viene quindi ispezionata. Nel caso in cui non vuoi affrontare la seccatura di imparare a utilizzare un nuovo strumento, questo post è per te. Oggi parleremo di come gli utenti possono identificare quale tipo di carattere sta utilizzando una determinata pagina Web senza utilizzare un'estensione del browser, un'applicazione o qualsiasi strumento online.

La procedura di cui parleremo in questo articolo ruoterà attorno a un'impostazione offerta dalla maggior parte dei browser Web, ovvero " Strumenti per sviluppatori^{(Developer Tools)} " o, per essere precisi, un'opzione denominata Inspect Element . Qui, discuteremo di come identificare i caratteri in due browser: Chrome , Edge e Firefox .

Identifica i^(Identify) caratteri su una pagina Web utilizzando Inspect Element in Firefox

Visita la pagina web del font di cui vuoi identificare e clicca con il tasto destro del mouse sul testo che è scritto nel font che ti interessa.

Dall'elenco delle opzioni visualizzate (il menu contestuale), fare clic su Ispeziona elemento^{(Inspect Element)} . In questo^(Doing) modo si aprirebbero gli Strumenti per sviluppatori^{(Developer Tools)} nella parte inferiore della pagina.

Nell'angolo in basso a destra della sezione Strumenti di sviluppo^{(Development Tools)} , troverai un sottotitolo chiamato Fonts , fai clic su di esso.

Ti mostrerà quindi le proprietà del carattere in cui volevi esaminare come dimensione, altezza della linea, spessore, ecc., e anche se il carattere è in corsivo o meno, anche se questo è sempre evidente.

Se sei interessato a saperne di più sul carattere in uso, Firefox ti copre anche. Se scorri la sezione dei caratteri e fai clic su "Tutti i caratteri nella pagina", la scheda dei caratteri si espande e ti verranno mostrati tutti i caratteri utilizzati nella pagina Web che stai navigando in quel momento, e anche dove vengono utilizzati. Non solo, ma ottieni anche un'anteprima di come appare un particolare font. Passando il mouse sui caratteri negli Strumenti per sviluppatori^{(Developer Tools)} verranno evidenziate le sezioni della pagina Web che utilizzano quel carattere.

Identifica un carattere utilizzando gli Strumenti per sviluppatori^{(Developer Tools)} in Chrome

Il processo è simile a quello sopra descritto. Segui i primi due passaggi come hai fatto con Firefox per aprire gli Strumenti per sviluppatori^{(Developer Tools)} sul lato destro della pagina.

Fare clic sul sottotitolo "Calcolato".

Scorri^(Scroll) un po' verso il basso e troverai informazioni sul carattere che ti interessa (famiglia del carattere, dimensione, ecc.)

Sfortunatamente, Chrome non ti fornisce alcuna informazione aggiuntiva come fa Firefox .

Identificare^(Identify) quale carattere^(Font) viene utilizzato utilizzando Edge Developer Tools

1. Bordo aperto
2. Fare clic con il tasto destro e selezionare il testo
3. Seleziona Ispeziona
4. Negli Strumenti per sviluppatori^{(Developer Tools)} che si aprono, guarda sotto Calcolato^(Computed)
5. Vedrai i dettagli del carattere.

Se non pensi di non poter lavorare con gli strumenti per sviluppatori^{(Developer Tools)} del browser e che gli strumenti online ti si adattano meglio, ce ne sono molti che funzionano molto bene.

Leggi il prossimo^{(Read next)} : Come trovare alternative gratuite simili ai caratteri a pagamento^{(find similar free alternatives to paid Fonts)} .

Identify fonts in Chrome, Edge and Firefox using Developer Tools

A tуpical web page generally conѕists of several different elements with most of them coded in different colors and written іn different fonts аnd styles. Sometimes, we come across web рages so beautifully desіgned that they make us want tо delvе deep into their аttributes; a very еlegant 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

• Come scaricare un Font da A Website utilizzando Developer Tools

• Cancella Site Data per un particolare sito Chrome or Edge utilizzando Developer Tools

• Come cambiare lo Default Font in Chrome, Edge, Firefox browser

• Disabilita Developer Tools in Edge utilizzando Registry or Group Policy

• Fix Blurry File Open dialog Box in Google Chrome and Microsoft Edge

• Come nascondere le icone Browser Extension in Chrome, Edge or Firefox

• Come impostare Parental Control in Chrome, Edge, Firefox, Opera

• Come aprire Local Files su Chrome, Firefox e Edge

• Fix Google Maps Problema lento su Chrome, Firefox, Edge su Windows 11/10

• Come utilizzare Chrome, Edge, Firefox, Opera Browser come Notepad

• Come cambiare la homepage in Chrome, Firefox, Opera, Edge Browser

• Force Links per aprire in background Tab in Chrome, Edge, Firefox, Opera

• Come aprire Chrome, Edge or Firefox browser in Full Screen mode

• Chiudi tutto aperto browser tabs in una volta in Chrome, Edge o Firefox

• Come utilizzare Avast extension su Chrome, Firefox e Browser Edge

• Create Scorciatoia della pagina Web utilizzando Edge browser su Windows 10 Desktop

• Disabilita le immagini in Chrome, Firefox, Edge, Internet Explorer durante la navigazione

• Come cambiare User name and Profile image in Edge, Chrome, Firefox

• Disabilita, Abilita Cookies in Chrome, Edge, Firefox, Opera, IE Browser

• È sicuro salvare le password in Chrome, Firefox or Edge browser?