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

Люди, которые разбираются в шрифтах и ​​очарованы ими, часто используют бесплатные онлайн-инструменты идентификации шрифтов,^{(free online font identifier tools)} чтобы найти шрифты в Интернете. Эти онлайн-инструменты требуют, чтобы вы вводили 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^{(Edge Developer Tools)}

1. Открытый край
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 typical web page generally consists of several different elements with most of them coded іn different colors and written in different fonts and styles. Sometimes, we come асross web pages so beautifully designed that they make us want to delve deep into their attribυtes; 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

• Как скачать Font из Website, используя Developer Tools

• Очистить Site Data для определенного сайта в Chrome or Edge с использованием Developer Tools

• Как изменить Default Font в Chrome, Edge, Firefox browser

• Отключить Developer Tools в Edge с использованием Registry or Group Policy

• Fix Blurry File Open dialog коробка в Google Chrome and Microsoft Edge

• Как заблокировать запросы Web Notification в Chrome, Firefox, Edge Browser

• Как синхронизировать Tabs между Edge, Chrome and Firefox browsers

• Отключить изображения в Chrome, Firefox, Edge, Internet Explorer во время просмотра

• Безопасно ли сохранять пароли в Chrome, Firefox or Edge browser?

• Block or Allow Third-Party Cookies в Chrome, Firefox, Edge, IE, Opera

• Как открыть Chrome, Edge or Firefox browser в Full Screen mode

• Как изменить User name and Profile image в Edge, Chrome, Firefox

• Force Links, чтобы открыть в фоновом режиме Tab в Chrome, Edge, Firefox, Opera

• Как изменить default browser: Chrome, Firefox, Edge на Windows 10

• Что Lazy Loading? Включить или отключить его в Chrome, Firefox, Edge

• Create Ярлык веб-страницы с помощью Edge browser на рабочем столе Windows 10

• Включить DNS над HTTPS в Firefox, Chrome, Edge, Opera, Android, iPhone

• Отключить, удалить Adobe Flash, Shockwave в Chrome, Firefox, Edge, т.е

• Fix Google Maps медленная проблема на Chrome, Firefox, Edge на Windows 11/10

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