Как узнать какой шрифт используется на сайте: Как определить шрифт на сайте?

Как узнать, какой шрифт используется браузером из списка CSS font-family?

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

font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

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

Кто-нибудь может знать лучший способ? Большое спасибо!

css

webfonts

font-family

Поделиться

Источник

xuemind    

16 марта 2019 в 14:23

3 ответа

• Как установить Bootstrap @font-family-base?

  Загрузочный врачи скажут, что: Используйте атрибуты @font-family-base , @font-size-base и @line-height-base в качестве типографской базы. Означает ли это, что существует переменная CSS с именем @font-family-base ? Как я могу установить это в CSS, чтобы изменить шрифт для всей моей страницы?

• Какой шрифт отображается?

  Возможный Дубликат : Как я могу определить, какой шрифт браузер на самом деле использует для визуализации некоторого текста? Мой стиль CSS идет как font-family: helvetica, arial, sans-serif; для всей страницы. Похоже, что Вердана используется вместо этого на некоторых частях. Мне нужно как — то…

15

В firefox-developer-tools на вкладке Инспектор > Шрифты отображается «Fonts used» по текущему проверяемому элементу. Редактировать шрифты MDN

В google-chrome-devtools на вкладке Элементы > Вычисленные отображается «rendered fonts»
для текущего проверяемого элемента. «Even if its name isn’t in the font-family list.» whats-that-font , Хакернун

Firefox :-

Хром :-

Спасибо, @xuemind за предложенную правку

Поделиться

Pradeepal Sudeshana    

16 марта 2019 в 16:42

2

