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

image 20 Ноября 2017

10 802

Подбор шрифтов:- http://fontstorage.com/ – База шрифтов с возможностью подбора и вывод в CSS- http://www.typetester.org/ – Тестирование и подбор шрифтов, вывод в CSS.- http://csstypeset.com/ – Работа с разными стилями и атрибутами текста и вывод в CSS.

image

Подбор шрифтов:

– http://fontstorage.com/ – База шрифтов с возможностью подбора и вывод в CSS

– http://www.typetester.org/ – Тестирование и подбор шрифтов, вывод в CSS.

– http://csstypeset.com/ – Работа с разными стилями и атрибутами текста и вывод в CSS.

– http://www.designerplaything.co.uk/designer-plaything.html – Подбор шрифта и цвета.

– http://www.texster.ru/ – Помощник в выборе шрифта.

– http://flippingtypical.com/ – Просмотр вашего текста в разном стиле.

– http://www.stcassociates.com/lab/fontbrowser.html – Аналогичен предыдущему (более расширен).

– http://www.blindtextgenerator.com/ru – Русский онлайн Lorem Ipsum генератор.

– http://wordmark.it/ – Просмотр вашего текста в разных стилях.

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

– http://www.myfonts.com/WhatTheFont/ – Определение шрифта по образцу.

– https://www.fontspring.com/matcherator – Определение шрифта по образцу.

– http://www.identifont.com/identify.html – Выявляет шрифт через ряд вопросов о нем.

– http://www.typophile.com/ – Крупнейшее сообщество на тему шрифтов.

– http://www.bowfinprintworks.com/ – поиск шрифтов по образцам.

– http://www.fontshop.com/research/ – выясняет название по форме отдельных символов.

– http://www.flickr.com/groups/typeid/ – определяет названия шрифтов, используемых в различных изображениях.

– http://fount.artequalswork.com/ – бесплатный онлайн сервис для моментальной идентификации шрифта.

Скачать шрифты:

– http://www.xfont.ru/ – Крупнейший сервис по шрифтам.

– http://www.fontov.net/ – бесплатный русскоязычный сервис для поиска и подбора интересующегося Вас шрифта.

– http://ifont.ru/ – Большой русскоязычный сервис шрифтов.- http://www.dafont.com/ – шрифты с просмотром вашего примера.

– http://www.fonts-online.ru/ – База шрифтов с просмотром Online

Прочее:

– http://fontstruct.com/ – создание собственных шрифтов Online

– http://fontark.net/farkwp/- Конструктор шрифтов Online

– http://www.fontsquirrel.com/fontface/generator – загрузка и доработка ваших шрифтов.

– http://pxtoem.com/ – Переводит одни единицы измерения шрифтов в другие.

– http://csswarp.eleqtriq.com/ – Онлайн сервис для подготовки эффектного текста.

– http://www.bestwebfonts.com/ – Удобный сервис для просмотра веб-шрифтов, в том числе с применением различных эффектов.

Статью подготовил проект – textygram.ru

+2

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

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

WhatTheFont

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

  • текст расположен чётко горизонтально;
  • высота букв не меньше 100 пикселей;
  • буквы не касаются друг друга;
  • общее количество символов — не больше 50.

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

Попробуем найти шрифт Circe с этого снимка:

Как и другие онлайн-инструменты, WhatTheFont не распознает кириллицу. Поэтому выберем те буквы, которые в латинице и кириллице выглядят одинаково — в нашем случае это «М», «а», «р» и «е». Если приложение распознало букву неправильно, исправляем её в поле снизу.

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

What Font is

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

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

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

FontDetect

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

Задаём буквы для каждого распознанного символа.

Если нужно, добавляем папки для поиска.

И получаем список шрифтов.

Identifont

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

Подобным образом работает поиск на Linotype, Bowfin Printworks, Fonts.com и Rentafont.

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

Профильные сообщества в сети

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

  • Type&Typography на Фейсбуке;
  • форум MyFonts;
  • TypeID на Flickr;
  • Typophile.

Главное для распознавание шрифта — качество картинки

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

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

5 бесплатных онлайн-сервисов для конвертирования шрифтов

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

1. Online Font Converter

Online Font Converter — это бесплатный онлайн-сервис, позволяющий конвертировать файлы шрифтов в формат ufo, woff2, ttc, svg, su, pfm, tfm, otf, eot, dfont и pdf.

2. Free Font Converter

Поддерживается конвертация в pfb, bin, gsf, ttf, pfa, sfd, gsf, mf, t42, cff, bdf, pt3, oft и ps. Кроме того, он также конвертирует менее используемые форматы шрифтов, такие как Suitcase (.suitcase) и Data Fork (.dfont).

3. Everything Font

Этот онлайн-сервис позволяет конвертировать шрифты в формат ttf, woff, woff2, svg, apk, eot, otf, t42, pdf и многие другие.

4. Font Converter

Сервис позволяет конвертировать файлы наиболее распространенных форматов, таких как ttf, otf, pfb, Chris, amfm, ofm, pfa, sfd, svg, ttc cff и многих других. В отличие от других онлайн-инструментов, он предлагает расширенные возможности для включения автоподсказок для шрифтов TTF на машинах Windows. Включение функции автоматической подсказки улучшает рендеринг шрифтов в системе Windows.

5. Files-Conversion

