Как найти шрифт в коде сайта

При создании индивидуального, интересного и красивого интернет-продукта используются разнообразные способы дизайна. Одной из основных особенностей является подбор практичного и подходящего по стилю шрифта. Для ознакомления с самыми популярными и распространенными видами не обязательно связываться с редактором или владельцем проекта. Можно воспользоваться одним из способов, как узнать шрифт на сайте.

Инструменты разнообразны и делятся на несколько категорий:

• функциональные расширения браузера;
• применение разметки, CSS;
• локальные инструменты;
• проверка.

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

Применение расширений

Для того чтобы определить формат написания на веб-странице, можно воспользоваться дополнениями WhatFont. Они доступны для Chrome, Firefox, Safari. Для этого необходимо открыть каталог опций, найти соответствующий инструмент и установить его. Открыв программу, выделите ту часть текста, которая интересует, выбрать проверку. В окне появится вся информация о тексте. Font Family показывает, как узнать название шрифта на сайте. Также все демонстрируется в алфавитном порядке. Это самый быстрый и удобный способ, он выдает характеристики сразу же.

Указанное приложение можно применять для получения сведений о тексте на рисунке. Необходимо выделить ссылку или перетащить изображение в поле поиска, потом подождать. Недостаток такого способа в том, что если качество картинки не очень хорошее для идентификации исходного шрифта, то манипуляция становится бессмысленной.

Похожий метод отвечает на вопрос о том, как узнать размер шрифта на сайте. Вам понадобится Font Size.

Ручная проверка с помощью CSS

Некоторые браузеры предоставляют возможность узнать шрифт на сайте вручную. Для этого необходимо выделить фрагмент, кликнуть правой кнопкой мыши, выбрать поле «Проверить» («Исследовать элемент»). Можно воспользоваться горячими клавишами Ctrl+Shift+I. В результате в правой части окна появляется поле с расписанными кодами и подробной информацией о создании сайта (режим разработчика). Здесь представлена история изменений и правок. Сведения, которые перечеркнуты линией, были использованы в предыдущей версии, но уже изменены. Нужно выбрать самую последнюю правку стиля, чтобы точно определить параметр.

Такая манипуляция требует навыков работы с HTML и понимания языка разметки. Этими способами, как узнать, какой шрифт на сайте, пользуются дизайнеры и тестировщики.

Онлайн-инструменты

Indentifont — это сервис для определения стиля, подбора похожих шрифтов онлайн. Работает непосредственно на базе сайта. Эта функция может найти характеристики не только по заданному коду, но и по имени конструктора, издателя, сходству с другими видами написания. Ресурс используется графическими дизайнерами и редакторами страниц.

Если функциональных навыков для выбора и определения шрифта недостаточно, обратитесь к услугам специалистов. Они точно понимают, как узнать шрифт текста на сайте. Существуют специальные инструменты для экспертной оценки и проверки текста. Команда дизайнеров и редакторов определит всю необходимую информацию о шрифте. Сотрудничая с профессионалами, вы избежите ошибок, которые часто совершают неопытные пользователи.

Я думаю у многих опытных дизайнеров и даже у начинающих было такое, что Вы видели какой-то заголовок или статью которая была написана определенным шрифтом и конечно же хотелось узнать эту гарнитуру, чтобы использовать ее в своих проектах. И появляется законный вопрос, как это сделать? Можно пойти сложным путем и через исходный код страницы: Нажать правой кнопкой мыши по нужному тексту, выбрать «Исходный текст», найти в коде выделенную строчку и в стилях увидеть используемые шрифты.

Но это достаточно долго, хоть и кажется что вроде просто, но тут много лишних движений. Для упрощения процесса я предлагаю вам плагин для браузера под названием Fonts ninja.

Это достаточно простая утилита почти для любого браузера «Было проверено в Chrome и Яндекс браузере» которая позволит быстро узнать не только гарнитуру нужного вам шрифта но и его размер в типографических пунктах «пт», а также размер отступа строк, просто наведя на нужный текст.

Для того чтобы вам поставить эту утилиту, нужно всего лишь или перейти на официальный сайт или перейти в магазин плагинов вашего браузера у меня это Chrome.

Далее вводим в поисковой строке «Fonts Ninja» и первый плагин который мы видим, это-то что нам нужно, заходим в него и жмем установить «в моем случае он уже установлен».

После установки в правой части браузера сверху у вас появится значок нашего плагина.

Что же нужно делать дальше, после установки? Все просто одно нажатие по данному значку и плагин запустится

Данный плагин позволяет увидеть размер шрифта, его цвет, межстрочный интервал, а также посмотреть как будет выглядеть шрифт при любом другом межбуквенном интервале и размере.

Заключение

В заключении хотелось бы сказать что данный плагин очень облегчает жизнь дизайнера, веб-проектировщика или тимлида, когда срочно нужно узнать какая гарнитура и какого размера установлена на том или ином сайте. Надеюсь данная статья была вам полезна!