По порядку, если таковой имеется.
В вашем примере он сначала пойдет на Roboto и сохранит следующий ( "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif ) в качестве резервного, если он доступен.

Поделиться

Marcel    

16 марта 2019 в 15:32

2

Привет На mozilla firefox используйте аддон Font Finder .
Это лучший аддон, который предоставит вам все стили, применяемые к вашему элементу.!

Обновленный

Все работает так, как я и ожидал. После установки Font Finder выберите целевой текст и выберите [ Font Finder>Анализ выделения ] в контекстном меню (щелкните правой кнопкой мыши). Он покажет шрифт, отображаемый как следующий скриншот!

Поделиться

Vikas Patel    

16 марта 2019 в 15:52

Похожие вопросы:

Как вы можете определить, какой шрифт из стека CSS используется?

Я жадно использую Firebug, и на вкладке CSS-computed он покажет мне только объявленный стек, но не тот шрифт, который на самом деле использовался браузером. Помимо удаления шрифтов one-by-one и…

Как узнать, какой шрифт использует Chrome?

Представьте себе, что у меня есть следующее CSS font-family: ‘Non-existant Sans’, Arial, sans-serif; Предполагая, что несуществующий Sans не установлен в системе, Arial будет использоваться…

Кроме того, есть ли какой-нибудь способ узнать, какой шрифт в данный момент применяется к элементу HTML

Считайте, что у меня есть это правило CSS для якорного тега: font-family: Helvetica, Verdana, Calibri, Arial, sans-serif; Конечно, наблюдая за тем, что визуализируется в браузере, я могу судить,…

Как установить Bootstrap @font-family-base?

Загрузочный врачи скажут, что: Используйте атрибуты @font-family-base , @font-size-base и @line-height-base в качестве типографской базы. Означает ли это, что существует переменная CSS с именем…

Какой шрифт отображается?

Возможный Дубликат : Как я могу определить, какой шрифт браузер на самом деле использует для визуализации некоторого текста? Мой стиль CSS идет как font-family: helvetica, arial, sans-serif; для. ..

Что правильно указать в качестве значения CSS font-family: шрифт, шрифт или font-family?

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

CSS Font Icons font-family игнорируется

У меня есть шрифт, который заменяет следующие символы значками: ‘ ( * + $ % # ) Я определил следующее CSS: /* Define the fonts for use */ @font-face { font-family: ‘assets’; src:…

Какой шрифт используется, когда у меня нет этого шрифта

Какой шрифт используется, когда у меня нет этого шрифта? Пример: <html> <head> <link href=’https://fonts.googleapis.com/css?family=PT+Sans+Narrow: 400′ rel=’stylesheet’…

Как указать проприетарный шрифт с помощью свойства font-family?

Я рассматриваю возможность указания проприетарной политики со свойством font-family CSS, например font-family : Proxima Nova; Это платный лицензионный шрифт, и большинство моих пользователей его не. ..

Как узнать фактический отрисованный шрифт в microsoft edge?

В хроме он отображается под вычисленный стиль в инструмент разработчика в firefox есть вкладка ‘font’ при инспектировании элемента. Как насчет Microsoft Edge? Как узнать, какой шрифт на самом деле…

Как определить какой шрифт используется на сайте или картинке

Искать название незнакомого шрифта, сравнивая его визуально с другими шрифтами это всё равно, что искать иголку в стоге сена. Но этого делать и не нужно, потому что для этих целей есть специальные инструменты. Впрочем, все зависит от того, где вы нашли интересующий вас шрифт. Если на сайте, то идентифицировать его не составит особого труда, так этот шрифт у вас уже есть в папке Fonts. Ну а как иначе? Смотрите сами. Для оформления веб-страниц сегодня используется специальный язык CSS. Так вот, в нём имеется такое свойство как font-family, оно и отвечает за гарнитуру шрифта, только вот сам шрифт при открытии страницы подгружается не с сервера, а с папки Fonts на вашем компьютере.

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

А еще гарнитуру можно «вытащить» из исходного кода самой страницы. Для этого выделяем текст, кликаем правой клавишей мыши и в контекстном меню выбираем «Просмотр кода элемента» или что-то в этом роде, а затем в открывшемся окне инспектора (в правой его части) ищем свойство font-family.

Способ явно неудобный, к тому же он требует базового знания HTML и CSS. Поэтому лучше не морочить себе голову, а для определения шрифтов использовать специальные расширения. Для Chrome, к примеру, есть очень даже неплохое расширение Csscan, способное определить не только гарнитуру, но и размер, цвет, ширину отступов, высоту и другие свойства.

Typ.io Peek — ещё один плагин для хрома, только более простой. В нижней части странички он создает кнопку, при нажатии на которую отображаются все используемые шрифты. Имеются аналогичные инструменты для Mozilla FireFox, например Firebug. Для этих целей также можно порекомендовать онлайн-сервис WhatFont Tool.

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

Подобных сервисов очень много. Мы упомянем лишь один из них, остальные вы без труда сможете найти в Интернете. Называется он WhatTheFont. Распознавание картинки проходит в три этапа: загрузка изображения на сервер, разделение текста на глифы с подтверждением правильности распознания и вывод результата.

Кстати, результаты могут быть самыми неожиданными.

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

Точность идентификации во многом зависит от качества самой картинки. Маленькие, с высоким уровнем шума или недостаточным контрастом изображения могут потребовать предварительной оптимизации в Adobe Photoshop или другом редакторе. Ну, вот на этом пока и все. Что касается формата PDF, который, как известно, использует встроенные шрифты, то с ним можно поступить так же, как и с изображением.

Сайт сервиса WhatTheFont: http://www.myfonts.com

Как узнать шрифт на сайте online

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

Исходный код страницы

Самый простой способ – исследовать код страницы. Глубокие познания в HTML и CSS для выполнения этой задачи не понадобятся, нужно лишь найти свойства «font-family». Рассмотрим на примере Google Chrome:

Откройте страницу, на которой используется понравившийся шрифт. Щелкните правой кнопкой по тексту. Выберите пункт «Просмотреть код».

Справа появится консоль с инструментами разработчика. Найдите в ней пункт «font family».

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

Кстати, в других браузерах операция выполняется аналогично. Например, в Mozilla Firefox нужно щелкнуть по тексту правой кнопкой и выбрать пункт «Исследовать элемент».

Искомые данные отобразятся в окне справа, свойство называется также «font family».

Сервисы и расширения

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

Зайдите на сайт fount.artequalswork.com. Там есть большая кнопка «Fount», которую нужно схватить и перетащить на панель закладок.

Важно! Чтобы отобразить панель закладок в Chrome, нажмите сочетание Ctrl+Shift+B.

Откройте страницу с понравившимся шрифтом. Нажмите на Fount на панели закладок. Курсор превратится в крестик. Наведите его на шрифт и щелкните левой кнопкой. Результат появится в правом верхнем углу.

В Mozilla Firefox, Opera и других браузерах Fount тоже работает без проблем. Если этот сервис вам не нравится, или вы не хотите пользоваться панелью закладок, то используйте одно из расширений для определения шрифта.

— Fontface Ninja для Safari и Chrome.

— Type Sample для Chrome.

— WhatFont для Chrome, Firefox, Яндекс.Браузера.

— Typ.io для Chrome.

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

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

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

Почему шрифты имеют значение?

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

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

Как определить шрифты с помощью Inspector Tool

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

Скачать Divi Лучшая тема WordPress

Самая популярная тема WordPress в мире и Ultimate Page Buildress Page Builder

Скачать Divi

Во-первых, вам нужно перейти на страницу, содержащую шрифт, который вы хотите идентифицировать. Затем щелкните страницу правой кнопкой мыши и в появившемся меню нажмите «Проверить».

Если вам нравятся ярлыки, вы также можете попробовать ctrl + shift + I для Windows и Linux и cmd + shift + I для IOS, чтобы напрямую открыть панель проверки.

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

Затем вы можете проверить семейство шрифтов, перейдя на вкладку Computed.

Здесь вы сможете определить заголовок и стиль шрифта.

Как найти шрифты с помощью расширений браузера

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

1. Фонтанелло

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

2. WhatFont

С помощью WhatFont вы можете легко определить шрифт, просто наведя на него курсор. Это самый тонкий способ определить понравившийся шрифт. WhatFont доступен в Internet Explorer, Firefox, Chrome и Safari.

3. CSS Peeper

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

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

Как управлять шрифтами с помощью плагинов

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

Плагин шрифтов | Типография Google Fonts

В настоящее время библиотека Google шрифты содержит 998 уникальных шрифтов. Плагин Fonts позволяет легко использовать любой из этих шрифтов на вашем веб-сайте WordPress.

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

Ключевая особенность

• Предварительный просмотр Live Customizer
• Более 900+ шрифтов Google
• Работает с любой темой WordPress. Кодирования не требуется.
• Легкие обновления в один клик.
• Перевод готов.
• Совместимость с SSL и HTTPS.

• Эффективная загрузка шрифтов
• SEO-дружественный
• Протестировано на PHP7.
• Выборочная загрузка шрифтов.
• Предварительные подсказки ресурсов.
• Разместите шрифты Google локально.

Custom Fonts — это плагин WordPress с более чем 100 000 активных установок. Он позволяет вам легко и просто встраивать файлы пользовательских шрифтов на ваш сайт WordPress, чтобы ваш сайт выглядел гораздо более привлекательным для пользователей.

Ключевая особенность

• Работает с Elementor
• Работает с бобрами
• Пользовательские шрифты

• Поддерживает все форматы
• Работает с Астрой
• Легко использовать

Использовать любой шрифт — это плагин WordPress, с помощью которого вы можете устанавливать пользовательские шрифты на свой сайт WordPress. Он позволяет использовать любой шрифт, доступный в формате ttf, otf или woff. Кроме того, он работает быстрее и помогает загружать только один формат, а остальную часть можно автоматически собрать и преобразовать в один и тот же формат.

Ключевая особенность

• Быстро и просто
• Поддержка всех основных браузеров
• Преобразование шрифта

• Файл пользовательского шрифта до 25 МБ
• SEO дружественный
• Добавлено свойство font-display

FontPress — менеджер шрифтов WordPress

Font Press — это небольшой и мощный плагин WordPress с широким спектром настроек и опций, чтобы ваш веб-сайт WordPress выглядел лучше и помогал улучшить взаимодействие с пользователем с помощью настраиваемых параметров шрифта.

Ключевая особенность

• Предварительный просмотр визуальных шрифтов
• Неограниченные шрифты и комбинации
• Полная настройка шрифтов и эффекты CSS3

• Шорткод типографики
• Блок выделения текста
• Интеграция конструкторов без кодов

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

Чтобы и дальше оставаться в курсе наших публикаций, подписывайтесь на наши номера Facebook и Twitter.

Узнать какой шрифт используется на сайте? Название, цвет, размер

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

1. Fontface.ninja

Это приложение для Chrome, которое встраивается в ваш браузер и активируется одним нажатием при необходимости. После установки, вам нужно зайти на страницу сайта, шрифт которой вы хотите распознать – и кликнуть на иконку «ниндзи» в правом верхнем углу браузера. Теперь приложение активно, и при наведении курсора мыши на текст – он мгновенно выдает не только его название, но и размер кегля, кернинг, и межстрочное расстояние. Также есть полезная функция «убрать всё лишнее», после использования которой – приложение скроет все элементы страницы кроме текстов. Приложение абсолютно бесплатное и не требует регистрации. Всё что вам нужно сделать это перейти на официальный сайт fontface.ninja, выбрать название браузера который вы используете, ознакомиться и подтвердить настройки приложения:

2. Typ.io Peek 

Это тоже приложение для браузера, но оно работает немного иначе. После установки появляется буква «Т» в правом нижнем углу браузера. Приложение показывает сразу все шрифты, используемые на сайте, и обводит их соответствующим цветом. Это не всегда удобно. Часто нужно узнать один конкретный шрифт и нет необходимости в нагромождении информации. Установить Typ.io Peek можно напрямую из магазина Google Chrome (бесплатно).

3. Type Sample

Еще одно хорошее приложение, но оно доступно только для пользователей Chrome. Его отличием является возможность не только посмотреть все гарнитуры на сайте, но и сразу же их опробовать в специально отведенном окне. Также, при взаимодействии с Twitter можно создать свою собственную коллекцию шрифтов. Скачать Type Sample можно на официальном сайте. Эта программа является находкой для тех кому нужно узнать, какой шрифт используется на странице.

4. WhatFont

Самое универсальное приложение, которое подходит как для Chrome, так и для Firefox, и даже для Яндекс-Браузера. Этот инструмент выводит более чем исчерпывающий объем информации о шрифте, начиная с интервалов, заканчивая начертаниями и текущими цветовыми решениями. Вы сможете посмотреть гарнитуру в разных алфавитах, посмотреть используется ли в шрифте кириллица, и сможете даже скачать сам тут же, на месте, только если он есть в базе google fonts. Устанавливается в один клик, найти можно на официальном сайте. С этой программой вам не составит труда узнать, какой шрифт используется на сайте.

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 в исходном коде

• Как видите, используются два семейства шрифтов с сайта 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

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

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

Начать тест в Pingdom

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

Запросы файлов шрифтов в Pingdom

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

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

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

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

Найдите расширение Chrome для шрифтов

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

Добавить расширение в Chrome

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

Добавить расширение в Chrome

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

Нажмите Расширение, чтобы включить

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

Получить сведения о шрифте во всплывающем окне

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

Выход из расширения

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

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

Узнать название шрифта онлайн. Как найти нужный шрифт, не зная его названия? Определяем шрифт на картинке

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

Есть красивая надпись, но, не всегда удаётся сразу определить то, какой шрифт использовали. Что делать? Как определить нужный шрифт?

Показываю, как разрешить подобную ситуацию.

Определяем шрифт на картинке

Для решения задачи подойдёт сервис под названием Myfonts .

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

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

Сервис подумает и выдаст результат. В данном случае, всё определилось корректно, если нет, то ему надо помочь и вставить нужные буквы в поле ввода. Жмём Continue
.

Всё в порядке. Шрифт определился.

Вот так, легко и просто определяется любой шрифт на картинке. Думаю, сервис пригодится.

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

Однако решить эту задачу не всегда просто – особенно, при наличии большого количества похожих друг на друга вариантов.

Cодержание:

Специальные сервисы

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

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

Некоторые сайты помогают, в основном, в поисках только самых популярных шрифтов.

What font is

Ресурс What font is позволяет опознать шрифты с картинки бесплатно и достаточно быстро, но работает только с латиницей.

Попытка распознать кириллицу, скорее всего, будет неудачной.

Порядок действий для пользователя ресурса следующий:

• Открыть главную страницу сервиса.
• Загрузить на сайт изображение, щёлкнув по форме с надписью Upload image containing the font
  или вставив ссылку на картинку в Сети.

• Нажать на «Find a font»
  .
• Выбрать, будет ли распознаваться изображение без изменений или при распознавании будет выполнено реверс цветов, а также установить определяемую область.

• Выбрать дополнительные настройки изображения
  (яркость, контрастность и угол поворота), с помощью которых сервису будет проще распознать тип шрифта, и нажать на «Use image»
  .

• Расставить буквы в соответствующих формах, увеличивая шанс на распознавание, и нажать Continue
  .

• Выбрать подходящий вариант из появившегося на экране списка
  .

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

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

При отсутствии положительных результатов можно попробовать поместить картинку на форуме сайта (англоязычном, поэтому и общаться придётся на английском) и попросить помощи у его участников.

Важно
: Для работы с изображением оно должно иметь размер не больше 1,8 МБ и формат , или PNG. Также рекомендуется распознавать только одну строку за раз – если шрифтов несколько, выделяется часть картинки.

WhatTheFont

Ещё один способ распознать шрифты – перейти на сайт сервиса WhatTheFont и воспользоваться уже его помощью.

Благодаря стараниям сообщества My Fonts, ресурс получил огромную базу данных и является одним из самых удобных в использовании.

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

Действия пользователей должны быть следующие:

• Открыть страницу и загрузить изображение с текстом
  .

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

• Получить результаты поиска, среди которых обычно легко обнаружить необходимую информацию – так, в указанном примере заметен шрифт Arial Black
  , который не определился на сайте What font is
  .

Важно
: Для распознавания требуется выполнение определённых условий: размеры картинки должны быть в пределах 360 х 275 пикс., формат – PNG или JPG. Также рекомендуется, чтобы высота каждого символа была не меньше 100 пикселей.

Identifont

Сервис Identifont позволяет добиться необходимого результата, ответив на целый ряд вопросов.

В процессе такой проверки пользователь должен сравнивать характеристики распознаваемого с выдаваемыми вариантами.

Преимущества способа
– отсутствие условий к качеству и размерам изображения, недостатком является большое количество потраченного времени. Хотя при поиске нестандартного шрифта вероятность обнаружения всё равно будет небольшой.

Bowfin Printworks

На сайте Bowfin Printworks можно найти значительное количество данных, касающихся различных шрифтов, и идентифицировать тот, который находится на картинке.

Работать с сервисом удобнее, чем с Identifont, но времени придётся потратить больше по сравнению с WhatTheFont.

На сайте можно найти удобное руководство по самым популярным в дизайне вариантам шрифтов – таких как Serif, Sans Serif и Script.

Кроме того, есть возможность задавать вопросы владельцу сайта по поводу неопределённого набора символов.

Однако, если речь идёт о кириллице, результаты поиска вряд ли будут положительными.

TypeNavigator

Ресурс TypeNavigator предлагает собственный подход к поиску шрифтов.

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

С помощью сервиса пользователь постепенно сужает количество вариантов и после недолгих поисков получает положительный результат.

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

Недостатком можно назвать невысокую скорость определения – иногда на поиск нужного варианта тратится до получаса.

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

Приложения для смартфонов

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

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

А найденные шрифты можно приобрести в режиме онлайн на сайтах разработчиков.

Приложение предоставляет пользователю такое преимущество как определение шрифтов в режиме оффлайн.

Хотя вероятность распознавания будет выше при подключении к Интернету.

Расширения в браузере

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

Например, популярный плагин Naptha даёт возможность распознавать наборы символов с картинок.

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

Для этого стоит обратиться на такие форумы или сообщества:

Получить информацию по шрифтам можно и на сообществах популярного ресурса – например, Typeface Identification или Fonts in Use.

Первая группа посвящена распознаванию наборов символов.

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

Выводы

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

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

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

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

Поможет решить данную проблему достаточно простым и оригинальным способом. Вы загружаете (со своего компьютера или указав ссылку) картинку или логотип, на которых содержится текст, а сайт выдаёт список шрифтов. Для загрузки подходят файлы размером не более 360 x 275 пикселей и следующих форматов: GIF, JPEG, TIFF, BMP. Иногда может потребоваться ввести соответствующие символы, изображенные на картинке, поскольку система не всегда способна сама их точно опознать.

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

После загрузки изображения анализатор распознает символы.

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

Есть один недостаток — нет поддержки кириллических шрифтов.

Есть еще один замечательный онлайн сервис по распознанию шрифтов — (What Font is)

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

На сервисе Whatfontis есть 3 пути узнать что за шрифт:

Путь 1

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

По окончанию в самом конце страницы, будет три варианта поиска:

• Display only free fonts or free alternative fonts
  (Отобразить только бесплатные шрифты или альтернативные бесплатные)
• Display only commercial fonts or commercial alternative fonts
  (Отобразить только платные шрифты или альтернативные коммерческие)
• Display all fonts
  (Отобразить все шрифты)

Путь 2

Можно не загружать свою картинку содержащую текст с искомым шрифтом, а указать веб адрес картинки со шрифтом.

Путь 3

Поиск по имени. Можно ввести название шрифта и искать его аналоги.

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

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

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

Вот эта надпись:

Первый сервис, с помощью которого мы будет определять шрифт –

Нажмите на кнопку “Browse” для выбора картинки с текстом. Далее вам предстоит выбрать один пункт и даух:

The background color is lighter than the characters color – означает, что цвет фона светлее цвета букв и символов,
The background color is dark, please invert colors – светлый текст на темном фоне.

Теперь нажмите на кнопку “Continue” для продолжения.

В новом окне вам предстоит идентифицировать буквы – введите каждую букву в соответствующую для нее поле.

Снова кнопка “Continue” и перед нами список наиболее похожих шрифтов. Кстати, сервис правильно определил шрифт. Первый вариант – правильный.

Оценка сервиса – 5 баллов.

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

После выбора картинки с текстом нажмите “Continue”. Приятно, что сервис частично сам идентифицирует символы и лишь сомнительные вам придется ввести вручную.

И этот сервис отлично справился с заданием, правильно угадав шрифт. Единственный недостаток сайта What The Font это меньшее количество шрифтов по сравнению с WhatFontIs.

Оценка сервиса – 5 баллов.

Это были сервисы, которые определяют шрифт по картинке. Однако, есть сайты, где работает поиск шрифта по отдельным отличительным элементам.

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

Примеры вопросов, на которые вам предстоит ответить:

Есть ли у шрифта засечки,
название: просто введите название шрифта или его часть,
похожие шрифты – введите название похожих шрифтов, на тот который вы ищите,
дизайнер шрифта. Если известен дизайнер, или издетель шрифта, то вы можете включить его в поиск.

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

Мне не удалось с помощью этого сервиса найти нужный шрифт. Тест на пройден.

4. Font Finder Firefox Add-On – дополнения для Firefox, которое определяет какой шрифт используется на сайте. Просто выделите слово на сайте, и дополнение определит шрифт и стиль CSS.
Ссылка на дополнение https://addons.mozilla.org/en-US/firefox/addon/font-finder/

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

С помощью данного сервиса также не удалось определить шрифт.

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

Сейчас я вас научу плохому.

Допустим, есть картинка

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

Поиск по картинкам

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

https://www.google.ru/imghp?hl=ru

Исходную картинку загружаем через форму или кидаем на страницу поиска перестаскиванием.

Порой Яндекс отрабатывает лучше Гугла.

https://yandex.ru/images/

Польза от поисковых систем следующая.

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

Кто знает, это дело такое. Шансы малы, но не настолько, чтобы их игнорировать. Тем более в безвыходной ситуации.

«Что за шрифт» на MyFonts.som

Идем на Майфонтс в раздел, где работает специально обученный робот.

http://www.myfonts.com/WhatTheFont/

Мы роботу картинку, он нам — шрифты. Ну или ничего.

Но не спешите отправить ему картинку без проверки и доработки. Учтите, что:
– Робот не понимает кириллицу.
Перед загрузкой удалите с картинки все символы, которых нет в латинице. Кириллические символы, совпадающие с латинскими можно оставить.
– У робота плохое зрение.
Иногда он путает буквы с нестандартными формами. Поэтому иногда лучше кормить его по одной букве. Стоит найти самую характерную и начать с нее.

После загрузки скорректируйте распознанные символы, введя в ячейки под картинками правильные символы.

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

Жмем Continue.

Робот постарается найти оригинал шрифта и предложит подходящие теги для дальнейшего самостоятельного поиска.

Поиск по ключевым словам на MyFonts.som

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

Наше изображение выполнено как бы фломастером (brush pen). Еще тут подойдут слова типа «каллиграфия» (calligraphic), «от руки» (handwritten) и т.д. Здесь можно воспользоваться тегами, которые предложил робот.

Можно искать термины по-отдельности или объединять их и комбинировать в одном запросе.

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

Жмем кнопку Search и просматриваем результаты, попутно отмечая для себя подходящие варианты на замену.

На Майфонтсе много вариантов на замену исходному шрифту.

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

Скриним.

Растр

В Фотошопе скрин превращаем в смарт-объект.
В смарт-объекте накладываем на него Gradient Map
от нужного цвета к белому.

В макете выставляем смарт-объекту режим наложения слоев, например, Multiply
.

Для большинства случаев с белым фоном этого достаточно.

Кому этого мало, можете удалить из скрина белый цвет. Color Range…, тыкаете пипеткой в белый фон

получаете выделение по цвету, инвертируете выделение,

сглаживаете его пару раз на пиксель-другой, чтобы граница контура не была такой рваной,

и скрываете все белое под маску

В основном документе уже делаете со смарт-объектом все, что душе угодно, почти как с векторным шейпом.

При уменьшении смарт-объекта неровности контура станут менее заметны. Поэтому лучше скринить с запасом, а потом уже уменьшать до нужного размера.

Вектор

Если нужен вектор, то делаем трассировку в Иллюстраторе.

Открываем скрин из PNG-файла:

На панели Image Trace
ставим Mode: Black and White,
галочку Preview
и аккуратно
крутим Threshold
и настройки в Advanced:

Получив приемлемый результат, делаем надписи Expand

и получаем вектор на все случаи жизни:

Бесплатные шрифты

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

За бесплатными шрифтами идем во Вконтакте, в группу «

5 способов определить шрифты на веб-странице

Значит, вы занимаетесь своим делом, просматривая веб-страницы, и натыкаетесь на самую неудачную комбинацию шрифтов, но не можете определить шрифт? В этом видео (и приведенном ниже списке) я покажу вам, как именно найти эти шрифты…

1. Fontanello (Chrome + Firefox)

Fontanello Chrome and Firefox Extension, на мой взгляд, это самый быстрый способ узнать, какой шрифт используется на веб-странице.Вы просто щелкаете правой кнопкой мыши по тексту, находите Fontanello в меню и видите семейство шрифтов и некоторые дополнительные атрибуты.

2. WhatFont (Chrome и Safari)

WhatFont Chrome and Safari Extension — мой любимый вариант, когда дело доходит до обнаружения шрифтов. Чтобы активировать инструмент, вы должны щелкнуть значок «Какой шрифт» в меню браузера. Теперь вы можете выбрать несколько частей текста, что позволяет лучше визуализировать разбивки шрифтов по сравнению с Fontanello.

3. Визуальный инспектор (хром)

Расширение

Visual Inspector для Chrome предлагает немного больше возможностей, чем два вышеупомянутых.Вы просто щелкаете значок «Визуальный инспектор» в меню Chrome, чтобы активировать инструмент, а затем переходите к разделу «Типографика» в раскрывающемся списке. Теперь вам представлены используемые семейства шрифтов с дополнительной разбивкой всей типографии на веб-странице.

4. Старый добрый Проверка кода (все браузеры)

Итак, если вы пытаетесь избежать установки десятков расширений браузера, мы сможем узнать больше об используемых шрифтах с помощью старой доброй проверки кода:

Если вы используете Google Chrome , щелкните правой кнопкой мыши загадочный текст и выберите «Проверить».Появится всплывающее окно DevTools, убедитесь, что вы находитесь на вкладке «Стили» и перейдите к атрибутам Font-Family, чтобы узнать больше о шрифтах.

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

Если вы используете Safari , убедитесь, что меню «Разработчик» отображается, установив флажок в нижней части вкладки «Дополнительно» в настройках Safari. Теперь щелкните текст правой кнопкой мыши и выберите «Проверить элемент».Откройте боковую панель с подробностями, если она закрыта, и выберите вариант Стили — Вычисленные. Раздел font-family представит информацию о шрифте в атрибутах стиля.

5. Раскрытие переименованных шрифтов (расширенный метод)

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

Есть несколько способов сделать это, но я начну с записи текущего имени шрифта.Теперь откройте инструмент «Инспектор» (я использую Google Chrome), перейдите на вкладку «Приложение», прокрутите до раздела «Фреймы» и откройте «Шрифты». Нам нужно сопоставить имя файла с именем шрифта, указанным ранее. Теперь откройте этот шрифт в новой вкладке, чтобы загрузить его. Наконец, мы перетаскиваем этот файл шрифта в удивительный What Can My Font Do? веб-сайт и бац, информация о шрифтах представлена ​​красиво.

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

С большой любовью,
Роб

Twitter: @robhope
LinkedIn: @robhope
Электронная почта: hello@robhope.com

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

Вариант 1. Используйте расширение для браузера (Easy)

Расширения, такие как WhatFont (доступны для Chrome, Firefox и Safari), позволяют легко обнаруживать семейства шрифтов любого текста на веб-странице.Вам просто нужно установить расширение, активировать его на сайте и щелкнуть по элементу, который вы хотите проверить. Результаты отображаются в плавающем поле, всегда в выбранном вами контексте.

Вариант 2. Вручную проверьте CSS с помощью инспекторов браузера (Advanced)

Большинство веб-браузеров позволяют легко находить шрифты с помощью , щелкнув правой кнопкой мыши → «Проверить» или «Проверить элемент». Это также можно сделать, нажав F12 . Это покажет список стилей, прикрепленных к веб-сайту, который вы можете изучить, чтобы найти шрифты, используемые в любом элементе HTML.

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

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

Наконец, еще один способ быстро проверить, какие шрифты используются во всем мире (но НЕ как и где) — это перейти в «Приложение → Фреймы → Шрифты» . Там вы найдете список всех ссылочных (несистемных) шрифтов.

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

Как определить шрифты с веб-сайта

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

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

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

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

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

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

Как определить шрифты с веб-сайта

Есть несколько способов определить шрифты на веб-сайте:

1. Использование инструмента Inspect
2. с плагинами
   1. FFF Откат
   2. Источник
   3. Фонтанелло
   4. Какой шрифт

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

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

Самый простой способ идентифицировать шрифты с веб-сайта — использовать инструмент проверки браузера . Для этого вам нужно будет открыть инструменты разработчика вашего браузера. Обычно это можно сделать несколькими способами:

• Нажатие F12 или Ctrl + Shift + I в браузере
• Откройте меню браузера, щелкните правой кнопкой мыши и выберите Проверить
• Открытие Developer Tool options из меню браузера и переход к Web Developer

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

Этот элемент будет выделен в инструменте инспектора, и вы увидите стили и макеты в полях рядом с инспектором.

Затем щелкните вкладку Computed и прокрутите вниз, чтобы проверить поле Font-Family . В этом поле должен быть указан шрифт веб-сайта. Например, в этом примере используется шрифт Roboto или SF-Pro Display.

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

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

2) Определить шрифты с помощью инструментов и плагинов

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

2.1) FFFFallBack

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