Инструмент можно использовать для конвертирования файлов шрифтов, таких как pdf, afm, bin, ttf, dfont и otf.

Спасибо, что читаете! Подписывайтесь на мои каналы в Telegram, Яндекс.Мессенджере и Яндекс.Дзен. Только там последние обновления блога и новости мира информационных технологий.

Также читайте меня в социальных сетях: Facebook, Twitter, VK и OK.

Хотите больше постов? Узнавать новости технологий? Читать обзоры на гаджеты? Для всего этого, а также для продвижения сайта, покупки нового дизайна и оплаты хостинга, мне необходима помощь от вас, преданные и благодарные читатели. Подробнее о донатах читайте на специальной странице.

Есть возможность стать патроном, чтобы ежемесячно поддерживать блог донатом, или воспользоваться Яндекс.Деньгами, WebMoney, QIWI или PayPal:

Заранее спасибо! Все собранные средства будут пущены на развитие сайта. Поддержка проекта является подарком владельцу сайта.

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

Содержание

Определять шрифт с помощью WhatTheFont очень просто: достаточно запустить камеру и сфотографировать текст для распознавания.

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

Кроме того, WhatTheFont предлагает поделиться результатами поиска в соцсетях.

FontMatch для ПК

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

  1. Загрузите картинку с образцом шрифта в приложение через пункты меню «File->Open». Рекомендуется использовать картинку с одним символом.
  2. В поле «Character» введите определяемый символ.
  3. Нажмите на кнопку «Identify» для запуска распознавания.
  4. Дождитесь результатов и выберите один из предложенных вариантов.

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

Что делать, если программы не распознали шрифт

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

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

  • Форум на ресурсе WhatTheFont;
  • Форум Fontmassive;
  • Группы «Опознание шрифтов» и «Поиск шрифтов» «Вконтакте»;
  • Форум Ruldtp.

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

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

Содержание image

Рассматриваем способы определения шрифта по картинке онлайн

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

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

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

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

image

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

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

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

Сервис «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”

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

Как распознать текст онлайн с помощью Whatfontis.com

Англоязычный ресурс whatfontis.com может похвалиться огромной базой коммерческих и бесплатных шрифтов, а также развитым AI для их поиска. Авторы ресурса обещают найти 60 платных и 60 бесплатных шрифтов-аналогов для каждого загруженного пользователем шрифта. Ресурс имеет не только инструментарий для идентификации шрифтов онлайн, но и форум, на котором вы найдёте помощь людей.

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

Выполните следующее:

  1. Перейдите на whatfontis.com;
  2. Кликните на «Browse» для загрузки картинки со шрифтом на ресурс;
    Кликните на “Browse” для загрузки изображения со шрифтом на ресурс
  3. После загрузки картинки сервис предложит вам помочь с идентификацией отдельных букв (достаточно 4-10 букв). Введите их правильные значения под каждой из предложенных букв ниже. Затем нажмите на «Continue»;
  4. Просмотрите полученные результаты с возможностью сохранения нужно шрифта (кнопка «Download»).Сохраните нужный шрифт с помощью сервиса Whatfontis.com

«IdentiFont» сервис для поиска шрифта

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

Данный сайт обладает пятью уникальными инструментами:

  • «Fonts by Appearance» (идентификация шрифта по внешнему виду);
  • «Fonts by Name» (определение шрифта по названию или части названия);
  • «Fonts by Similarity» ( по схожести);
  • «Fonts by Picture» (поиск почерка по картинке);
  • «Fonts by Designer/Publisher» (по имени создателя или издателя).

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

Рабочее окно сервиса “IdentiFont”

Англоязычный сервис для определения шрифтов Fontsquirrel.com

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

  1. Для работы с ресурсом перейдите на fontspring.com.
  2. И нажмите на кнопку «Upload Image» для загрузки картинки с нужным шрифтом на ресурс.
  3. Разместите нужный вам текст с картинки в центре рамки и нажмите на кнопку «Matcherate It!» внизу (процедура de facto идентична вышеописанному ресурсу «FontSquirrel»).
  4. Вы получите результат со списком найденных совпадений.

Рабочее окно сервиса “FONTSPRING”

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

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

Сервис «Fontmassive»

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

  1. Для работы с ним необходимо перейти на данный ресурс, в специальном окне написать текст с вопросом.
  2. Нажать на кнопку «Вставить изображение» для загрузки изображения с нужным шрифтом на ресурс.
  3. А затем нажать на кнопку «Отправить».

image

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

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

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

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

Расширение “WhatFont” в магазине Chrome

Fontedge.matton.se – узнавание шрифта онлайн

Сервис fontedge.matton.se по своему поисковому инструментарию похож на описанные выше аналоги. При этом его функционал работает достаточно нестабильно, потому мы поместили его в конец нашего списка.

Работа с сервисом состоит примерно в следующем:

  1. Загрузите изображение с нужным шрифтом на ресурс;
  2. Кликните на букве с опознаваемого слова;
  3. Проверьте, правильно ли опознана нужная буква;
  4. Внесите букву в идентификационный список;
    Функционал ресурса fontedge.matton.se
  5. Повторите операцию для ещё нескольких различных букв;
  6. Заполните буквенное поле;
  7. Кликните на стрелку запуска идентификации;
  8. Просмотрите полученные результаты.

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

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий