Типичната уеб страница обикновено се състои от няколко различни елемента, като повечето от тях са кодирани в различни цветове и написани в различни шрифтове и стилове. Понякога се натъкваме на уеб страници с толкова красив дизайн, че ни карат да искаме да се задълбочим в техните атрибути; много елегантна тема или хубав, професионален шрифт, може би.

Хората, които познават шрифтовете и са очаровани от тях, често използват безплатни онлайн инструменти за идентификация^{(free online font identifier tools)} на шрифтове, за да помогнат при откриването на шрифтове в мрежата. Тези онлайн инструменти изискват от вас да въведете URL адрес^(URL) или да качите изображение с показания шрифт, който след това се проверява. В случай, че не искате да преминавате през караницата да се научите да използвате нов инструмент, тази публикация е за вас. Днес ще обсъдим как потребителите могат да идентифицират какъв шрифт използва дадена уеб страница, без да използват разширение на браузъра, приложение или каквито и да било онлайн инструменти.

Процедурата, която ще обсъдим в тази статия, ще се върти около настройка, която повечето уеб браузъри предлагат, а именно „ Инструменти за разработчици^{(Developer Tools)} “, или по-конкретно, опция, наречена Inspect Element . Тук ще обсъдим как шрифтовете могат да бъдат идентифицирани в два браузъра – Chrome , Edge и Firefox .

Идентифицирайте^(Identify) шрифтове на уеб страница с помощта на Inspect Element във Firefox

Посетете уеб страницата на шрифта, който искате да идентифицирате, и щракнете с десния бутон върху текста, който е написан в шрифта, който ви интересува.

От списъка с опции, които се показват (контекстното меню), щракнете върху Проверка на елемента^{(Inspect Element)} . Това^(Doing) ще отвори инструментите^{(Developer Tools)} за разработчици в долната част на страницата.

В долния десен ъгъл на секцията Инструменти^{(Development Tools)} за разработка ще намерите подзаглавие с име Шрифтове^(Fonts) , щракнете върху него.

След това ще ви покаже свойствата на шрифта, който искате да разгледате, като неговия размер, височина на реда, тегло и т.н., както и дали шрифтът е в курсив или не, въпреки че това винаги е очевидно.

Ако се интересувате да научите повече за използвания шрифт, Firefox също ви е покрил с това. Ако превъртите надолу секцията за шрифтове и щракнете върху „Всички шрифтове на страницата“, разделът за шрифтове ще се разшири и ще ви бъдат показани всички шрифтове, които се използват на уеб страницата, която разглеждате в момента, както и къде те се използват. Не само това, но също така получавате предварителен преглед на това как изглежда конкретен шрифт. Задържането на мишката върху шрифтовете в инструментите за разработчици^{(Developer Tools)} ще подчертае секциите на уеб страницата, които използват този шрифт.

Идентифицирайте шрифт с помощта на Инструменти за разработчици^{(Developer Tools)} в Chrome

Процесът е подобен на описания по-горе. Следвайте първите две стъпки, както направихте с Firefox , за да отворите инструментите^{(Developer Tools)} за разработчици от дясната страна на страницата.

Щракнете върху подзаглавието „Изчислено“.

Превъртете^(Scroll) малко надолу и ще намерите информация за шрифта, който ви интересува (семейство на шрифта, размер и т.н.)

За съжаление, Chrome не ви предоставя никаква допълнителна информация като Firefox .

Идентифицирайте^(Identify) кой шрифт^(Font) се използва с помощта на Edge Developer Tools

1. Отворете Edge
2. Щракнете с десния бутон и изберете текста
3. Изберете Проверка
4. В инструментите за разработчици^{(Developer Tools)} , които се отварят, погледнете под Computed
5. Ще видите подробностите за шрифта.

Ако не смятате, че не можете да работите с инструментите за разработчици^{(Developer Tools)} на браузъра и че онлайн инструментите биха ви подхождали по-добре, има няколко от тях, които работят много добре.

Прочетете по-нататък^{(Read next)} : Как да намерите подобни безплатни алтернативи на платените шрифтове^{(find similar free alternatives to paid Fonts)} .

Identify fonts in Chrome, Edge and Firefox using Developer Tools

A typiсal web page generally consiѕts of several diffеrent elements wіth mоst of them coded іn different colors and written in different fonts and stуles. Sometimes, we come across web pages so beautifully designed that they makе us want to delve deep into their attributеs; a very elegant theme or a nice, professіonal 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

• Как да изтеглите шрифт от уебсайт с помощта на инструменти за разработчици

• Изчистете данните на сайта за конкретен сайт в Chrome или Edge с помощта на инструменти за програмисти

• Как да промените шрифта по подразбиране в браузъра Chrome, Edge, Firefox

• Деактивирайте инструментите за разработчици в Edge с помощта на системния регистър или груповите правила

• Поправете диалоговия прозорец за отваряне на замъглен файл в Google Chrome и Microsoft Edge

• Как да настроите родителски контрол в Chrome, Edge, Firefox, Opera

• Как да промените потребителското име и изображението на профила в Edge, Chrome, Firefox

• Деактивирайте или активирайте Adobe Flash Player в Chrome, Edge, Firefox, Opera

• Как да сърфирате в режим само за текст в Chrome, Edge или Firefox

• Този сайт не е защитено съобщение в Edge, Chrome или Firefox

• Как да спрете автоматичните пренасочвания в браузърите Chrome, Firefox, Edge

• Създайте пряк път към уебсайта на работния плот с помощта на Chrome, Edge, Firefox

• Как да актуализирате браузърите Chrome, Edge, Firefox, Opera на Windows 11/10

• Как да накарам Flash да работи в Chrome, Edge, Firefox СЕГА

• Как да използвате браузърите Chrome, Edge, Firefox, Opera като Notepad

• Как да отворите браузъра Chrome, Edge или Firefox в режим на цял екран

• Винаги показвайте бутона за изтегляне в Chrome, Firefox и Edge

• Как да преведете уеб страница в Chrome, Firefox и Edge

• Изчистване на бисквитки, данни за сайтове, кеш за конкретен уебсайт: Chrome Edge Firefox

• Споделете приставки за бутони за браузъри Chrome, Firefox и Edge