Чтобы использовать этот инструмент, вам необходимо открыть эту страницу. Затем нажмите кнопку FFFFALLBACK и перетащите на панель закладок, как показано ниже. Если панель закладок не отображается в вашем браузере, нажмите Ctrl + Shift + B , чтобы включить ее.

Теперь откройте веб-сайт, на котором вы хотите определить шрифты, и щелкните Bookmarklet , который вы только что сохранили на панели закладок.Он должен показать семейство шрифтов и стиль веб-сайта в новом столбце, как показано ниже. Убедитесь, что вы выбрали Web Font как вариант вверху.

2.2) Источник

Fount похож на FFFFALLBACK, но также позволяет проверять шрифты определенных текстов. Таким образом, вы можете указать, для каких текстов вы хотите проверять шрифты.

Чтобы использовать Fount, перейдите на этот сайт и сохраните Bookmarklet с его веб-сайта, перетащив его на вкладку «Закладки».

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

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

2.3) Фонтанелло

Если вы предпочитаете использовать расширения браузера, Fontanello — идеальный инструмент для идентификации шрифтов с любого веб-сайта.Просто установите расширение Fontanello в Chrome или Firefox и активируйте его.

Чтобы идентифицировать шрифты на сайте, просто щелкните правой кнопкой мыши любой текст и выберите опцию Fontanello . Выпадающее меню покажет вам семейство шрифтов, а также его стиль и варианты.

