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

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

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

Давайте начнем!

Подпишитесь на наш канал Youtube

Почему вы можете проверить, какой шрифт использует веб-сайт

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

Кнопки призыва к действию (CTA) также могут оказаться бесполезными, если их текст не читается. Вот почему вам может быть удобно вести список шрифтов, которые привлекают ваше внимание, будучи одновременно стильными и удобочитаемыми. Затем вы можете использовать их на своем сайте или для клиента в будущем.

Как узнать, какой шрифт используется на веб-сайте (3 доступных метода)

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

1. Определите шрифты с помощью инструмента инспектора браузера.

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

Сначала щелкните правой кнопкой мыши веб-страницу, содержащую шрифт, который вы хотите найти. В появившемся меню выберите Inspect:

Если вы предпочитаете использовать сочетание клавиш, попробуйте Ctrl + Shift + I для Windows или Linux. Если вы используете Mac, эквивалент Cmd + Shift + I.

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

Затем перейдите на вкладку « Вычисленные » и найдите «font-family»:

Вы должны увидеть здесь название шрифта и его стиль.

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

2. Найдите шрифты с помощью расширения браузера.

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

Некоторые из таких надстроек включают:

• Fontanello: бесплатное использование, это расширение позволяет вам найти название шрифта, его толщину, стиль и многое другое, просто выделив его и щелкнув правой кнопкой мыши во время просмотра.
• WhatFont: еще больше упрощая обнаружение шрифтов, WhatFont позволяет просматривать название гарнитуры, просто наведя на нее курсор.
• CSS Peeper: это расширение, созданное для веб-дизайнеров, является немного более надежным и может сообщать вам дополнительные сведения из кода CSS веб-страницы.

Однако каждое из этих расширений поддерживает разные браузеры. WhatFont доступен для Firefox, Chrome, Safari и Internet Explorer. С другой стороны, Fontanello доступен только для Firefox и Chrome. CSS Peeper - это специальный инструмент для Chrome, который вы не сможете использовать ни на одной другой платформе.

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

После установки WhatFont вы можете проверить, какой шрифт использует веб-сайт, активировав его на панели инструментов браузера и наведя курсор на текст:

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

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

3. Обнаружение шрифтов в изображениях

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

Чтобы использовать WhatTheFont, вам необходимо загрузить рассматриваемое изображение и выбрать раздел с соответствующим шрифтом:

Затем он вернет страницу результатов с несколькими шрифтами, похожими, если не точными, на тот, который вы пытаетесь идентифицировать:

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

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

Заключение

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

В этом посте мы обсудили три метода, чтобы узнать, какой шрифт использует веб-сайт:

1. Определите шрифты с помощью инструмента инспектора браузера.
2. Найдите шрифты с помощью расширения браузера, такого как WhatFont.
3. Обнаруживайте шрифты в изображениях с помощью WhatTheFont.

У вас есть вопросы о том, как проверить, какой шрифт используется на веб-сайте? Дайте нам знать в комментариях ниже!

Изображение rudall30 / shutterstock.com