Как легко определить шрифт на странице?

Текст на картинке (кириллические)

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

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

1. Зайдите на сайт fontmassive.com и вставьте в сообщение картинку. Для этого либо перетащите его из окна проводника с помощью зажатой левой кнопкой мыши прямо в строку, либо нажмите на соответствующий значок. 
2. Напишите какое нибудь сообщение или комментарий, введите свое имя и почту, чтобы получить уведомление когда вам ответят, и нажмите «Отправить».
3. После этого либо периодически заходите на сайт, чтобы проверить, как там поживает ваш пост, либо ждите, когда придет уведомление на почту. Обычно это не занимает много времени. 

Приложения для распознавание шрифта онлайн

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

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

Fount работает как букмарклет – добавляете его в панель инструментов вашего браузера. Далее на тех или иных сайтах он будет показывать не только используемый шрифт, то и его размер, стиль, вес. Совместим с Chrome, Safari, Firefox и IE8+.

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

Определяем русский шрифт

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

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

Посмотрите совпадения.

Как узнать шрифт из картинки сервисом Likefont

Сервис определяет русский шрифт в онлайн режиме. Перейдите по адресу: https://en.likefont.com/. Нажмите кнопку «Upload».

Установите границы.

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

whatfontis.com — сервис поможет определить шрифт

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

Whatfontis работает только с латиницей. Загружаемые в него фразы не должны превышать 10 символов. Для чёткого определения шрифта можно поставить черту между каждой буквой. Его базовое использование доступно бесплатно, а преимущества открываются лишь по приобретении подписки: 39,99$ в год. Регистрация понадобится лишь в том случае, если Вы решите сохранить результат экспертизы.

Среди платных достоинств службы:

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

Для работы с Whatfontis:

1. Перейдите на сайт https://www.whatfontis.com/
2. Загрузите нужное изображение. При бесплатном использовании удостоверьтесь, что оно соответствует критериям, при платном Вы получите возможность редактирования. Подтвердите его;
3. Распределите «чёрточки» между символами;
4. Получите результат. Зарегистрируйтесь, чтобы скачать.

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

Bowfinprintworks.com – ещё один сервис с ответами на вопросы

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

Сервис «Fontmassive»

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

Спросите у пользователей о нужном шрифте на fontmassive.com

Расширение «WhatFont»

Расширение для браузера Google Chrome (а также для других браузеров на ядре «Chromium») под названием «WhatFont» позволит вам легко выполнить опознавание шрифта онлайн. После установки и активизации приложения в браузере будет достаточно навести курсор на нужный шрифт для идентификации последнего (опознаются как латинские, так и кириллические шрифты).

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

Расширение «WhatFont» в магазине Chrome

Программы для определения шрифта по картинке

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

FontDetect

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

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

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

Как вы могли заметить, весь процесс занимает минимум времени и энергии.

WhatTheFont

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

Скачать приложение можно через AppStore или Play Маркет.

FontMatch

Третье приложение, полезное в распознавании понравившегося шрифта, – программа FontMatch, созданная для Windows. Разработка действует по идентичной схеме – загружаем изображение в устройство, запускаем систему, картинка анализируется. Результат – нужный инструмент или максимально похожие шрифты (из тех, которые загружены на ПК). Сложно изложить о FontMatch большое количество информации, поскольку приложение максимально примитивно, при этом – действенно.

Как определить шрифт по картинке и не только. Обзор лучших сервисов

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

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

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

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

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

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

1. WhatFontIs, адрес — https://www.whatfontis.com/

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

   • The background color is lighter than the characters color – означает, что цвет фона светлее цвета букв и символов,
   • The background color is dark, please invert colors – светлый текст на темном фоне. Теперь нажмите на кнопку “Continue” для продолжения.

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

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

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

2. What The Font, адрес https://www.myfonts.com/WhatTheFont/ xdf

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

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

   Я добавила букву f, исправила S на i и дописала точку в свободное поле. Снова “Continue”.

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

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

3. Это были сервисы, которые определяют шрифт по картинке. Однако, есть сайты, где работает поиск шрифта по отдельным отличительным элементам. Identifont адрес https://www.identifont.com/index.html

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

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

   есть ли у шрифта засечки,

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

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

6. Font Finder Firefox Add-On — дополнения для Firefox, которое определяет какой шрифт используется на сайте. Просто выделите слово на сайте, и дополнение определит шрифт и стиль CSS. Ссылка на дополнение https://addons.mozilla.org/en-US/firefox/addon/font-finder/
7. Bowfin Print Works — https://www.bowfinprintworks.com/SerifGuide/serifsearch.php Сервис, который основан на вашем представлении о том, как выглядит шрифт, вам нужно провести детальный анализ букв и их элементов.

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

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

vgrafike.ru