2.4) Какой шрифт

Аналогичным образом можно использовать расширение WhatFont . Сначала установите расширение в Chrome или Firefox.Затем щелкните значок инструмента WhatFont на панели инструментов браузера и щелкните любой текст, чтобы проверить его шрифт. Хорошо то, что вы можете выбрать другой текст и посмотреть, какую типографику они используют одновременно.

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

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

Как определить шрифты на изображении

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

Что за шрифт

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

Для этого перейдите на эту страницу и перетащите или загрузите изображение в инструмент (убедитесь, что оно в формате JPG или PNG.) Затем определите рамку обрезки для текста, и инструмент покажет вам правильный шрифт текста. Кроме того, WhatTheFont также предоставляет вам веб-сайты, на которых вы можете купить шрифты, и даже позволяет тестировать шрифты с вашим собственным текстом.

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

Заключение

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

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

• Использование инструмента проверки браузера
• Использование инструментов букмарклета
• Через расширения браузера
• Использование специальных онлайн-инструментов для определения шрифтов из изображений

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

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

Вы открыли для себя новые шрифты? Какой метод вы использовали? Дайте нам знать в комментариях ниже!

Как определять шрифты в Интернете »XO PIXEL

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

1. Adobe Fonts

Adobe Fonts — такой замечательный ресурс. Вы можете не только использовать шрифты в связанных приложениях, таких как Illustrator и XD, но также можете использовать шрифты Adobe на своих веб-сайтах. Еще один замечательный инструмент, который мне очень пригодился, — это визуальный поиск шрифтов. Это очень полезно, если у вас есть изображение с шрифтом, который вы хотите использовать.Просто перетащите изображение или снимок экрана шрифта, который вы хотите найти, и Adobe Fonts мгновенно отсканирует фотографию и подберет шрифт.

