Поиск шрифта по картинке – лучшие бесплатные онлайн сервисы. Поиск шрифта по картинке: необыкновенно простые способы от сервисов до приложений Приложение для определения шрифта в браузере

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

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

Fontface Ninja

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

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

Расширение для идентификации шрифтов Fontface Ninja для Safari и Chrome вполне соответствует идее скрытного и эффективного наёмника. Работа с ним строится так: нажав на кнопку расширения, наведите курсор на интересующий шрифт - всплывающая подсказка будет содержать информацию о его названии, межстрочном интервале, размере. Если повезёт, тут же шрифт можно будет скачать.
Весьма любопытной может оказаться функция Mask: она позволяет скрывать графическое содержимое страницы, оставляя лишь текстовые блоки.

Type Sample

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

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

Расширение и для Chrome, и для Firefox, и для Яндекс.Браузера. Компенсируется такая всеядность предельно простым функционалом: нажал на кнопку, включив режим определения шрифтов, навёл на нужный и узнал кое-что новое.

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

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

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

Достаточно часто на всевозможных сервисах вопросов и ответов люди задают один и тот же вопрос: «Как определить шрифт по картинке ».

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

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

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

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

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

В качестве примера давайте определим шрифт в логотипе моего сайта MuzRelax.ru. Я то знаю, какой шрифт там использован, а вот посмотрим сможет ли сервис WhatTheFont корректно его идентифицировать.

Кстати, тем, кто еще не посещал этот сайт, крайне рекомендую сделать это – получите настоящее удовольствие).

Я сделал скриншот лого и загрузил картинку в таком виде:

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

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

На финальном этапе сервис выдаст список шрифтов, которые выглядит схоже с тем шрифтом, который есть на картинке. В моем случае было предложено 4 варианта, самый первый из которых (Georgia) и есть тот тип шрифта, который я использовал в логотипе сайта MuzRelax.ru. Отличный результат!

К сожалению, WhatTheFont имеет несколько недостатков:

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

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

P.S. Не забудьте оставьте эту статью у себя в закладках и порекомендовать своим друзьям).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. WhatFontIs,адрес — http://www.whatfontis.com/
   
   
   
   
   Нажмите на кнопку “Browse” для выбора картинки с текстом. Далее вам предстоит выбрать один пункт и даух:
   
   
   
2. What The Font , адрес http://www.myfonts.com/WhatTheFont/
   xdf
   
   
   
   
   Здесь вам тоже нужно загрузить картинку с текстом на сервис или вставить прямую ссылку на изображение. На рисунке-схеме показано,какая должны быть картинка для правильной работы сервиса. Буквы и символы должны быть четкими, не должны сливаться, размер шрифта не менее 100 пикчелей и текст должен быть выровнен по горизонтальной линии.
   
   После выбора картинки с текстом нажмите “Continue”. Приятно, что сервис частично сам идентифицирует символы и лишь сомнительные вам придется ввести вручную.
   
   
   
   
   Я добавила букву f, исправила S на i и дописала точку в свободное поле. Снова “Continue”.
   
   И этот сервис отлично справился с заданием, правильно угадав шрифт. Единственный недостаток сайта What The Font это меньшее количество шрифтов по сравнению с WhatFontIs.
   
   Оценка сервиса – 5 баллов.
3. Это были сервисы, которые определяют шрифт по картинке. Однако, есть сайты, где работает поиск шрифта по отдельным отличительным элементам.
   Identifont адрес http://www.identifont.com/index.html
   
   
   
   
   Если вы знаете точно, как выглядит шрифт, если у вас есть образцы букв, то вы можете выполнить небольшой тест по внешнему виду шрифта и найти его название.
   
   Примеры вопросов, на которые вам предстоит ответить:
   • есть ли у шрифта засечки,
   • название: просто введите название шрифта или его часть,
   • похожие шрифты – введите название похожих шрифтов, на тот который вы ищите,
   • дизайнер шрифта. Если известен дизайнер, или издетель шрифта, то вы можете включить его в поиск.
     
     
     Примечание: сервис англоязычный, но даже бе нания языка в нем легко разобраться, так как вопросы подкреплены рисунками с обозначениями.
     
     Мне не удалось с помощью этого сервиса найти нужный шрифт. Тест на пройден.
4. Font Finder Firefox Add-On — дополнения для Firefox, которое определяет какой шрифт используется на сайте. Просто выделите слово на сайте, и дополнение определит шрифт и стиль CSS.
   Ссылка на дополнение https://addons.mozilla.org/en-US/firefox/addon/font-finder/
5. Bowfin Print Works — http://www.bowfinprintworks.com/SerifGuide/serifsearch.php
   
   Сервис, который основан на вашем представлении о том, как выглядит шрифт, вам нужно провести детальный анализ букв и их элементов.
   
   
   
   
   С помощью данного сервиса также не удалось определить шрифт.

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

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

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

Вы могли увидеть его на сайте или сделать снимок экрана при просмотре видео ̶ это неважно.

О том, как определить шрифт по картинке, расскажем в статье.

Сервисы для определения шрифтов

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

• What The Font
• What Font Is
• Bowfin Printworks
• Identifont
• Type Navigator
• Flickr Typeface Identification

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

What The Font

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

Удобство пользования и быстрота поиска ̶ это также немаловажные критерии высокой оценки.

От вас требуется только ряд простых действий .

Порядок выполнения указан прямо на странице поиска.

Чтобы найти шрифт по картинке вам необходимо:

• Загрузить нужное изображение, нажав клавишу «Выберите файл» . Сделать это можно с файлом, который уже хранится на вашем устройстве.
• Пройдите в папку, где хранится картинка и нажмите «Открыть» .
• Чтобы перейти к следующему шагу используйте кнопку «Continue» ;

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

Для корректного результата убедитесь в том, что:

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

На сайт

What Font Is

What Font Is ̶ это еще один приятный и удобный в навигации и точности определения шрифта сервис.

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

Однако есть и одно существенное отличие, выделяющее этот поисковик.

В процессе заполнения нужных полей вам будет предложен один из трех вариантов поиска на выбор:

• Показать бесплатные шрифты или их аналоги;
• Показать только платные (коммерческие) шрифты или их аналоги;
• Показывать все виды шрифтов.

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

На сайт

Bowfin Printworks

Сервис Identifont

Принцип работы, как и у Bowfin Printworks, заключается в ответах на вопросы о ключевых особенностях шрифта.

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

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

По схожему способу идентификации стоит выделить сайт Type Navigator.