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

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

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

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

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

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

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
   
   Сервис, который основан на вашем представлении о том, как выглядит шрифт, вам нужно провести детальный анализ букв и их элементов.
   
   
   
   
   С помощью данного сервиса также не удалось определить шрифт.

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

Здравствуйте.

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

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

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

Ладно, ближе к теме...

Дополнение!

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

Распознавание шрифта на картинке

Вариант 1: с помощью ABBY Fine Reader

Если кто-то не слышал о такой программе как ABBY Fine Reader - то кратко скажу, что она предназначена для распознавания текста с картинок, PDF-файлов, сканов и пр. (т.е. на входе - у вас обычный графический файл; на выходе - программа выдает вам текст, который можно перенести в Word).

Так вот, Fine Reader по умолчанию при распознавании текста не меняет шрифт ! То есть, при процессе распознавании шрифт текста будет выбран тот, который запечатлен у вас на графическом файле (фото, картинке и пр.).

Покажу на примере, как это работает...

1) Установку и запуск программы я опускаю (они стандартны и никаких сложностей возникнуть не должно). Далее нужно нажать по меню "Файл/Открыть PDF или изображение" и указать картинку/фото, на котором находится нужный текст...

2) Распознавание картинки по умолчанию происходит автоматически (примечание : слева отображается исходная картинка - справа результаты распознавания) .

В общем, когда программа закончит свою работу - останется только кликнуть в нужный участок полученного текста, и вы увидите его шрифт. В качестве примера ниже я загрузил скриншот странички своего сайта, Fine Reader выдал шрифт Georgia (правильно!).

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

В качестве еще одного примера взял фото разворота книги "Война и Мир". Используемый шрифт - Times New Roman.

Удобно? Вполне! Я думаю, что этот способ - один из наиболее эффективных (особенно, если речь касается русскоязычного текста).

Примечание: если на распознаваемом фото/картинке будет использоваться редкий шрифт (которого нет в вашей системе) - Fine Reader подберет автоматически наиболее похожий из тех, что есть.

Вариант 2: с помощью онлайн сервисов

Онлайн-сервисы удобны прежде всего тем, что вы сразу же можете приступить к работе (ничего не устанавливая и не настраивая). С другой стороны, их функциональность и эффективность - достаточно низкая (по крайней мере, для работы с ними нужно иметь куда качественнее изображение, чем для того же Fine Reader).

Впрочем, есть и преимущество: они могут определить шрифт даже в том случае, если у вас его нет на ПК. Ниже привожу несколько ссылок:

1. (сервис для авто-распознавания шрифта. Обычно всегда рекомендует платные версии шрифтов, в то время как они почти не отличаются от обычных...);
2. (аналогичный сервис);
3. (аналог предыдущих, правда работает через раз, но все-таки...);
4. (богатая коллекция русских шрифтов);
5. (И еще одна... Здесь собрано более 1000 разнообразных шрифтов! 😉).

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

Рассмотрю работу в одном из сервисов - myfonts.com (он первый в моем мини- списке). После перехода на сайт - вам нужно загрузить изображение и выбрать область текста на нем (см. шаг 1 и 2 на скриншоте ниже).

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

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

На этом пока всё.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вам понадобится

• Компьютер с подключением к сети Интернет.

Инструкция

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

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

Откройте любой графический редактор и вставьте изображение из буфера обмена. В качестве простейшего редактора возможно использовать MS Paint, который запускается из меню «Пуск» и раздела «Стандартных программ». В открытом окне редактора нажмите сочетание клавиш Ctrl + V, чтобы вставить продукт буфера обмена. Сохраните изображение в любой папке, например, на рабочем столе - для быстрого доступа.

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

На странице сервиса нажмите кнопку Upload a file, чтобы загрузить изображение с жесткого диска, в вашем случае это картинка на рабочем столе. А скопированный адрес изображения необходимо вставить в пустое поле Or specify a URL. Затем нажмите кнопку Continue.

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

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

Совет добавлен 29 апреля 2012 Совет 2: Как определить шрифт на сайте Точно подобранный шрифт способен подчеркнуть стиль сайта, придать ему уникальности, красиво разделить абзацы, основной текст, цитаты и второстепенную информацию. А также сделать сайт запоминающимся и подарить приятные эмоции посетителям.

Инструкция

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

Чтобы посмотреть шрифт в браузере Firefox, кликните по интересующему вас блоку текста правой кнопкой мышки и нажмите «Исследовать элемент». Нажмите кнопку «Стиль», расположенную в правом нижнем углу окна и в появившемся окне кликните «Свойства». Введите в строку поиска по свойствам – «font». Браузер отобразит все настройки текста заданного элемента. Среди них будет «font-family», указывающее название нужного шрифта. Также в остальных свойствах вы сможете определить стиль и толщину текста.

Аналогичная функция в Chrome называется «Просмотр кода элемента». Кликнув по нему, раскройте список «Computed Style», расположенный в правой части вкладки «Elements». Найдите в нем свойство «font-family», чтобы узнать название шрифта.

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

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

Чтобы определить шрифт с помощью программы Word, вставьте в него содержимое буфера обмена с помощью правой кнопки мышки или комбинации клавиш «Ctrl+V», выбрав при вставке «Сохранять исходное форматирование». Вы также можете использовать комбинацию клавиш «Ctrl+Alt+V», указав в меню «Формат HTML».

Посмотрите на вкладке «Главная» отобразившийся шрифт. Этот способ легче, чем просмотр свойств CSS, но в некоторых случаях Word определяет шрифт неправильно. Будьте внимательны.

Как определить шрифт на сайте - версия для печати

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

Поможет решить данную проблему достаточно простым и оригинальным способом. Вы загружаете (со своего компьютера или указав ссылку) картинку или логотип, на которых содержится текст, а сайт выдаёт список шрифтов. Для загрузки подходят файлы размером не более 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
Поиск по имени. Можно ввести название шрифта и искать его аналоги.