2. Веб-инспектор

Как веб-разработчик я прекрасно понимаю, что нельзя принимать то, что вы видите на веб-сайте, за чистую монету. Один из моих любимых способов изучить понравившийся мне веб-сайт — использовать веб-инспектор. Таким образом, я действительно могу видеть код и другие ресурсы веб-сайта. Вы также можете использовать веб-инспектор, чтобы узнать, какой шрифт используется на любой веб-странице.Просто выделите текст, нажмите «Проверить» в Chrome и на вкладке «Стили» вы увидите, какой именно шрифт используется. В качестве альтернативы, в Firefox щелкните правой кнопкой мыши и выберите «Проверить элемент», а на правой панели просто выберите вкладку шрифтов, чтобы увидеть текущий используемый шрифт, а также все шрифты на странице.

3. WhatFont

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

Давай поговорим!

Как вы определяете шрифты в Интернете? Какие инструменты ты используешь? Оставьте комментарий ниже!

Сообщение навигации

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

Итак, здесь мы обсудим некоторые методы, которые помогут вам получить желаемый шрифт с любого веб-сайта!

1.WhatFont: Расширения, такие как WhatFont , упрощают обнаружение шрифта на веб-странице.Вам просто нужно установить его и щелкнуть по элементу, который вы хотите проверить. Результат отображается в плавающем поле в выбранном вами контексте. Он доступен для Google Chrome, Safari, Firefox.
Как загрузить и активировать:

