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

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

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

Доступ к инспектору Chrome

Если вы используете браузер Chrome и хотите проверить веб-сайт, первое, что вам нужно сделать, это открыть окно инспектора. Есть несколько способов сделать это:

• Нажав клавишу F12 или
• Щелкнув правой кнопкой мыши по определенному элементу и в открывшемся меню, получите доступ к опции « Inspect ». Преимущество этого метода в том, что он непосредственно выделяет рассматриваемый элемент или
• Нажав комбинацию клавиш Control + Shift + I (в Windows) или Cmd + Alt + I (в Mac), или
• Открыв меню Chrome (3 точки в правом верхнем углу) »Дополнительные инструменты»Инструменты разработчика.

Окно инспектора может быть интегрировано в само окно браузера или отображаться в отдельном окне. Чтобы получить доступ к этим параметрам, вы можете сделать это, щелкнув значок конфигурации (3 точки) в правом верхнем углу инспектора и изменив значение свойства «Dock Side».

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

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

Основные вкладки инспектора

Как вы, возможно, заметили, инспектор состоит из разных вкладок.

Из каждого из них вы будете иметь доступ к различным функциям и возможностям:

• Элементы : показывает HTML-код страницы, а также применяемые стили. вы также можете изменять их и быстро добавлять новые правила.
• Консоль : показывает различные сообщения об ошибках и предупреждения, которые появляются на странице (изображения, которые не загружаются, ошибки javascript и т. д.).
• Источники : отображает дерево ресурсов для страницы. Вы можете видеть, откуда берутся различные ресурсы, и изменять их.
• Сеть : показывает различные запросы, сделанные с веб-сайта, доступ к содержимому запроса, полученный ответ, время…
• Производительность : показывает запущенные процессы и служит для измерения производительности страницы.
• Память : показывает потребление памяти во время загрузки и выполнения веб-страницы.
• Приложение : отображает полезную информацию о ресурсах, используемых веб-приложением.
• Безопасность : отображает информацию о различных сайтах, доступ к которым осуществляется со страницы, и их соответствующих сертификатах.
• Аудиты : позволяет создать отчет об аудите для проверки ошибок.
• Существуют плагины, которые добавляют в инспектор вкладки и функциональные возможности, поэтому вкладок может быть больше. На предыдущем изображении показано, что мы установили плагин Redux DevTools .

Вкладка «Элементы»

Давайте теперь вернемся к рассматриваемой проблеме: мы хотели узнать шрифт любого контента на веб-странице.

Как я упоминал ранее, на вкладке « Элементы » вы можете получить доступ к HTML-коду и стилям различных элементов на странице, на которой вы находитесь.

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

Фактически, на панели стилей у вас есть три вкладки:

• Стили : показывает примененные правила CSS, и вы можете изменять и добавлять новые.
• Computed : показывает все правила, примененные к элементу, с панелью, представляющей границы, поля и заполнение элемента.
• Event Listeners : показывает дерево событий, которые были запущены на странице, и элементы управления, затронутые ими.

Просмотр сведений об элементе

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

На изображении инспектора вы можете видеть, что главное окно сообщает мне, что стиль заголовка «Nelio Software» — h1 .

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

Посмотреть шрифт

Теперь вы знаете, что это заголовок, но как насчет шрифта?

Ну очень просто, во вкладке Computed инспектора вы найдете все свойства выбранного элемента. Прокрутите вниз до атрибута font-family и там вы найдете именно тот шрифт, который имеет заголовок нашего сайта.

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

Вы автоматически увидите свой сайт с измененным типом шрифта

Как видите, инспектор Google Chrome — это очень удобный и простой в использовании инструмент для игры и опробования дизайна, который у вас остался бы после внесения каких-либо изменений в элемент.

Как насчет шрифта изображения?

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

Для этого есть несколько инструментов, таких как Font Squirrel Matcherator или Whatfontis.com, которые могут помочь вам определить шрифт, используемый в изображении. Для этого в обоих инструментах необходимо либо скачать изображение (на whatfontis.com можно также указать URL-адрес изображения), а затем выбрать часть изображения, содержащую букву, которую вы хотите идентифицировать.

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

Избранное изображение Джеммы Эванс на Unsplash.