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

  • Дата: 28.04.2024

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

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

Cервис создан одним из крупнейших поставщиков шрифтов (myfonts.com, — прим.перев). Это ресурс №1 в Вашем списке идентификаторов шрифтов. Просто загрузите картинку со шрифтом, который нужно идентифицировать, на сервер WTF (делаете скриншот и вырезаете слово с понравившимся шрифтом, — прим.перев) или вставьте ссылку на изображение шрифта в специальную строку. Система покажет Вам в результатах различные варианты шрифтов.

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

Identifont

P.S. От себя лично и читателей Дизайн Мании хочется поблагодарить проект МногоЛого за эту подборку действительно полезных в работе сервисов. Оригинал статьи находится на сайте Webdesign Deport . Подчас именно от шрифтов в дизайне сайта многое зависит. Чаще всего используются, конечно, стандартные наработки, но с развитием интернета, HTML5, сервисов шрифтов постепенно дизайнеры обращают внимание и на другие возможности оформления текстов.

P.P.S. Хотите стать радиоведущим? Всегда мечтали работать на радио? — тогда курсы радиоведущих в киеве то, что вам нужно, узнаете и получите весь необходимый объем знаний.
Если вас всегда привлекал необычный цвет глаз, то можно использовать цветные контактные линзы которые доступны для заказа в интернет магазине ЛинзМастер.

Я уверен, что у любого дизайнера был такой момент, когда он видел где-то какой-то шрифт, который так мог бы пригодится в проекте, но… что за шрифт?.. Ответ на этот вопрос затаился в глубине Вашего сознания, либо в глубине Вашего «незнания» (что разумеется простительно).

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

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

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

Шаг 2: После загрузки картинки, проверьте, что What The Font правильно определил глифы, и лишь после этого жмите «поиск».

Вкратце, ГЛИФ - это графический образ знака. Один знак может соответствовать нескольким глифам; строчная «а», капительная «а» и альтернативный вариант строчной «а» с росчерком являются одним и тем же знаком, но в то же время это три разных глифа (графемы).

С другой стороны, один глиф также может соответствовать комбинации нескольких знаков, например лигатура «ffi», являясь единой графемой, соответствует последовательности трех знаков: f, f и i. Т.о. для программы проверки орфографии слово suffix будет состоять из 6 знаков, а графический процессор выдаст на экран 4 глифа.

Сначала я загрузил эту картинку:

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

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

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

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

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

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

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

  • 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.

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

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

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

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

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

  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

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




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

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

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

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

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

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

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

Нажмите на кнопку “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/

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

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

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