1. Перейти на этот сайт https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm/related?hl=e2
2. Добавить (загрузить) расширение chrome или расширение Safari в веб-браузере по вашему выбору.
3. Перейдите на веб-страницу, на которой вы хотите узнать шрифт, и щелкните расширение WhatFont.
4. Наведите указатель мыши на веб-страницу. Вы найдете плавающее поле, содержащее шрифт, который вы хотите узнать.

Вывод:

2. Fontanello: Еще один полезный инструмент — Fontanello . Он скажет вам, какой веб-шрифт в вашем стеке шрифтов вы на самом деле видите, а не то, что должно быть видно. Он также сообщит вам размер, вес и стиль шрифта.Это так же просто, как добавить закладку. Fontanello работает в Safari, Chrome, Firefox.
Как загрузить и активировать:

1. Перейти на этот сайт https://chrome.google.com/webstore/detail/fontanello/jdlhfjlpaijjhklfadlhbbmpjfddkglc?hl=en

9012 расширение chrome или расширение Safari в веб-браузере по вашему выбору.

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

Вывод:

3. Элемент Inspect: Как разработчик, вы можете использовать inspect несколько раз. Inspect также можно использовать для поиска шрифтов, используемых на веб-странице. Использование инструментов разработчика в ваших браузерах — хороший способ узнать, какие шрифты объявлены в CSS веб-сайта. Но использование inspect не так просто, как использование расширения. Однако Inspect не показывает, какой шрифт на самом деле отображается — он показывает только применяемые стеки шрифтов.У этого также есть преимущества. Это, несомненно, улучшит ваши навыки работы с CSS, поскольку вы узнаете, как на самом деле CSS работает на вашем веб-сайте.

