What the font не работает
What the font не работает
Как определить шрифт по картинке и не только. Обзор лучших сервисов
Любому дизайнер сталкивается с проблемой выбора подходящего шрифта. Иногда необходимо найти шрифт по картинке, определить шрифт по образцу. Особенно это актуально для веб-разработчиков при подборе шрифтов для будущего сайта. В этом случае на помощь приходят специальные сервисы, о которых будет подробно рассказано в этой статье.
Итак, проведем эксперимент. Для этого я написала в фотошопе тест с помощью выбранного шрифта и буду определять в различных сервисах, какой шрифт я использовала. Таким образом, определю, какой сервис лучший.
Вот это надпись:
Вам же я рекомендую перед тем, как определить шрифт, немного обработайте изображение – отсеките ненужные поля, добавьте контрастность или вовсе избавьтесь от фона.
Первый сервис, с помощью которого мы будет определять шрифт —
Нажмите на кнопку “Browse” для выбора картинки с текстом. Далее вам предстоит выбрать один пункт и даух:
Теперь нажмите на кнопку “Continue” для продолжения.
В новом окне вам предстоит идентифицировать буквы – введите каждую букву в соответствующую для нее поле.
Снова кнопка “Continue” и перед нами список наиболее похожих шрифтов. Кстати, сервис правильно определил шрифт. Первый вариант – правильный.
Здесь вам тоже нужно загрузить картинку с текстом на сервис или вставить прямую ссылку на изображение. На рисунке-схеме показано,какая должны быть картинка для правильной работы сервиса. Буквы и символы должны быть четкими, не должны сливаться, размер шрифта не менее 100 пикчелей и текст должен быть выровнен по горизонтальной линии.
После выбора картинки с текстом нажмите “Continue”. Приятно, что сервис частично сам идентифицирует символы и лишь сомнительные вам придется ввести вручную.
Я добавила букву f, исправила S на i и дописала точку в свободное поле. Снова “Continue”.
И этот сервис отлично справился с заданием, правильно угадав шрифт. Единственный недостаток сайта What The Font это меньшее количество шрифтов по сравнению с WhatFontIs.
Если вы знаете точно, как выглядит шрифт, если у вас есть образцы букв, то вы можете выполнить небольшой тест по внешнему виду шрифта и найти его название.
Примечание: сервис англоязычный, но даже бе нания языка в нем легко разобраться, так как вопросы подкреплены рисунками с обозначениями.
Сервис, который основан на вашем представлении о том, как выглядит шрифт, вам нужно провести детальный анализ букв и их элементов.
С помощью данного сервиса также не удалось определить шрифт.
Надеюсь, что теперь найти нужный шрифт, узнать его название не будет для вас проблемой.
Что это за шрифт? Инструменты для определения шрифта на странице
Хотите получить шрифт из изображения или текста? Есть несколько удивительно мощных инструментов, которые могут сделать всю работу за вас. После того, как вы узнаете, какой это шрифт, вы можете скачать его в Интернете и использовать его в своих обычных приложениях для обработки текста.
Эти инструменты не всегда идеально подходят для получения именно того шрифта, который вы ищете, но вместо этого вы найдете диапазон результатов, очень похожих на отсканированный вами шрифт. Иногда вы также можете найти точный шрифт, но в любом случае это гораздо лучше, чем безрезультатно искать конкретное имя шрифта в Интернете.
Мы рассмотрим некоторые инструменты поиска шрифтов, а затем объясним, как можно также установить шрифты на компьютер.
Лучшие инструменты поиска шрифтов
Прежде чем мы перечислим лучшие инструменты поиска шрифтов, чтобы найти шрифт, вот краткий совет по подготовке вашего шрифта для сканирования.
Если вы хотите отсканировать шрифт из PDF, документа или веб-страницы, сделайте снимок экрана страницы, а не копируйте и вставляйте сам текст. Если это текст на фотографии, вы можете обрезать большую часть фона, чтобы у вас остался только шрифт.
Затем выполните действия, указанные ниже для любого из этих инструментов поиска шрифтов, которые мы включили.
Что за шрифт Myfonts
Перейдите по ссылке выше, щелкните и перетащите свою фотографию в поле, и Myfonts определит любой текст на изображении. Затем просто нажмите, чтобы перетащить текст, который вы хотите отсканировать.
What The Font отлично справляется с поиском текста на изображении, поэтому почти во всех случаях вы должны видеть, что текст автоматически выделяется. Если нет, вы можете использовать инструмент перетаскивания, чтобы выделить текст вручную. Как только вы это сделаете, нажмите синяя стрелка идентифицировать ваш шрифт.
Как упоминалось ранее, шрифт не всегда может быть распознан сразу, но вы получите ряд вариантов. В нашем тестировании What The Font нашел правильный шрифт, но занял второе место в списке.
Многие параметры здесь очень похожи, и вы можете ввести свой собственный текст, чтобы увидеть, как будет выглядеть шрифт. Позже мы объясним, как вы можете найти бесплатные варианты этих шрифтов, а также установить их на свой компьютер.
Средство согласования шрифтов Fontspring
Мы обнаружили, что What The Font был более удобным для пользователя сканером шрифтов и работал с большей точностью. Например, более темные изображения, показанные ранее, могут быть обнаружены с помощью What The Font, но не Fontspring. Однако, если What The Font не работает должным образом, вы можете попробовать Font Matcherator от Fontspring.
Перейдите по ссылке выше и перетащите изображение в поле на веб-сайте Font Matcherator. Нажмите и перетащите, чтобы окружить текст отмеченным полем. Если текст найден, вы увидите красные рамки с текстом. Когда вы будете довольны результатами, нажмите на зеленый Сопоставьте это кнопка.
Конечный результат может быть не таким точным, как вы надеетесь, но вы все равно должны увидеть шрифты, похожие на тот, который вы отсканировали.
Как скачать бесплатные шрифты онлайн
Вы нашли понравившийся шрифт и назвали его, но не хотите платить от 20 до 100 долларов за него? К счастью, есть альтернативы. Многие создатели шрифтов создают бесплатные версии своих шрифтов, и вы можете найти их в Интернете.
Для этого посетите dafont затем найдите ваше имя шрифта в строке поиска.
Найдя шрифт, нажмите кнопку загрузки. Обратите внимание на права использования. Обычно эти шрифты доступны бесплатно для личного использования, но вы должны заплатить автору за права на коммерческое использование.
Если вы не можете найти свой шрифт здесь, вы можете вернуться к What The Font или Font Matcherator, чтобы найти название похожего шрифта. Поиск подходящего шрифта может занять некоторое время, но это может стоить того, если вы используете его только для личного использования.
Если вам нужен шрифт для коммерческого использования, лучше приобрести его на таких сайтах, как MyFonts или fonts.com, Если вы не можете найти понравившийся вам шрифт, вы всегда можете создать свой собственный шрифт.
Как добавить шрифты в Adobe Creative Cloud
Вы можете найти множество бесплатных шрифтов для установки в приложения Adobe Creative Cloud всего за несколько кликов.
Сначала откройте Adobe Creative Cloud. Далее нажмите курсив значок f в правом верхнем углу, а затем нажмите Просмотреть все шрифты, Новая страница откроется в вашем браузере. Войдите в свою учетную запись Adobe, если вы еще этого не сделали, и у вас будет доступ к мощной системе поиска шрифтов.
Просмотрите категории или найдите определенное имя шрифта, семейство шрифтов или создатель шрифта. Как только вы нашли шрифт, дважды щелкните по нему, и вы окажетесь на новой странице, где вы можете нажать, чтобы активировать каждый шрифт. Нажмите на кнопка активации и шрифт будет доступен в ваших приложениях Adobe Creative Cloud.
Что это за шрифт?
В этой статье мы научили вас, как найти шрифты в Интернете, отсканировав одно изображение. Вы также узнали, как найти названия шрифтов в Интернете для загрузки, а также как установить их на ПК с Windows или Mac.
У вас еще есть вопросы? Если вы это сделаете, не стесняйтесь поделиться ими в разделе комментариев.
Лучшие сервисы и приложения для идентификации шрифтов
Здесь мы собрали самые удобные сервисы и приложения для идентификации шрифтов. Сохраните эту статью себе в закладки и вы с легкостью сможете узнать название любого шрифта!
Дизайнеры часто сталкиваются с необходимостью узнать, каким шрифтом написан тот или иной текст. Перебор всей имеющейся коллекции шрифтов в поисках совпадения — далеко не самый удобный способ. Кроме того, нужного шрифта может просто не оказаться. Конечно, можно обратиться за помощью на тематические форумы, где другие дизайнеры смогут подсказать название шрифта. Только вот ждать ответа придется неделями. А если ждать некогда? Что же делать тогда?
На самом деле все просто. Воспользуйтесь этими ресурсами и вы сможете узнать название шрифта буквально за пару минут, а может даже быстрее!
Online-сервисы
WhatTheFont
WhatTheFont — объективно лучший сервис для идентификации шрифтов по картинкам. Просто загружаете картинку с примером шрифта, указываете, правильно ли сервис распознал буквы, и жмете на большую зеленую кнопку. Вам выдается несколько наиболее похожих по начертанию шрифтов, среди которых можно найти 100% совпадение. Если определить шрифт все-таки не удалось, то вам предложат задать вопрос на специализированном форуме на этом же сайте. Сервис удобен еще и тем, что найденный шрифт можно сразу же купить.
Для тех, кто ищет шрифты постоянно и в любых условиях, есть мобильное приложение для iPhone и Android. Можно просто сфотографировать шрифт и тут же узнать его название. Очень удобно!
IdentiFont
На этом сервисе можно искать шрифт, если у вас нет его изображения, но вы помните, как он выглядит, и сможете указать его характеристики, отвечая на ряд вопросов. Не сказать, что это самый удобный способ, но если другого варианта нет — вполне можно найти то, что нужно! Создатели сервиса предлагают разные варианты поиска шрифтов: по названию (частичному), по шрифтовым семьям, по символам и даже по дизайнерам, которые их разрабатывали.
Whatfontis
What Font is — онлайн-сервис идентификации шрифта по картинкам. Во многом похож на WhatTheFont, но стоит добавить в закладки, на всякий случай.
Приложения и расширения для браузеров
Помимо вышеперечисленных онлайн-сервисов, существуют их аналоги в виде расширений для браузеров. Их плюс в том, что не нужно каждый раз открывать новую вкладку, чтобы узнать каким шрифтом сделана та или иная надпись на сайте. Достаточно просто активировать расширение.
FontFaceNinja
Бесспорный лидер на данный момент. FontFaceNinja дает возможность не только узнать название любого шрифта на сайте (не картинки), но и попробовать его написание здесь же на сайте, а также (внимание) скачать понравившийся шрифт! Конечно, авторы предупреждают, что шрифты скачиваются исключительно для ознакомления.
Помимо красоты и удобства этого расширения есть еще один приятный момент. В FontFaceNinja есть волшебная кнопка (маска), которая скрывает всю рекламу со страницы, позволяя наслаждаться исключительно шрифтами. Скачать расширение можно совершенно бесплатно. Работает с Chrome и Safari.
Whatfont tool
Расширение для Chrome и Safari, которое поможет узнать названия шрифтов в браузере. Показывает достаточно подробную справочную информацию по интересующему шрифту, включая шрифтовую семью, размер и высоту строки.
Fount
Отличный плагин для идентификации шрифтов на сайтах. Чтобы все заработало, сайт нужно добавить в закладки и нажать на него. Курсор примет форму крестика и при нажатии на шрифт будет появляться окошко с его названием, размером в пикселах, весом и стилем. Чтобы выключить — нажимаем еще раз. Работает с браузерами Safari, Chrome, Firefox, и IE8+.
Апгрейд личных навыков распознавания шрифтов
Каждому хочется быть крутым дизайнером, который знает не только все существующие шрифты по названиям и семьям, но еще может перечислить разработчиков и рассказать истории создания. Конечно, такие навыки — это бесспорный талант. Но немного улучшить свои знания вполне реально. Вот несколько игр и инструментов, которые помогут вам в этом.
Font Trainer
Онлайн-игра-тест: устанавливаете параметры и угадываете где какой шрифт. Можно установить как латиницу, так и кириллицу.
The Font Game HD
Это приложение в буквальном смысле играючи поможет выучить названия и начертания шрифтов. Есть разные режимы игры, интересные задания и статистика ваших достижений. Из минусов стоит отметить, что приложение платное и только в AppStore.
Потренировались? Пора проверить свои знания!
Простой и красивый тест, о котором мы отдельно писали в блоге. Сможете ли вы определить 10 самых популярных шрифтов? Испытайте себя. Результаты могут оказаться неожиданными!
Напишите нам, если вы знаете еще какие-то удобные сервисы или приложения для идентификации шрифтов. Будем рады вашим комментариям! И поделитесь ссылкой на эту статью с друзьями. Пусть их жизнь тоже станет чуточку проще 🙂
Система font fallback: что происходит, когда шрифт не может найти нужный символ
Поднимите руку, если когда-нибудь сталкивались с такой ситуацией: вы получили текст со странными прямоугольниками или вопросительными знаками.
Или эмодзи при отправке выглядело нормально, но у получателя оно отобразилось в странно разобранном виде.
Вы видели, как пользователь Twitter использует крутые шрифты, хотя сайт, казалось бы, не разрешает выбирать шрифт.
Вы добавили в строку эмодзи, и в тот же момент эта строка некрасиво сместилась вниз:
Вы отправили кому-то прикольное каомодзи, однако у получателя всё выглядит не так замечательно:
Думаю, что у всех рано или поздно случалось нечто из вышеперечисленного.
Подобные погрешности могут сбивать с толку, но они недостаточно мешают, чтобы начать разбираться с ними подробно. Они похожи на небольшие баги, которые просачиваются в наше повседневное общение с компьютерными устройствами.
Но это не баги, по крайней мере, не в традиционном смысле. Все описанные выше примеры можно объяснить. Более того, в их основе лежит одна причина — важный и в определённом смысле впечатляющий механизм компьютерной типографии, о котором многие из нас совершенно не знают. Этот механизм помогает шрифтам, когда им не хватает символов, и такая помощь называется font fallback.
Это место (иногда) намеренно оставляют (почти) свободным
Я работаю дизайнером шрифтов, и одна из моих задач — добавление в шрифт каждого глифа, который ему понадобится.
Глиф — это типографический термин, приблизительно означающий символ. Даже простой шрифт западноевропейского языка содержит более двух сотен глифов: двадцать шесть букв алфавита плюс то же количество в верхнем регистре, десять цифр, символы, знаки пунктуации и надбуквенные знаки.
Три шрифта внутри приложения для создания шрифтов; обратите на длину полосы прокрутки у Hiragino Sans
Разумеется, не каждый шрифт является западноевропейским. Если вы создаёте шрифт для японского и китайского письма, то глифы будут исчисляться тысячами. Но как бы то ни было, глифы нужно отрисовывать всегда, даже в небольших шрифтах: символы и лигатуры, редкие пунктуационные знаки, альтернативные цифры и буквы для использования с функциями OpenType. При поддержке другой системы письма добавляется целый новый набор глифов, а другая система письма существует всегда — если вы поддерживаете латиницу, то почему бы не захватить и все западноевропейские языки? А затем Центральную Европу? А потом греческий? А затем кириллицу? И вьетнамский?
Некоторые шрифты покрывают небольшое количество всех возможных символов, другие — гораздо большее
На каком-то этапе приходится провести черту. И эта черта становится одним последним глифом. Он имеет техническое название .notdef, и точка здесь означает, что он не похож на остальные. .notdef — это глиф последней надежды, тот, который используется, когда шрифт запрашивает символ, который дизайнер не озаботился нарисовать.
.notdef — это первоначальная версия font fallback, рудиментарное решение проблемы, которой не существовало, когда вся печать была физической. В мире металлических литер, когда ты держишь в руках букву, ты одновременно держишь и конкретный шрифт, поэтому невозможно попросить шрифт вывести букву, о которой он никогда не слышал. Однако компьютеры создают странное расстояние между шрифтами и текстом. Компьютер может отображать текст, написанный кем-то другим, возможно, много лет назад, при помощи шрифта, незнакомого автору текста или даже шрифта, которого на момент создания текста ещё не существовало. И у шрифта должна быть возможность сказать: «Я понятия не имею, как должен выглядеть этот символ».
.notdef часто выглядит как простой прямоугольник, иногда с крестом посередине. Он является условным обозначением «это место намеренно оставлено пустым». Это не традиционный символ Unicode со своим конкретным кодом, а просто прямоугольник, который должен заменить отсутствующий символ. Когда вы копируете и вставляете его, то внутри он остаётся тем же исходным символом, который вы хотите видеть. Ведь в конце концов, в будущем шрифт может быть дополнен новыми глифами, или вы просто можете перейти на другой шрифт, поддерживающий нужный вам символ:
Переключение между двумя шрифтами
Что должно отрисовываться как глиф .notdef — это забота дизайнера шрифтов. Даже учитывая, что стандартно используется прямоугольник, его размеры могут меняться, а некоторые дизайнеры шрифтов перечёркивают прямоугольники или дополняют вопросительными знаками:
Другие дизайнеры опускают руки и ничего не отрисовывают, оставляя .notdef пустым квадратом. Остальные… ну, они немного творят дичь:
Примеры дичи встречаются редко, но что-то говорит мне, что в своей жизни вы хотя бы несколько раз видели подобные прямоугольники.
Тем не менее, вы бы удивились, насколько чаще бы вы их видели, если бы не существовало целой невидимой, впечатляющей и неординарной системы, «прикрывающей спину» каждого шрифта.
Font fallback, который вы знаете и любите (qɯǝɓиʚɐнǝн)
Явление font fallback большинству из нас известно по вебу. Оно выглядит примерно так:
Подоплека проста: данный список передаёт браузеру цепочку команд. «Для рендеринга этого элемента используй шрифт под названием Joanna. Если у тебя его нет, используй Helvetica Now. И его нет? А как насчёт старой версии Helvetica? Тоже не находится? Ладно, тогда просто возьми Arial. Нет Arial? Боже. Возьми тогда любой стандартный шрифт без засечек (sans serif), который можешь порекомендовать».
Первый шрифт из списка обычно является веб-шрифтом, скачиваемым вместе с самим веб-сайтом. Если загрузить его не удаётся, или на это требуется слишком много времени, выбираются следующие несколько рекомендованных шрифтов, уже популярных у пользователей или устанавливаемых в разных операционных системах.
Первый шрифт является наилучшим сценарием. С каждым шагом вглубь списка мы приближаемся к fallback и к бо́льшим компромиссам. Мы можем почти услышать всё более громкие вздохи дизайнера веб-сайта, постепенно теряющего контроль — от идеально подобранного, часто уникального шрифта, должного представлять бренд или настроение сайта, мы переходим ко всё более стандартным шрифтам — да, разумеется, они надёжны, но не так красивы.
Font fallback существовал с самого возникновения CSS, потому что его создатели понимали, что никогда в истории на всех компьютерах не было одинакового набора шрифтов.
За исключением списка шрифтов, CSS font fallback не даёт веб-дизайнеру контроля над font fallback: никакой информации о том, какой шрифт был в конечном итоге выбран, никаких настроек размера, толщины или интервала между символами. Как ни грустно это говорить, но такого контроля нет и сегодня. Единственным значимым изменением стало добавление ещё нескольких общих слов для шрифтов UI, набравших популярность только за последний десяток лет (один из примеров — system-ui, который имеет собственную кошмарную историю font fallback).
Но даже несмотря на то, что font fallback кажется старым и упрощённым, вас могут удивить два аспекта. Во-первых, он работает не на уровне шрифта, а на уровне символа. Во-вторых, то, что вы объявляете в CSS, является только небольшой частью font fallback.
Шрифты как трафареты
Работа на уровне символов означает, что браузер или операционная система проходит всю цепочку font fallback для каждой отдельной буквы, которую вы просите их вывести. Если в шрифте нет этого конкретного символа, то проверяется следующий шрифт в списке, и так далее.
Давайте возьмём тот же список, но немного упрощённый:
Версия Joanna на моём компьютере содержит 261 глиф, покрывая несколько близких алфавитов, но почти ничего больше в ней нет. У меня нет Helvetica Now, так что можно его пропустить. В традиционной Helvetica есть аж целых 2 252 глифа, которые покрывают символы кириллицы, грузинского и вьетнамского, плюс математические символы и символы валют. Но с Arial всё ещё лучше. Этот бастард Helvetica, над которым мы часто подсмеиваемся, содержит более 3 300 глифов, превосходя Helvetica в поддержке иврита, арабского и… псевдографики.
Если бы я попросил свой браузер вывести предложение на нескольких языках при помощи показанного выше списка font fallback, то оно бы отобразилось так:
Это предложение выглядит некрасиво и иллюстрирует часть проблем ограниченного контроля над font fallback. Немецкий никак не пострадал, несколько дополнительных букв с умляутами и экономность алфавита обеспечили его наличие даже в небольших шрифтах. Однако русский в Helvetica и иврит в Arial выглядят чужеродно, слишком крупными и жирными, а польский справляется ещё хуже, обращаясь к Helvetica только за одной из четырёх своих букв.
Однако если сравнивать с приведёнными выше примерами, то предложение хотя бы читаемо. Прямоугольники, которые проектировщики шрифтов часто ласково называют «тофу» (а все остальные обзывают их непечатно), теперь нигде не проявляются.
Если бы у нас был полный контроль над текстом, то мы могли бы выбирать каждый отдельный символ и назначать для его обслуживания конкретный шрифт, благодаря чему всё выглядело бы безупречно. Но нам не приходится этого делать. А во вселенной веба, где текст может прийти откуда угодно и в любой момент, мы бы и не хотели заниматься подобным.
Переключение между двумя шрифтами, для каждого из которых в качестве fallback font выбрана Helvetica
Тщательная настройка списка font fallback шрифтами наподобие Helvetica и Arial или другими популярными шрифтами, оснащёнными тысячами глифов — отличный способ не только сохранить стиль, но и обеспечить покрытие глифами. Мне иногда помогает то, что я представляю шрифты как трафареты — каждый из них готов поймать столько букв, сколько сможет, но все они содержат множество отверстий. Цепочка font fallback позволяет следующему шрифту ловить буквы, оставшиеся от предыдущего, и так далее:
Но тут присутствует и ещё одна неожиданность, которую вы уже могли заметить. Ни один из шрифтов, перечисленных мной в поддержке font fallback, не поддерживает язык малаялам. Как ни один и не содержит эмодзи. Так как же и то, и другое всё-таки рендерится в виде значимых глифов, а не в виде тофу?
Оказывается, что когда вы заканчиваете свой список font fallback, ваш браузер или операционная система втихомолку добавляет вам в помощь ещё более десятка шрифтов, в том числе некоторые шрифты, созданные специально для этой цели.
Бескрайнее море символов
Если Arial с его 3 300 символами показался вам впечатляющим, то как насчёт масштаба всего Unicode? Современная редакции повсеместно принятого стандарта, определяющего способ кодирования каждого символа цифровой связи, содержит более 140 000 символов. В завтрашней их будет ещё больше.
Это впечатляющее число по сравнению с системами первых компьютеров, которые с трудом могли справиться с 63, 127 или, если повезёт, с 255 символами. Но это выглядит логично, если считать, что Unicode должен покрывать 150 различных видов письма (от вездесущей латыни до загадочных письмен наподобие древнепермского — адаптации кириллицы 14-го века, пользоваться которым прекратили 400 лет назад) и десятки тысяч символов (среди них сотни стрелок, математических символов, костяшек домино, алхимических знаков и египетских иероглифов, а также их современная реинкарнация — эмодзи).
Для дизайнера шрифтов задача отрисовки 140 тысяч глифов была бы жестокой, выматывающей, невыносимой. И даже если бы кто-то решился на это, то получившийся файл шрифта оказался бы таким огромным, что его невозможно было бы загрузить.
Но если ни один шрифт не содержит всех символов, то для веб-дизайнера альтернатива становится ужасающей. Представьте, каково было бы подбирать шрифты для Википедии — нам бы пришлось искать разные шрифты для различных частей Unicode, запоминать, что делает каждый из них, время от времени обновлять их, поддерживать огромную цепочку font fallback, и так далее.
Чтобы всего этого не пришлось делать вам, это берут на себя операционная система и браузер. Они реализуют это, создавая очередь из множества шрифтов, заставляя их отлавливать все символы, не поддерживаемые вашей цепочкой font fallback.
Вот пример — список из четырёх шрифтов на моём Mac скрытно расширяется примерно до такого:
Для Windows ситуация похожая:
Многие из этих шрифтов отвечают за покрытие определённой локали — допустим, NotoSansMyanmar и Myanmar Text занимаются бирманским алфавитом, а у других есть более специфические задачи. Apple Symbols поможет вам разобраться со всем от шрифта Брайля и нотной записи до древних символов из прошлого Apple:
Примеры глифов из Apple Symbols
С другой стороны, Segoe UI Historic содержит почти 5 000 глифов по-настоящему древних письмен — клинописи, иероглифов и рукописных, наподобие парфянского, которые исчезли задолго до появления бумаги:
Примеры глифов из Segoe UI Historic
Существуют и шрифты, отвечающие за все эмодзи — AppleColorEmoji на Mac и Segoe UI Emoji на Windows, уникальные среди остальных шрифтов тем, что имеют цвета.
И хотя я только что сказал, что создание шрифта для покрытия всего Unicode будет выматывающей и невозможной задачей, некоторые дизайнеры шрифтов оказались достаточно смелыми, чтобы с ней справиться. Где-то среди представленного выше тайного списка font fallback встречаются и монументальные шрифты с десятками тысяч глифов по много мегабайтов каждый — шрифты наподобие Arial Unicode, Unifont, Code2000 или Noto (сокращение от «no tofu»). Их предназначение — быть последним необходимым трафаретом и улавливать как можно больше оставшихся символов.
Количество глифов в шрифтах
Эти шрифты — последние истинные шрифты, к которым выполняются запросы, самая большая страховочная сетка на дне font fallback:
Должен признать, что представленные выше два списка немного упрощены. Некоторые шрифты появляются в них только для определённого языка, а другие fallback-шрифты используются только в парах, чтобы, например, fallback-замена для шрифта без засечек тоже выглядела как шрифт без засечек. В определённых обстоятельствах некоторые шрифты даже незаметно выдают себя за другие. (Например, в некоторых дистрибутивах Linux шрифт под названием Liberation Sans притворяется Arial и втихомолку занимает его место!)
Но в основном принцип остаётся одинаковым, поэтому мы не будем вдаваться в подробности, чтобы вас не утомить.
Два font fallback, сидящих на дереве рендеринга
Это наконец-то объясняет, что именно произошло, когда мы в последний раз попросили браузер подобрать шрифты для предложения — когда все указанные шрифты сдались, на помощь пришли два потайных шрифта:
«The English word turtle translates to Schildkröte in German, żółw in Polish, черепаха in Russian, צָב in Hebrew, and ആമ in Malayalam».
Другими словами, мы покинули территорию тофу:
Такой двойной font fallback существует для миллиардов повседневных случаев, когда отсутствует только несколько символов, но ничто не мешает вам набирать небольшие шедевры — предложения растянувшиеся на миллионы лет и тысячи километров:
[Прим. пер.: на этом моменте статьи выяснилось, что редактор статей Хабра при сохранении обрывает текст на непонятных ему символах, в частности, на иероглифах и эмодзи. Ниже я попытался исправить ситуацию, вставляя эмодзи картинками, а математические обозначения через разметку LaTeX.]
Вы не просто можете это прочитать. Вы можете скопировать и вставить этот текст в текстовый редактор или на веб-сайт без CSS… и даже если вы вообще ничего не знаете о типографике, втайне от вас на помощь придут шесть разных шрифтов.
Разумеется, совместно трудящиеся в показанном выше предложении семь шрифтов по-прежнему остаются шрифтами. У всех них есть своя предыстория, их параметры визуально могут казаться разными (стоит помнить, что размер шрифта — это больше идея, чем строгий критерий), а если один из них окажется выше остальных, то браузеры увеличат высоту всей строки, чтобы он поместился. Это объясняет, почему при вставке эмодзи в текст строки иногда разъезжаются — эмодзи не поддерживается основным шрифтом, поэтому он откатывается к шрифту наподобие Apple Color Emoji, а этот шрифт имеет слегка большую высоту, чем используемый вами.
Даже полностью пустой символ, например, узкий пробел, может опустить базовую строку, если он приводит к откату к другому шрифту
Но за исключением этих проблем всё работает, и работает на удивление хорошо. Настолько хорошо, что мы стали безрассудно смелыми при работе с текстом.
Хаки и омоглифы
Неудивительно, что среди 140 000 символов можно ожидать частичную визуальную повторяемость. Языки и письмена эволюционировали хаотичным образом, сходились и расходились без планирования, заимствовали друг у друга и противоречили друг другу.
Даже в английском люди путают O (oh) с 0 (нулём). Кроме того, часть кириллицы выглядит в точности как латиница, а часть латиницы может притворяться греческим. Вы можете написать сообщение «ОΟO» (out-of-office, «нет на месте») творчески, как это только что сделал я — одну букву на латинице, одну — на греческом, и ещё одну на кириллице, и часто никто их не разберёт. Сам по себе круг является столь универсальной формой, что его многократное появление в Unicode неудивительно: в виде ◯, и ○, и ◌, и ⥁, и многих других символов — как можно догадаться, есть и другие подобные простые формы. В типографике, как это часто бывает, у такого есть специальное название: похожие друг на друга глифы называются омоглифами.
Более того, Unicode также использует набор стилизованных алфавитов латиницы. Многие пришли из математики, где разные формы букв имеют разное применение: названия операторов, константы, углы, преобразования, тензоры. Их отдельное включение в Unicode имеет смысл с точки зрения семантики — в конечном итоге, математическая переменная a отличается от вектора a, а множество не стоит путать с матрицей A. Но решение об их включении в шрифт имело свои последствия. Из-за всех этих специальных алфавитов кажется, что сам Unicode содержит шрифты.
Примеры разных алфавитов математики, служащие разным целям
Одно из благословений и проклятий типографики заключается в том, что самим символам не позволяется иметь своё мнение о том, как их нужно использовать. Поэтому омоглифы часто используются с вредоносными намерениями, а бывает, что и творчески. Далёкий от математики я могу взять несколько символов, которые должны представлять математические множества, и написать просто потому, что это выглядит круче, чем Marcin. Аналогично, я могу написать
, не зная ничего о теории чисел,
, не намереваясь возводить в степень, или
, если мне так захочется.
Это ведь ещё и очень легко. Тот факт, что многие буквы выглядят похоже, используется на веб-сайтах наподобие Unicode Text Converter, которые позволяют быстро «стилизовать» текст, находя символы Unicode, выглядящие идентичными или похожими на нужные вам буквы.
Пример слова Figma, выраженного в разных «стилях»
Это довольно креативный визуальный набор, похожий на использование древней буквы ᴥ для создания медвежьего носа в ʕ •ᴥ•ʔ или символа японской катаканы ツ в знаменитом эмотиконе ¯\_(ツ)_/¯.
Подобные виды типографических хаков кажутся особенно полезными на сайтах типа Twitter или Facebook, не позволяющих менять шрифты, или даже применять жирное или курсивное начертание в том шрифте, который они дают пользователю:
Но у каждого хака есть своя цена. Весь текст, который вы видите на компьютере, предназначен не только для человеческих глаз. «Перестилизованный» текст может казаться похожим, но его настоящее значение может сильно отличаться. часто бывает невозможно найти с помощью поиска, это слово становится препятствием для людей, использующих программы чтения экрана (они объявляют каждую букву как «математическую букву M», «математическую букву a», и так далее) и… да, вы уже поняли, что мы движемся к этому: подобные стилизации подвержены превратностям font fallback.
Дело не только в том, что популярные шрифты не содержат математических символов или специализированных алфавитов. Буквы некоторых из показанных выше «стилей» прыгают между разными частями Unicode. И поэтому большинство из них откатывается к каким-то шрифтам глубоко внутри системы, а поскольку font fallback так сильно различается на разных платформах, мы никак не сможем точно узнать, как всё будет выглядеть на другой стороне. Вот пример:
Текстовые «стили», отрендеренные в macOS и в Windows
Как типографист, я оплакиваю подобную ситуацию, а как заботящийся о доступности информации, я бы рекомендовал не использовать специальные «шрифты» вне рамок математики. Но как и в случае со словом turtle или иероглифами, есть нечто прекрасное в совместных усилиях пяти шрифтов, благодаря которым вы можете видеть простой эмотикон переворачивания стола — это сочетание нескольких символов отрисовки прямоугольников, двух индийских символов, одной древней буквы латиницы, одного символа из японского и одних китайских скобок:
Это также объясняет и то, что если бы вам позволялось менять шрифт, в подобных ситуациях это бы ничего особо не меняло. Поскольку многие из символов берутся из fallback-шрифтов, расположенных ниже по невидимой цепочке, мы можем контролировать только несколько букв «на поверхности»:
Большинство людей, принимающих участие в подобной типографической гимнастике, даже не понимает, что так происходит, и что их конструкции могут у кого-то другого выглядеть сильно иначе. А на некоторых компьютерах, особенно на старых, с менее продвинутым font fallback, один из странных символов будет откатываться вниз, пока больше не сможет спускаться — и несмотря на общие пожелания, несмотря на все невидимые страховочные сетки, несмотря на совместные усилия шрифтовиков, работающих над шрифтами наподобие Arial Unicode и Noto, он превратится в зловещий прямоугольник.
Последняя надежда последней надежды
Что произойдёт, если вы запросите нечто, чего нельзя отобразить? Например, символ, о владении которым не заявляет ни один шрифт? Или глиф, который ваш телефон никогда раньше не видел? После всего того, что мы увидели, вас не должно удивлять, что ответом будет «это зависит от многого».
Когда символ пролетает сквозь все трафареты и падает на дно, некоторые платформы решают не отрисовывать ничего. (Этот путь выбрал наш сайт Figma. Кстати, он откатывается только к шрифтам Noto. Он делает это вне зависимости от платформы, на которой используется — принцип тот же, что мы использовали для высоты строк, и по той же причине.) Другие платформы доходят от первого шрифта, который вы запросили, вплоть до тофу-символа .notdef.
Но существуют и другие способы. Некоторые ресурсы обрабатывают сбои fallback самостоятельно и полностью независимо от шрифтов. Firefox на мобильных телефонах отрисовывает серый прямоугольник, а его настольный аналог отрисовывает прямоугольник… с кодом Unicode внутри — отлично для нердов, но, вероятно, напряжно для всех остальных:
(Если вам любопытно, то ваш браузер отрисует это так: .)
Это единый отсутствующий символ, чтоб всеми править, хорошо сбалансированный вопросительный знак внутри скруглённого прямоугольника. Благодаря тому, что он последний в цепочке, этот символ будет показываться вместо каждого отсутствующего, вне зависимости от необходимого вам шрифта, игнорируя пожелания .notdef его дизайнера.
Обеспечение постоянства внешнего вида тофу — это очень в стиле Apple, но этот способ показывает нам и ещё одну возможность. Если нас интересует контроль за font fallback, существует по крайней мере один простой способ: всегда можно поместить ловящий все символы шрифт в самый конец цепочки fallback. Такие шрифты, как можно догадаться, называются fallback fonts, и их существует несколько: Adobe NotDef (отрисовывает неизменяемый тофу), Adobe Blank (ничего не отрисовывает) и предыдущая версия Last Resort, которая пытается действительно помочь вам, показывая по крайней мере ту область Unicode, откуда взят символ.
Fallback fonts похожи на автобус, подбирающий самых медленных марафонцев, когда улицу снова нужно открыть для дорожного движения — на этом этапе вопрос уже скорее не в завершении забега, а в предотвращении катастрофы:
Убийство символов
Вселенная типографики имеет и собственные катастрофы, и это переносит нас к ещё одному символу, который вы можете узнать. Он имеет скучное название — Replacement Character, и выглядит так: �. Он приходит на сцену, когда ситуация становится ужасной. Он не связан с font fallback, но ради полноты объяснения нужно рассказать и о нём.
Replacement Character чаще всего используется для того, чтобы сообщить вам, что с данными что-то не то, что в самих числах нет смысла. Если в числах нет смысла, то нет и смысла сохранять их, поэтому символ � отличается от .notdef тем, что имеет собственный код Unicode: увидев его, вы можете копировать и вставлять этот символ.
Забавно, что сам � следует обычным правилам fallback, и хотя он не столь обязателен, как .notdef, некоторые дизайнеры шрифтов добавляют и его. Это означает, что некоторые шрифты могут сообщить вам, что понятия не имеют, что делать с вашим запросом, двумя способами: ответив .notdef, если вы запрашиваете что-то, чего они не могут предоставить, и �, если вы спрашиваете так, что они не понимают.
Также это может значить, что в разных условиях � способен выглядеть слегка по-разному, хотя и дикой креативности, развернувшейся с .notdef, здесь и близко нет:
Символы Replacement Character из разных шрифтов, воспроизведённые с одинаковым размером шрифта
Подробно об эмодзи
Да, в каком-то смысле эмодзи очень просты. Нет ни разных письмен, ни различных языков, ни жирного, ни курсивного начертания. Все эмодзи в вашем компьютере обычно обслуживаются одним большим шрифтом.
Однако эмодзи уникальны по крайней мере в двух аспектах. Во-первых, они меняются, и часто. Похоже, что каждый год появляется около сотни новых эмодзи и несколько обновлений уже существующих. На момент написания статьи выпуск последней версии, Emoji 13.0, был объявлен в начале 2020 года. Сама она содержала 117 новых эмодзи. А сейчас уже формируется Emoji 13.1 с такими претендентами на попадание в стандарт, как «сердце в огне» и «лицо в облаках». А ещё мы уже знаем, что о выпуске Emoji 14.0 будет объявлено примерно через год. Для типографики, привычной к таким единицам измерения, как тысячелетие, эмодзи развиваются с беспрецедентной скоростью.
Как и любой другой глиф, эмодзи следует правилам font fallback. Как мы видели выше, платформы втайне добавляют в цепочку шрифт эмодзи. И вы даже можете представить установку различных шрифтов эмодзи на компьютер, а также выполнение этого традиционным способом:
Гипотетическая цепочка fallback эмодзи, отдающая приоритет старым файлам эмодзи (Noto Sans Emoji) с меньшим покрытием эмодзи, создаёт странное явление отката к другому, более новому набору эмодзи (Joy Pixels)
На практике мы не наблюдаем этого часто потому, что шрифты эмодзи, являющиеся разноцветными, а иногда даже растровыми, тяжелее, чем даже Arial Unicode и Code 2000, и иногда используют странные новые форматы шрифтов. (Шрифт эмодзи Apple на моём компьютере весит более 200 мегабайт, почти столько же, сколько несколько тысяч типичных западноевропейских шрифтов.)
Что ещё важнее: шрифт эмодзи в вашей операционной системе обычно является самым новым, поэтому откат к более старому шрифту не имеет особого смысла. Но головокружительная скорость развития эмодзи означает, что за ней не успевают даже операционные системы. Сегодня вы можете отправить мне текстовое сообщение с ниндзя (), пикапом (
) и мухой (
). Это было бы очень странное текстовое сообщение… но судить об этом я смог бы на своём телефоне, потому что мой компьютер пока не способен рендерить эти три эмодзи версии 13.0.
Если шрифту эмодзи в цепочке fallback не удаётся отловить новое эмодзи, то это часто означает, что ни один другой шрифт тоже не сможет его обработать, и эмодзи отрендерится как вопросительный знак или тофу.
Однако такого не происходит. Это ещё один странный аспект эмодзи: всё большее их количество становится составным, возникающим как несколько отдельных символов, склеенных невидимыми символами под названием zero-width joiners. Что такое новое эмодзи с чёрной кошкой? Это символ кошки, склеенный с символом большого чёрного квадрата. Что такое белый медведь? Медведь плюс эмодзи снежинки. Женщина в смокинге — это человек в смокинге, за которым идёт модификатор женского рода. (Но не стоит ожидать в этом последовательности: женщина-пожарный — это эмодзи женщины + эмодзи пожарного автомобиля.) А что такое два держащихся за руки мужчины, один чёрный, другой европеоид? Внутри эта эмодзи состоит из пяти символов: мужчины, символа тёмного оттенка кожи, рукопожатия, ещё одного мужчины и светлого оттенка кожи; кроме них есть ещё два невидимых соединителя.
На новом компьютере, содержащем все необходимые глифы эмодзи и рецепты по их сборке, такие эмодзи выглядят идеально. А на других? Вместо тофу вы можете увидеть отдельные части составных эмодзи, которые для кого-то будут полезны (увидев мужчину в смокинге и рядом с ним символ женского рода, можно представить значение эмодзи), а кого-то будут сбивать с толку:
Различные эмодзи, отрендеренные на компьютерах в разное время
Но даже несмотря на полезность, эта система (разумеется!) всё равно будет несогласованной: любое новое несоставное эмодзи откатится к прямоугольнику .notdef или вопросительному знаку последней надежды.
Per aspera ad astra
Есть исторический символ, который я очень люблю. Это двоюродный брат @ — символа «коммерческого at», получивший в Интернете новую жизнь. Однако его история более трагична.
Мой любимый символ, называемый «per» когда-то был полной противоположностью @: можно купить 5 яблок @ 10 центов за яблоко или заплатить 10 центов ⅌ яблоко. ⅌ был гораздо более общим, а значит, потенциально более полезным, чем его более конкретные родственники: процент (%) и промилле (‰). И, по крайней мере, на мой взгляд, он был более красивым, чем амперсанд (&).
Но @ повезло, а ⅌ — нет. В конце 19-го века только малое число производителей новомодных пищущих машинок решило поддерживать этот символ. Некоторые люди, расстроенные этой ситуацией, брались за перо:
Символ Per, напечатанный на пишущей машинке Hammond и вписанный от руки
Но другие производители совершенно прекратили поддерживать этот символ.
Сегодня сложно понять наверняка, ускорили ли пищущие машинки закат ⅌, или этот символ в любом случае угасал. Тем не менее, я восхищаюсь людьми, державшимися за него и вписывавшими его от руки, точно так же, как я восхищаюсь теми, кто делает нечто подобное сегодня, когда их подводят шрифты; по сути, они реализуют собственный font fallback:
Пара примеров font fallback в реальной жизни: бордюрная типографика в Сан-Франциско и номер дома
Однако Интернет не оставляет шансов людям с карандашом. Текст движется слишком быстро и путешествует слишком далеко, а шрифты меняются слишком часто, чтобы можно было сохранять старые правила набора.
Невидимый щит font fallback приходит на помощь в подобных ситуациях, однако он имеет странные побочные эффекты — прямоугольники тофу, разобранные на части эмодзи, странные шрифты в Twitter, неприятный сдвиг шрифтов, вопросительные знаки в неожиданных местах. Надеюсь, загадки, с которых мы начинали, теперь кажутся вам менее загадочными.
И на пути исследований у вас есть помощники. Даже если вы не видите символ, всегда можно скопировать и вставить его в поисковой движок. Превосходный веб-инструмент под названием FontDrop! позволяет перетаскивать шрифт и просматривать все его глифы (в том числе и .notdef). А среди браузеров вам решил протянуть руку помощи Chrome — если вы ожидаете элемент, то можете увидеть, не только какие шрифты должны прийти на помощь в CSS, но и какие шрифты конкретно проделали всю работу:
Панель Chrome для предложения с шестью дополнительными fallback font, которые мы видели выше
Как всегда в случае с font fallback, мы можем ожидать получения результата с другой стороны. Но при отправке текста нам в основном приходится только надеяться. И когда я пишу эту статью, то понятия не имею, отобразится ли на вашем компьютере эмодзи или символ ⅌ во всём своём великолепии 21-го или 19-го века, или они отрендерятся как тофу, или как один из трёх разных вопросительных знаков, или не отобразятся вовсе.
Возможно, вы сообщите мне об этом в комментариях. Но, по крайней мере, я буду знать, что на моём компьютере только один из сотен установленных мной шрифтов содержит один глиф, необходимый для отображения ⅌, и, аналогично, только один, знающий, как рендерить ниндзя. Мне не нужно знать, какие это шрифты. Всё просто работает. Как не должен я этого знать в случае любого из 140 тысяч других символов, которые я могу напечатать на своём компьютере.
То, что это возможно, то, что мне всегда может прийти на помощь легион шрифтов, кажется небольшим чудом. А то, что иногда кто-то может всё равно увидеть тофу, красивый вопросительный знак или отдельный модификатор оттенка кожи — всего лишь небольшая цена за такое удобство.
как узнать какие шрифты использует программа
Как найти нужный шрифт, не зная его названия?
Я уверен, что у любого дизайнера был такой момент, когда он видел где-то какой-то шрифт, который так мог бы пригодится в проекте, но… что за шрифт. Ответ на этот вопрос затаился в глубине Вашего сознания, либо в глубине Вашего «незнания» (что разумеется простительно).
В этой статье мы рассмотрим несколько ресурсов, которые могут помочь вам в идентификации понравившегося шрифта.
Конечно, нельзя рассчитывать, что эти источники дадут вам 100 процентную уверенность в том что вы найдете нужный шрифт, но что помогут, так это точно.
What The Font?!
Graphic Design Blog полезный ресурс, но может помочь лишь в том случае, если вы знаете имя дизайнера или студию, создавшего шрифт. Список студий и дизайнеров весьма обширный и поиск шрифта в разы упрощается. Но, что делать, если вы видите шрифт в первый раз?
What The Font — известный ресурс, который поможет найти шрифт по загруженной картинке.
Могу сказать, что получаются довольно-таки неожиданные результаты.
Шаг 1: Загрузите картинку. Если картинка с фоновым шумом или с недостаточным контрастом, будь добры потратить несколько минут в Photoshop, что бы довести картинку до ума.
Шаг 2: После загрузки картинки, проверьте, что What The Font правильно определил глифы, и лишь после этого жмите «поиск».
Вкратце, ГЛИФ — это графический образ знака. Один знак может соответствовать нескольким глифам; строчная «а», капительная «а» и альтернативный вариант строчной «а» с росчерком являются одним и тем же знаком, но в то же время это три разных глифа (графемы).
С другой стороны, один глиф также может соответствовать комбинации нескольких знаков, например лигатура «ffi», являясь единой графемой, соответствует последовательности трех знаков: f, f и i. Т.о. для программы проверки орфографии слово suffix будет состоять из 6 знаков, а графический процессор выдаст на экран 4 глифа.
Сначала я загрузил эту картинку:
В результатах поиска, What The Font мне выдал 24 варианта. К чести What The Font могу сказать, что некоторые шрифты из списка были похожи на Adobe Garamond Pro.
Но я загрузил маленькую картинку.
Увеличив размер картинки (максимум 360 на 275 пикселей), список резко сократился:
Minion Regular Small Caps & Oldstyle Figures
Minion Regular
Adobe Garamond
Где, как вы видите, нашелся и правильный шрифт (хотя не совсем точно, между Adobe Garamond и Adobe Garamond Pro, все-таки разница, хоть и небольшая, но есть), если бы я увеличил размер картинки еще больше, то идентификация прошла бы успешно, но мне уже было лень проверять.
Если же What The Font не смог определить шрифт, то Вам в помощь его форум, местожительство шрифтовых гурманов, где вам обязательно помогут с поиском.
Typophile
Отличное сообщество, огромное количество ресурсов, блогов, новостей связных с типографской культурой. Есть даже typography Wiki.
Да, у Typophile нет автоматического идентификатора шрифтов, но зато имеющееся сообщество поможет Вам гораздо лучше, чем какая-то программа.
FontShop
Еще один отличный сайт по типографике. Одно название говорит, само за себя. Обширный контент, блог, часто обновляемые новости и обзоры.
Подход Fontshop в определении шрифта оригинален: сначала вы определяете общую форму шрифта, затем по нарастающей, вы отвечаете на все более сложные вопросы.
Это сервис хорош, не только как инструмент, который помогает идентифицировать шрифт, но и как отличное подспорье для поиска подходящих для вашего проекта шрифта.
Identifont
Это сайт, дает новый поход к поиску с относительным результатом. Identifont задает вопросы, по типу «Имеют ли буквы серифы?» или «Какой формы серифы?»
После этого, Identifont постарается дать ответ на основе заданных вопросов.
Да, конечно, определить неизвестный шрифт нелегко. Никто наверняка не знает, сколько шрифтов было создано за всю историю типографики. Как бы то ни было, он точно есть среди сотни тысяч шрифтов.
Процесс поиска нужного шрифта нельзя назвать бесполезным. Во время поиска, Вы найдете массу интересного не только по какому-то определенному шрифту, но в целом по его собратьям.
Хотя, это уже философия, так как это правило можно применить к любому делу.
Удачного поиска!
Как определить шрифт по картинке?
Задавайте, а мы ответим на него в блоге.
Если вам понравился шрифт на сайте или баннере, его можно найти и использовать. Популярные Arial или Times New Roman угадать можно, например, по отсутствию или присутствию засечек. Более редкие и незнакомые надписи можно распознать онлайн: по картинке или скриншоту. Рассказываю, как это сделать.
Идеального инструмента, чтобы определить шрифт по картинке онлайн, не существует. Но кое-какие хитрости все же есть. Я протестировала онлайн-сервисы для распознавания и свела результаты их работы в таблицу. В любом из них схожи требования к загружаемым изображениям:
Если все условия соблюдены, сервис выдаст похожий шрифт и даже предложит варианты для бесплатного использования.
Чтобы определить шрифт, подготовьте исходное изображение: сохраните картинку или скриншот на компьютер. Дальше алгоритм работы всех сервисов похожий:
Теперь разберу 5 онлайн-сервисов, которые распознают шрифт онлайн.
WhatTheFont
Онлайн-платформа по распознаванию латинских букв по картинке. Также есть база для подбора, которая регулярно обновляется.
Язык сервиса. Английский.
Возможности. Скачать или купить шрифт.
Не требуется регистрация
Быстрый поиск по базе более 130 тыс., в том числе платным
Есть приложение для распознавания шрифта на смартфонах (можно просканировать с фотографии) и расширение для Chrome
Не распознает кириллицу
Найденные по скриншоту шрифты предлагает купить, даже если есть бесплатный аналог
Font Identifier
Англоязычный сервис работает с кириллицей и латиницей. Распознает шрифт по каждой букве, поэтому результаты сканирования глубокие. На сайте представлены также семейства, отсортированные по языку, тегам, категориям.
Язык сервиса. Английский.
Возможности. Скачать или купить шрифт здесь же или на сайте партнеров, отредактировать изображение.
Не требуется регистрация
Можно поделится результатами сканирования в соцсетях
Распознает шрифты на десяти языках, в том числе на русском, украинском, белорусском
В базе присутствуют платные и бесплатные варианты шрифтов
Много рекламы внутри платформы
Fontspring
Сервис включает множество шрифтов для коммерческого использования, но обычно внутри семейства можно найти 1-2 начертания, чтобы скачать бесплатно. Есть своя библиотека для поиска.
Язык сервиса. Английский.
Возможности. Купить шрифт, отредактировать изображение.
Не требуется регистрация
Есть редактор для обрезки и поворота загруженных изображений
Можно сканировать изображение по ссылке
Плохо работает с кириллицей
В основном представлен платными вариантами
IdentiFont
В отличие от других сервисов программа предлагает найти шрифт по наводящим вопросам, символу, имени дизайнера, части названия или по внешним признакам.
Язык сервиса. Английский.
Возможности. Поиск по символу, имени дизайнера, наводящим вопросам, по части названия и по внешним признакам.
Не требуется регистрация
Постоянно пополняется база
Можно найти шрифт по названию, дизайнеру или наводящим вопросам
Нельзя определить по картинке
Whatfontis
Сервис подойдет, чтобы найти максимально похожий к оригиналу шрифт, да ещё и бесплатный. Для этого присутствует фильтры поиска по цене.
Язык сервиса. Английский.
Возможности. Скачать или купить, отредактировать загруженное изображение.
Можно сохранить результат сканирования (понадобится регистрация)
Если изображение не подходит, платформа поможет отредактировать его онлайн
Можно искать похожие варианты по фильтру «только бесплатные»
Работает только с латиницей
Не более 10 символов на исходной картинке
Преимущества сервиса доступны только по подписке, например, поиск только бесплатных семейств по картинке
Как сервисы справились с тестовыми картинками
Латиница. Чтобы проверить возможности сервисов я взяла латинские шрифты Lobster и Permanent Marker на разных фонах.
WhatTheFont | Font Identifier | Fontspring | Whatfontis |
Lobster на белом фоне (латиница) | ⛔️ |
Определен неверно, предложил платные аналоги
Определен неверно, предложил бесплатные и платные аналоги
Верно распознал
Верно распознал
Определен неверно, предложил платные аналоги
Определен неверно, предложил бесплатные и платные аналоги
Верно распознал
Верно распознал
Определен неверно, предложил платные аналоги
Верно распознал
Определен неверно
Кирилица. Для проверки кириллицы взяла SportsWorld и Lobster на разных фонах.
WhatTheFont | Font Identifier | Fontspring | Whatfontis |
Lobster на белом фоне (кириллица) | ⛔️ |
Определен неверно, предложил бесплатные и платные аналоги
Определен неверно, предложил платные аналоги
Верно распознал
Определен неверно, предложил бесплатные и платные аналоги
Определен неверно, предложил платные аналоги
Верно распознал
Определен неверно, предложил платные аналоги
Определен неверно, предложил платные аналоги
Верно распознал
Определен неверно, предложил платные аналоги
Определен неверно, предложил платные аналоги
Верно распознал
Определен неверно, предложил платные аналоги
Верно распознал
Определен неверно, предложил платные аналоги
Определен неверно, предложил бесплатные и платные аналоги
Определен неверно, предложил бесплатные и платные аналоги
Онлайн-сервисы Font Identifier и Whatfontis подходят для частых поисков шрифтов по картинке, в том числе бесплатно. WhatTheFont идеален для определения платных шрифтов и их аналогов, а также неплохо работает с плохо считываемым текстом. Fontspring не определил верно ни один шрифт, зато предложил несколько похожих вариантов для скачивания и покупки. Кириллицу распознали Font Identifier и Whatfontis.
Почему шрифт может не распознаваться
Иногда сервис отказывается распознавать шрифт по картинке. Что в этом случае можно сделать:
Также можно поискать шрифт вручную на форумах или задать вопрос там же: форум MyFonts, группа Type&Typography в Facebook, форум Fontmassive, форум Ruldtp.
5 способов распознать шрифт с картинки
Екатерина Малахова, редактор-фрилансер, написала статью для блога Нетологии об инструментах для распознавания шрифтов.
Каждый дизайнер хоть раз сталкивался с необходимостью распознать незнакомый шрифт. Идеального способа для этого всё ещё не придумали, но кое-какие хитрости есть. Рассмотрим пять инструментов, которые могут помочь 🧐
WhatTheFont
Самый известный способ определить шрифт с фотографии или скриншота — приложение WhatTheFont. Для распознавания нужно загрузить картинку или указать её адрес, программа выдаст наиболее похожие варианты из тех, которые можно купить на MyFonts. Создатели WhatTheFont пишут, что подходящее изображение выглядит так:
Больше советов по подбору картинки можно прочитать в соответствующем разделе на сайте.
Попробуем найти шрифт Circe с этого снимка:
Как и другие онлайн-инструменты, WhatTheFont не распознает кириллицу. Поэтому выберем те буквы, которые в латинице и кириллице выглядят одинаково — в нашем случае это «М», «а», «р» и «е». Если приложение распознало букву неправильно, исправляем её в поле снизу.
В итоге программа сразу определила шрифт правильно. Если результаты далеки от нужного, стоит обратить внимание на теги справа — они помогут найти похожий вариант.
What Font is
Приложение What Font is использует тот же принцип, что и WhatTheFont. Загружаем картинку или адрес, отмечаем нужные буквы, и близкий вариант найден, хотя и не сразу:
При загрузке есть возможность уточнить, темнее ли фон изображения, чем сами буквы. Ещё можно задать фильтры для поиска: например, искать похожие варианты только среди бесплатных шрифтов.
Требования к картинке во многом совпадают с WhatTheFont, главное различие в максимальном количестве букв на картинке — здесь их может быть не больше 10. Если изображение не подходит, сайт предлагает отредактировать его онлайн.
FontDetect
Программа для Windows, которая ищет подходящие варианты среди имеющихся на компьютере шрифтов, из-за этого выбор может быть сильно ограничен. Умеет распознавать кириллицу. Чтобы начать поиск, загружаем картинку, выделяем область для распознавания и делаем ее более контрастной.