4 способа узнать, какой шрифт использует веб-сайт

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

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

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

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

  • Самостоятельные пользовательские шрифты — на торговых площадках для покупок доступны довольно нестандартные шрифты. Кто угодно, купите и разместите эти шрифты на том же сервере, где также хранится контент веб-сайта.
  • Сторонние шрифты, такие как 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. Вот как это выглядит в исходном коде страницы:
Файлы шрифтов Google в исходном коде
Файлы шрифтов Google в исходном коде
  • Как видите, используются два семейства шрифтов с сайта 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 для этого выбранного текстового элемента. По сути, это означает, что веб-сайт использует несколько шрифтов для разных элементов страницы.
  • Если сайт использует собственные или сторонние файлы шрифтов, вы также можете проверить в разделе «Источники» консоли разработчика, чтобы найти исходное расположение шрифтов, загруженных на сайт.
Файлы шрифтов CSS
Файлы шрифтов CSS

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

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

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

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

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

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

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

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

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.