Вывод:

Примечание: Использование удивительного шрифта на красивых веб-сайтах является хорошей практикой. Так что продолжайте делать это. Доступно множество расширений, вы можете использовать любое из них. Два приведенных выше — лучшие расширения. Вы можете использовать для проверки шрифтов.

Как узнать, какой шрифт на странице

Обновлено: 31.12.2020, Computer Hope

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

Шрифт в документе

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

Шрифт на веб-странице

Через текстовый редактор или текстовый редактор

Вы можете выделить текст на веб-странице, для которого хотите определить шрифт.Скопируйте этот текст (щелкните правой кнопкой мыши и выберите Копировать или нажмите Ctrl + C на клавиатуре). Откройте текстовый редактор или текстовый редактор и вставьте (щелкните правой кнопкой мыши и выберите Вставить или нажмите Ctrl + V на клавиатуре) текст в новый документ. Снова выделите текст в текстовом редакторе и посмотрите на параметр шрифта на панели инструментов. Он должен отображать, какой тип шрифта используется для этого текста.

Через плагин

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

Примечание

Хотя существует множество бесплатных приложений, загрузка некоторых из них стоит денег.

Через исходный код

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

Кончик

Во многих веб-браузерах вы можете просмотреть исходный код, нажав Ctrl + U или нажав F12 .

