Как определить шрифт по картинке и не только. Обзор лучших сервисов
Здесь мы собрали самые удобные сервисы и приложения для идентификации шрифтов. Сохраните эту статью себе в закладки и вы с легкостью сможете узнать название любого шрифта!
Дизайнеры часто сталкиваются с необходимостью узнать, каким шрифтом написан тот или иной текст. Перебор всей имеющейся коллекции шрифтов в поисках совпадения - далеко не самый удобный способ. Кроме того, нужного шрифта может просто не оказаться. Конечно, можно обратиться за помощью на тематические форумы, где другие дизайнеры смогут подсказать название шрифта. Только вот ждать ответа придется неделями. А если ждать некогда? Что же делать тогда?
На самом деле все просто. Воспользуйтесь этими ресурсами и вы сможете узнать название шрифта буквально за пару минут, а может даже быстрее!
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 самых популярных шрифтов? Испытайте себя. Результаты могут оказаться неожиданными!
Напишите нам, если вы знаете еще какие-то удобные сервисы или приложения для идентификации шрифтов. Будем рады вашим комментариям! И поделитесь ссылкой на эту статью с друзьями. Пусть их жизнь тоже станет чуточку проще 🙂
Предположим, вам понравился конкретный шрифт, но вы не знаете, как его идентифицировать. На самом деле, методик для определения шрифтов предостаточно.
Наиболее простая – взгляните на исходный код той страницы, которая «приглянулась». Безусловно, для нахождения нужного кода среди множества других, нужно хоть немного разбираться в HTML-кодах.
Предлагаю воспользоваться редактором текстов Microsoft Word пакета Office. Для этого сохраните конкретную веб-страницу, чтобы открыть ее потом в редакторе. Шрифт определится таким, каким он есть в оригинале.
Еще проще воспользоваться сервисом Whatfont . Для этого перетащите кнопку в закладки вашего браузера. Щелкните на вкладке того шрифта, который интересен, предварительно наведя курсор на нем. По каждому шрифту предусмотрена подсказка в виде краткой информации (при вызове контекстного меню можно получить более развернутую информацию).
В арсенале помощников имеются плагины под различные браузеры, определяющие шрифт на открытых интернет-страницах. Для браузера Google Chrome – это плагин Csscan , а под Mozilla FireFox – Firebug . Все, что нужно, так это скачать необходимый плагин для своего браузера.
Что делать, если нельзя запросто определить шрифт, например, с картинки? Выдернуть его оттуда весьма затруднительно, но можно. Существуют сервисы, позволяющие определять шрифты на логотипах и картинках. Например, такой сервис, как WhatTheFont дает возможность загружать изображения со шрифтом, а в результате обработки будет выведен шрифт, наиболее похожий на исходный с картинки. Точнее, – целый перечень шрифтов на выбор.
Кстати, подборку шрифтов могут обеспечить сайты Identifont, ITC Fonts и Fonts.com. Это целая система целенаправленного подбора шрифтов онлайн, Единственный минус таких ресурсов состоит в том, что они англоязычные. Однако, если поднапрячься, то можно разобраться во всем.
Приступим к утилитам (десктопному софту)… FontMatch является настольным приложением с функцией загрузки изображений и может выдавать наиболее подходящий шрифт, а в случае отсутствия требуемого, выводит любой другой. Постоянная работа с этой программой потребует от вас большой подборки шрифтов.
И, наконец, программка Kleptomania предоставляет возможность копирования текста из окна, которое, по умолчанию, не поддерживает этой функции. В качестве бонуса софта появляется возможность установления шрифта, которым написан текст. Главными достоинствами подобной программы считается скорость работы и отсутствие оплаты.
Вышеперечисленные основные способы позволяют идентифицировать практически любой шрифт на веб-сайте.
Мы рассказали об Интернет-ресурсах, способных превратить процесс распознавания если не в нечто занимательное, то по крайней мере в рядовую, но перспективную процедуру.
И хотя лучшее - враг хорошего, сегодня мы пойдём ещё дальше. Ведь кому нужны целые сайты, когда есть расширения для браузеров?
Fontface Ninja
Повальное увлечение азиатской, и в частности японской, культурой, охватившее западный мир в предыдущем столетии, едва ли могло не найти отражения и в сфере IT.
На примере отдельных веб-продуктов мы видим это в минимализме, граничащем со строгостью, в смещении акцентов с результата на процесс и, безусловно, в симпатии к внешней атрибутике. А особую привлекательность для разработчиков, по-видимому, представляет собой воинственный и загадочный символизм самураев и их негласных антагонистов - ниндзя.
Расширение для идентификации шрифтов Fontface Ninja для Safari и Chrome вполне соответствует идее скрытного и эффективного наёмника. Работа с ним строится так: нажав на кнопку расширения, наведите курсор на интересующий шрифт - всплывающая подсказка будет содержать информацию о его названии, межстрочном интервале, размере. Если повезёт, тут же шрифт можно будет скачать.
Весьма любопытной может оказаться функция Mask: она позволяет скрывать графическое содержимое страницы, оставляя лишь текстовые блоки.
Type Sample
Ещё одно полезное расширение, но только для пользователей Chrome. Остальные могут приобщиться к прекрасному по старинке - воспользовавшись услугами закладок.
Принцип работы в данном случае аналогичен; особого внимания заслуживает, пожалуй, реализованная возможность «поиграться со шрифтами» в режиме реального времени. Всплывающая подсказка с информацией о гарнитуре - прошлый век, когда по нажатии на выделенный текстовый блок вы способны изменить размер шрифта, посмотреть на панграмму (англоязычную), ввести собственный пример текста и позволить себе иные вольности.
Расширение и для Chrome, и для Firefox, и для Яндекс.Браузера. Компенсируется такая всеядность предельно простым функционалом: нажал на кнопку, включив режим определения шрифтов, навёл на нужный и узнал кое-что новое.
Стоит отметить: WhatFont позволяет определить не только название, но при нажатии на текст также межстрочный интервал, начертание, размер, семейство, которому принадлежит шрифт, а также его текущий цветовой код.
Кроме того, можно посмотреть, как шрифт выглядит на примере английского алфавита в целом и скачать - если к его разработке приложила руку сама Google.
Чем объяснить тот пиетет, который испытывают разработчики к пользователям Chrome, неизвестно, однако факт остаётся фактом: расширений для распознавания шрифта, поддерживаемых этим браузером, чуть больше.
Typ.io - идеальный вариант для максималистов, которые не приемлют лишних телодвижений. После установки расширения в нижнем углу браузера появится кнопка с букой «Т», нажатие на которую выводит названия всех идентифицированных на странице шрифтов в отдельном столбце. Чтобы узнать, где какой шрифт использовался, достаточно кликнуть на его название.
Лабораторная работа №6
Управление шрифтом и текстом с помощью таблиц стилей CSS
Цель работы: изучить основы управления шрифтом и текстом с помощью таблиц стилей CSS, освоить практические навыки по использованию свойств шрифта и текста на web-странице.
I. Управление шрифтом
Оформление – один из самых мощных способов донести идеи создателя сайта до посетителя. Правильно оформленный текст позволяет читателю наиболее быстро разобраться в содержании сайта.
Шрифт – неотъемлемая часть любого документа. Такие эффекты как курсив или полужирное начертание, позволяют дизайнерам выделить важные места в документе и обратить на них внимание посетителя.
На web-страницах с помощью CSS можно просто менять тип шрифта или придавать ему курсив или полужирное начертание, как в случае с HTML-тегами. Таблицы стилей позволяют задавать общий тип шрифта, устанавливать различную толщину букв, тип курсива и размер шрифта, используя стандартные обозначения, заимствованные из области книгопечатания.
Семейство шрифтов (font family) – это набор шрифтов с похожими характеристиками. В web существует пять основных типов шрифта (таблица 1).
Таблица 1
Типы шрифта
Тип шрифта | Пример | Характеристика шрифта |
serif | Times New Roman | На концах линий, составляющих буквы, есть маленькие черточки (засечки). Такое написание позволяет выделять отдельные буквы. Этот тип подходит для текста предназначенного для распечатки. На экране буквы будут не ясными, если размер шрифта маленький. |
sans-serif | Arial | Буквы данного шрифта не имеют засечек. И хотя символы sans-serif менее отчетливы, они больше подходят для текстов, отображаемых на экране и набранных шрифтом меньшего размера. |
monospace | Courier New | Все символы этого типа шрифта одинаковы по ширине. Например буква «i» занимает столько же места сколько и буква «m» по ширине. Этот шрифт подходит для текстов, в которых важна каждая буква, например для программных кодов. |
cursive | Monotype Corsiva | Имитирует письмо от руки, его лучше использовать для украшения текста или смысловых выделений. |
fantasy | Webdings (Webdings) | Лучше использовать в качестве украшений |
Определение типа шрифта
1. Введите название свойства и поставьте двоеточие:
2. Укажите название шрифта, который будете использовать:
3. Можно написать несколько типов шрифтов через запятую:
, “Times New Roman”, palatino
4. После последней запятой укажите семейство шрифтов, к которому относиться используемый шрифт:
Из всех перечисленных в списке шрифтов браузер выбирает первый. Если этот тип шрифта ему недоступен, браузер просматривает список далее до тех пор, пока не найдет шрифт, имеющийся на компьютере пользователя. Если не находит подходящего шрифта, используется шрифт, установленный в браузере посетителя по умолчанию. Если вы определите семейство шрифта, браузер найдет максимально похожий шрифт.
Названия шрифтов, состоящие из нескольких слов, нужно заключать в кавычки, например: “Times New Roman”
Пример 1
font-family: Georgia, "Times New Roman", Times, serif;
font-family: "Courier New", Courier, Monaco, monospace;
font-family: Arial, Helvetica, Geneva, sans-serif;
Введение
Инструментарий Microsoft и электронная коммерция
Быстрое развитие коммуникационных технологий....
Рис.1. Определение типов шрифта
Определение размера шрифта
Обычно шрифт устанавливается с помощью тега (например ………<.font>). Вероятно этот способ скоро выйдет из употребления, так как в последних версиях HTML, соответствующих стандартам, тег отсутствует, его рекомендуется заменять CSS.
Основные проблемы, возникающие при использовании тега , заключаются в следующем:
1. Этот тег нужно добавлять каждый раз, когда необходимо установить шрифт. Соответственно размер файла значительно увеличивается;
2. Менять свойства шрифта нужно в каждом теге, что очень не удобно.
CSS решает обе эти проблемы. Не добавляя дополнительных тегов, можно управлять видом текста, заключенного в тег, внося изменения лишь в одну строку документа.
В HTML есть семь различных размеров шрифта, но все они связаны с размером, установленным по умолчанию посетителем страницы. С помощью CSS можно изменять размер текста на экране несколькими способами, включая традиционное изменение размера в точках, проценты, абсолютный размер и даже размер, зависящий от окружающего текста.
Алгоритм:
1. Введите font-size и поставьте двоеточие:
2. Укажите размер шрифта одним из следующих способов:
В единицах длинны – измеряется в пунктах;
Используя абсолютное выражение, например xx-small, x-small, small, medium, large, x-large, xx-large;
Smaller и larger описывает размер по отношению к размеру родительского элемента;
В процентах, определяющих размер шрифта пропорционально размеру шрифта родительского элемента (например 75%).
Пиксели и пункты:
Аббревиатура pt обозначает пункт. Это один из способов указания размеров шрифта. Обычно используется шрифт 12pt, который удобен для большинства читателей. Лучше измерять шрифт в пикселях (px ).Пиксели не всегда надежны, но результат их использования более точен.
Между пикселями и пунктами не существует однозначного соответствия, но можно считать, что 12px примерно совпадает с 12pt.
Пример 2
font-size: 12px;
font-size: large;
Введение
Электронная коммерция является одним из самых модных течений практически во всех отраслях бизнеса. Она открывает новые возможности в любой сфере,
Инструментарий
Microsoft
и электронная коммерция
Рис.2. Установление размера шрифта
Курсив
Часто путают два типа стилей – курсив (italic) и наклонный (oblique). Курсивом называется более декоративный тип шрифта с наклоном вправо. Наклонный шрифт представляет собой обычный шрифт, без каких-либо стилизованных украшений, с небольшим наклоном (рис.3).
Рис.3. Курсивное и наклонное начертание
С помощью элемента font-style можно выделить текст курсивом, сделать шрифт наклонным или оставить его начертание обычным (normal).
Пример 3
font-style: italic;
font-family: Arial, Helvetica, serif;
font-style: italic;
Введение
Электронная коммерция- является одним …...
Инструментарий
и электронная коммерция
Рис.4. Использование курсива в тексте
В примере 3 класс booktitle и все абзацы в <blockquote > выделены курсивом. Заголовок использует шрифт serif , поэтому мы видим курсивный шрифт, блокнот использует шрифт sans-serif , который является наклонным, даже если вы его задаете как курсив.
Толщина шрифта
В стандартном HTML шрифт может быть либо полужирным, либо обычным. CSS позволяет установить несколько уровней «жирности» шрифта, используя способность многих шрифтов иметь разную толщину.
Пример 4
font-weight: bolder;
font-weight: normal;
Электронная коммерция
Является одним из самых … во всех отраслях бизнеса. Она открывает новые возможности …..
Инструментарий Microsoft и электронная коммерция
Рис.5.Определение толщины шрифта
В примере 4 создается класс bolder , который делает линии шрифта толще.
Создание Small caps
Small caps полезны для выделения заголовков. С помощью Small caps строчные буквы переводятся в заглавные, размер которых меньше, чем у обычных прописных букв (рис.6).
Рис.6. Все буквы заглавные, но первая – больше остальных
Пример 5
font-size: 24px;
font-family: "Times New Roman", Times, serif;
font-variant: small-caps;
Электронная коммерция
Является одним из самых модных течений практически во всех отраслях бизнеса. Она открывает новые возможности в любой сфере,
независимо от того, ориентируетесь ли вы на конечного покупателя или работаете с деловыми партнерами.
Рис.7. Применение small-caps
В примере 5 тег заголовка второго уровня отображает текст маленькими заглавными буквами (small-caps).
Существует множество различных размеров экранов. И нужно обеспечить легко читаемость текста на самых маленьких и самых больших экранах. Например, с помощью font size HTML .
Обеспечьте, чтобы размер шрифта подходил для любого устройства
Есть несколько способов сделать это:
- Установка адаптивной темы / шаблона;
- Использование адаптивного дизайна / медиа-запросов (CSS );
- Разработка разных версий сайта.
1. Приобретение адаптивной темы или шаблона
2. Использование медиа-запросов / адаптивного дизайна
Если у вас есть опыт работы с CSS , и вы не боитесь изучить, как управлять тем, чтобы текст легко читался на любых размерах экранов.
Как работает font-size
Style font size HTML объявляется в файле CSS . Если размер шрифта не объявлен, браузер будет использовать значение по умолчанию, которое обычно составляет 16px.
В коде CSS установка значения font-size выглядит следующим образом:
p{font-size:120%;}
Для размера шрифта можно использовать различные единицы измерения: пиксели (px ), пункты (pt ), em и проценты (% ).
Если речь идет о выборе шрифта и адаптивном дизайне, Google рекомендует следующее:
- Используйте базовый размер шрифта — 16 пикселей в CSS . Настраивайте другие размеры по мере необходимости с помощью свойств шрифта;
- Чтобы определить типографический масштаб, используйте размеры относительно базового;
- Для текста должно задаваться вертикальное пространство между символами. Общая рекомендация состоит в том, чтобы использовать высоту строки в 1.2 em , которая по умолчанию применяется браузерами;
- Используйте ограниченное количество шрифтов и типографских масштабов.
Используйте базовый размер шрифта CSS в 16 пикселей
В этой рекомендации говорится, что размер шрифта для страницы должен объявляться явным образом — 16 px . Это значит, что нужно использовать значение HTML CSS font size , которое устанавливает размер шрифта в 16 пикселей для всей станицы. Обычно это делается через элемент «body » или «html «.
Чтобы определить типографический масштаб, используйте размеры относительно базового размера
Теперь, когда у нас есть базовый размер шрифта для всей страницы, нужно задать другие размеры шрифтов, чтобы элементы H1 , H2 и т.д., отображались большим, чем базовый.
На приведенном выше изображении font size HTML для H1 объявлен как «250% «. Текст H1 будет в два с половиной раза крупнее, чем базовый в 16px . Это и есть «относительный размер «. Благодаря этому везде, где мы объявляем размер шрифта, он всегда будет устанавливаться в несколько раз больше, меньше или того же размера, что и базовый шрифта:
Это гарантирует, что независимо от того, на экране какого размера просматривается страница, соотношение размеров шрифтов всегда будет оставаться одинаковым. Например, размер шрифта H1 всегда будет два с половиной раза больше базового. Это также обеспечит разборчивость текста на мобильных или небольших экранах.
Для текста должно задаваться вертикальное пространство между символами, и, возможно, для каждого шрифта его нужно будет корректировать:
Еще одним важным аспектом читаемости шрифта является пространство между строками текста. В CSS это свойство называется «line-height «.
Google рекомендует использовать высоту строки 1.2 , которая по умолчанию используется в браузерах. Это означает, что расстояние между строками текста будет в 1,2 раза превышать style font size HTML .
Для этого нужно объявить высоту строки в CSS :
p{font-size:120%;line-height:1.2;}
Мы часто просматриваем веб-страницы на мониторе компьютера, и даже плотный текст с небольшими межстрочными интервалами на них может выглядеть хорошо. Проблемы возникают, когда этот же текст просматривается на меньшем экране, и его почти невозможно читать без увеличения.
Задав высоту строки (как минимум ) в 1,2 , мы способствуем тому, что текст будет легко читать даже на таких маленьких экранах.
Проблемы со списками ссылок
Чтобы решить эту проблему, попробуйте:
ul{line-height:200%;}
Увеличив высоту строки, мы гарантируем, что для ссылок в списке будет достаточно пространства. Вам нужно будет задать значение, подходящее для сайта, и изменить его на «200% «.
Используйте ограниченное количество шрифтов и типографских масштабов
Слишком много шрифтов и объявлений font size HTML может привести к тому, что макет страницы станет чрезмерно сложным. Такие старицы могут читаться на стационарном мониторе, но на небольшом экране они точно будут трудно читаемы. Помните, что «маленький » текст будет еще меньше при просмотре на мобильном устройстве.
Как сделать шрифт читаемым на любом устройстве
Размер текста управляется медиа-запросами, которые объявляются для различных размеров экранов. Можно сказать, что для мобильных устройств задается один размер текста, а для стационарных компьютеров — другой.
Рассмотрим пример медиа-запроса, с помощью которого задается размер шрифта.
html{font-size:100%;} @media(min-width:60em){html{font-size: 100%}}
У нас есть один и тот же размер шрифта, объявленный для больших и маленьких экранов. Размер шрифта составляет «100% «. Так как мы объявили базовый font size HTML в 16 пикселей, это означает, что он будет использоваться на стационарных ПК и на небольших мобильных устройствах. Этот размер всегда будет выглядеть аккуратно и легко читаться:
Этот шрифт будет вполне читаемым на всех типах устройств. Особенно, если следовать всем выше перечисленным рекомендациям.
Проблемы могут возникнуть, когда стили задаются таким образом, чтобы на стационарных устройствах шрифт был меньше. В этом случае на мобильных устройствах этот текст будет еще меньше:
В подобной ситуации нужно будет изменить медиа-запрос. В первом примере style font size HTML был одинаковым (100% ) для стационарных компьютеров и мобильных устройств.
Рассмотрим медиа-запрос, который будет задавать меньший, более плотный текст для ПК, но более читаемый для небольших экранов.
html{font-size:110%;} @media(min-width:60em){html{font-size: 90%}}
Этот код определяет, что текст должен иметь размер шрифта 90% от размера по умолчанию для стационарных компьютеров. Но на мобильных устройствах размер будет 110%:
Это означает, что текст будет легко читаемым на экранах разных размеров.