Узнать шрифт по картинке онлайн – особенности реализации

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

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

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

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

Текст на веб-страницах

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

1. Для начала нужно установить само расширение в браузере google chrome, называется оно Whatfont. Как ставить расширения вы можете посмотреть на примере этой статьи. Так что если вы не знаете, то почитайте. 
2. Теперь зайдите на любой сайт и нажмите на появившийсязначок расширения в правом верхнем углу, после чего наведите курсор на любой фрагмент текста. Видите? Появилась рамочка с названием шрифта. Собственно это и есть то, что мы искали. 
3. А если нажать нажать левой кнопкой мыши по фрагменту, то вам откроется окошко с более подробной информацией. Кроме самого названия шрифта вы сможете увидеть его размер на данном фрагменте, а также его цвет. 

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

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

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

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

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

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 предлагает собственный подход к поиску шрифтов.

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

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

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

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

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

Поиск шрифта по картинке с whatfontis

1. Загружаем изображение со шрифтом с компьютера.
2. Заливаем по url.
3. Открываем дополнительные настройки.
4. Отмечаем если по картинке есть тень.
5. Если линия шрифта идет не четко по горизонтали, то его надо выровнять, отмечаем галочку.
6. Если необходим редактировать файл, то на сервисе есть встроенный менеджер.
7. Продолжить.

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

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

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

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

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

Текстовые инструменты

Identifont

Сервис под названием Identifont использует другой интересный подход к решению задачи. Вместо загрузки изображений здесь вам предлагается ответить на несколько наводящих вопросов по искомому шрифту: наличие засечек, формат букв «J», «Q» и символа «$» и др.

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

Bowfint Printworks

Сайт Bowfint Printworks пригодится, если вы пытаетесь узнать шрифт онлайн с засечками из семейства Serif. Здесь задается ряд вопросов по форме глифов для некоторых элементов шрифта (см. скриншот выше). Этот ресурс по специфике похож на предыдущий, но в работе он быстрее, т.к. все задания сразу отображаются на одной странице без переходов. Если у вас что-то не получилось, можете написать автору проекта на почту. Здесь также содержатся руководства Script, Bauhaus-style, Sans Serif и Serif, и Lined.

Форумы и опросники

Этот не автоматизированный подход, но он иногда хорошо работает. Чтобы определить тот или иной шрифт, попросите помощи у специалистов из данной ниши. Местом их обитания могут быть как специализированные форумы, так и просто “ответвления” на популярных веб-сервисах.

Например:

• Раздел Typeface Identification на Quora – одном из крупнейших порталов по вопросов-ответов (он там, судя по всему, далеко не один).
• Группа typeid (Flickr Typeface Identification) на популярном фотохостинге Flickr – аналогично нужно добавить любую картинку и ожидать подсказки от пользователей. Обновления были недавно, значит группа активна.
• Typophile – сообщество экспертов, где вы можете загрузить свое изображение для получения “помощи из зала”.

Лучшие сервисы для определения шрифта по изображению онлайн

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

Сервис «WhatTheFont» поможет идентифицировать красивый шрифт

Сервис «WhatTheFont» — наверное, один из наиболее популярных англоязычных сервисов идентификации шрифта. Работа с сервисом довольно проста, и не требует от пользователя никаких специальных навыков (включая отсутствие процедуры регистрации).

1. Для работы с сервисом перейдите на сайт myfonts.com.
2. Нажмите на кнопку «Choose File» (выбрать файл), и выберите на жёстком диске вашего ПК картинку с нужным вам фоном.
3. Затем нажмите на кнопку «Continue».

Рабочее окно сервиса «WhatTheFont»

Сервис проведёт процедуру распознавания, и откроет вам экран, на котором вам предстоит определить, верно ли сервис распознал буквы (если нет, введите необходимые коррективы).

После этого нажмите на «Continue», и вы получите результат с предположительным названием нужного вам шрифта. Шрифты, названия которых окрашены синим цветом, вы можете скачать к себе на ПК (некоторые из таких шрифтов могут иметь платный характер).

Сервис «FontSquirrel» распознает буквы алфавита онлайн

Сервис «Font Squirrel» — ещё один англоязычный ресурс для поиска шрифта онлайн. Как и в случае с «WhatTheFont» вы сможете не только возможность распознать нужный нам алфавит, но и сразу скачать его с базы данного ресурса (как бесплатно, так и за деньги).

1. Перейдите на сайт fontsquirrel.com, нажмите на кнопку «Upload image» и загрузите картинку с нужным вам шрифтом на ресурс.
2. Теперь разместите нужный для распознавания шрифта текст в специальной рамке (размер рамки регулируется, как и регулируется размер текста).
3. А затем кликните на кнопку «Matcherate It!».

Рабочее окно сервиса «FontSquirrel»

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