10 инструментов и приложений, которые помогут быстро определить шрифты

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

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

18000+ шрифтов с засечками, без засечек, скриптовых, декоративных и монохромных шрифтов

Plus, мокапы, действия, кисти, графические шаблоны, шаблоны логотипов и многое другое!

Инструмент WhatFontIs — это онлайн-инструмент, который позволяет идентифицировать шрифты, загружая изображение или вводя URL-адрес, по которому шрифт расположен.Инструмент имеет обширный каталог из 550000+ коммерческих и бесплатных шрифтов и использует AI для поиска шрифтов для идентификации шрифтов.

WhatFont Tool поставляется как расширение браузера, доступное для Chrome и Safari, и как букмарклет. Все, что вам нужно сделать, это щелкнуть по нему, а затем навести курсор на текст на веб-странице, и расширение покажет вам название шрифта.

В

MyFonts есть удобный инструмент WhatTheFont, который позволяет идентифицировать шрифты по изображению. Он поддерживает как PNG, так и JPG и использует свою коллекцию из более чем 133 000 стилей шрифтов, чтобы найти наилучшее соответствие шрифтам в вашем изображении.

Fontface Ninja — еще одно расширение браузера для идентификации шрифтов. Что отличает это от других, так это возможность попробовать шрифты с вашим собственным текстом и возможность немедленно приобрести шрифт, нажав на ссылку с ценой или загрузкой. Он работает с Chrome, Safari и Firefox.

FontSpring Matcherator позволяет загружать изображение или делиться ссылкой на URL-адрес изображения для определения использованных шрифтов. Инструмент поддерживает функции OpenType и даже имеет функцию уточнения тегов, чтобы вы могли сузить результаты.

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

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

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

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

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

Заключение

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

.