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

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

Связанный: Как узнать количество страниц на сайте?

Шрифты и сайты

Как правило, есть три способа использовать шрифты на любом веб-сайте.

• Самостоятельные пользовательские шрифты — на торговых площадках для покупок доступны довольно нестандартные шрифты. Кто угодно, купите и разместите эти шрифты на том же сервере, где также хранится контент веб-сайта.
• Сторонние шрифты, такие как Google Fonts — владельцы веб-сайтов могут легко использовать Google Fonts API и динамически вызывать шрифты с серверов Google для использования на своих сайтах. Это самая популярная форма в системах управления контентом, таких как WordPress, поскольку разработчики тем и плагинов будут использовать бесплатные шрифты Google.
• Использование системного стека — проблема с двумя вышеуказанными методами заключается в том, что загрузка файлов шрифтов повлияет на скорость загрузки веб-страницы в браузере. Использование системного шрифта по умолчанию заставит веб-сайт использовать настройки шрифта вашего компьютера. Это поможет повысить скорость работы веб-сайта, а также предложит читателям больше впечатлений.

Помните, что некоторые владельцы веб-сайтов могут загрузить шрифты Google и разместить их на своем собственном сервере. Независимо от того, какой тип шрифта использует веб-сайт, сайт должен включать шрифт в свой CSS (каскадная таблица стилей). Для сторонних шрифтов это будет внешний CSS, а для двух других вариантов следует использовать внутренний CSS сайта. Следовательно, вы можете легко найти семейство шрифтов, используя один из следующих методов, проверив код CSS.

Метод 1 — просмотр исходного кода страницы

Самый простой способ проверить шрифт, используемый на веб-сайте, — это проверить его исходный код.

• Откройте веб-сайт в Chrome или в своем любимом браузере.
• Щелкните правой кнопкой мыши и выберите в контекстном меню опцию «Просмотр источника страницы».

• На новой открывшейся странице нажмите «Control + F» в Windows или «Command + F» в Mac.
• Введите «шрифт» в поле поиска и нажмите Enter, чтобы найти слово в исходном коде.
• Если на веб-сайте используются шрифты Google или любые другие сторонние шрифты, вы можете найти соответствующие URL-адреса шрифтов в виде таблиц стилей CSS. Вот как это выглядит в исходном коде страницы:

• Как видите, используются два семейства шрифтов с сайта fonts.googleapis.com, который является API для сервера Google Fonts.

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet">

• С помощью этой информации вы можете найти название семейства шрифтов, используемого на сайте.

Метод 2 — проверьте с помощью инструментов разработчика

Если на веб-сайте не используются сторонние шрифты, вы не увидите никаких таблиц стилей, включенных в исходный код страницы. В таком случае веб-сайт должен использовать либо пользовательские шрифты, либо использовать системный стек в таблице стилей веб-сайта. Самый простой способ изучить таблицу стилей веб-сайта — просмотреть любой источник HTML-элемента с помощью консоли разработчика браузера. Вы можете найти шрифт, используемый на веб-сайте, с помощью свойства CSS font-family.

• Когда вы находитесь на веб-странице, нажмите F11 в Windows для перехода в консоль разработчика. Если вы работаете на Mac, щелкните правой кнопкой мыши веб-страницу и выберите параметр «Проверить» или «Проверить URL-адрес», чтобы открыть консоль разработчика.

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

• Однако получить полную информацию о шрифте сложно, так как строка будет обрезана во всплывающем окне.
• Вы можете просмотреть подробную информацию о CSS элемента в разделе «Стили» в консоли разработчика. Прокрутите вниз в разделе «Стили» и найдите, какой шрифт используется на сайте.

• Если вы видите зачеркнутую строку для свойства font-family для элемента body, прокрутите вверх и найдите активное семейство font-family для этого выбранного текстового элемента. По сути, это означает, что веб-сайт использует несколько шрифтов для разных элементов страницы.
• Если сайт использует собственные или сторонние файлы шрифтов, вы также можете проверить в разделе «Источники» консоли разработчика, чтобы найти исходное расположение шрифтов, загруженных на сайт.

Метод 3 — проверьте с помощью инструментов тестирования скорости страницы

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

• Перейти к Инструмент измерения скорости страницы Pingom.
• Введите URL-адрес веб-страницы, на которой вы хотите найти семейство шрифтов.
• Нажмите кнопку «Начать тест» и подождите несколько секунд, чтобы получить результаты.

• Прокрутите вниз и проверьте раздел «Запросы файлов».
• Если на веб-сайте используются файлы шрифтов (собственные или внешние), вы можете найти HTTP-запрос в этом разделе.

• Используя эти данные, вы можете найти шрифты, используемые на протестированном сайте.

Метод 4 — используйте расширение браузера Chrome

Последний вариант — использовать расширение в браузере Google Chrome. Это поможет вам получить шрифт, наведя указатель мыши на текстовое содержимое на веб-странице после установки расширения.

• Откройте браузер Chrome и перейдите по URL-адресу команды «chrome: // apps /».
• Вы найдете список приложений и щелкните Интернет-магазин, чтобы перейти в раздел расширений Интернет-магазина Chrome.
• Введите «поиск шрифта» в поле поиска, чтобы отфильтровать релевантные расширения.
• Вы найдете несколько расширений и нажмите «Какой шрифт — найти шрифт».

• На следующем экране вы можете найти все сведения о расширении и нажать кнопку «Добавить в Chrome».

• Подтвердите всплывающее окно, нажав кнопку «Добавить расширение». Вы увидите сообщение об успехе, и веб-сайт разработчика откроется в новом окне, которое вы можете просто закрыть.

• Теперь откройте веб-страницу, на которой вы хотите найти шрифт. Щелкните значок головоломки рядом с адресной строкой браузера и выберите расширение «Какой шрифт — найти шрифт».

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

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

Заключительные слова

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