5 Онлайн сервисов распознования неизвестных шрифтов. Как узнать какой шрифт на сайте


Как определить, какой шрифт установлен на сайте

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

Наиболее простая – взгляните на исходный код той страницы, которая «приглянулась». Безусловно, для нахождения нужного кода среди множества других, нужно хоть немного разбираться в HTML-кодах.

Предлагаю воспользоваться редактором текстов Microsoft Word пакета Office. Для этого сохраните конкретную веб-страницу, чтобы открыть ее потом в редакторе. Шрифт определится таким, каким он есть в оригинале.

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

В арсенале помощников имеются плагины под различные браузеры, определяющие шрифт на открытых интернет-страницах. Для браузера Google Chrome – это плагин Csscan, а под Mozilla FireFox – Firebug. Все, что нужно, так это скачать необходимый плагин для своего браузера.

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

Кстати, подборку шрифтов могут обеспечить сайты Identifont, ITC Fonts и Fonts.com. Это целая система целенаправленного подбора шрифтов онлайн, Единственный минус таких ресурсов состоит в том, что они англоязычные. Однако, если поднапрячься, то можно разобраться во всем.

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

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

Вышеперечисленные основные способы позволяют идентифицировать практически любой шрифт на веб-сайте.

great-world.ru

Как узнать, какой шрифт на сайте?

Как узнать и определить, какой шрифт на сайте?

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

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

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

Наконец, я нашла сервис, который настолько легко и быстро помогает определить шрифт, что невольно задаешься вопросом: как же все это время я о нем ничего не знала?

Знакомьтесь со своим будущим помощником — сервис “Fount”!

какой шрифт на сайте

Чтобы вы могли использовать его в любой момент времени, нажимайте на “Fount” левой кнопкой мыши, и перетаскивайте на панель браузера. Видите на моей панели браузера белую иконку с надписью “Fount”? Точно так же он будет выглядеть и у вас, если ваш браузер — Google Chrome. В других браузерах, таких, как Safari, Google Chrome, Mozilla Firefox, Internet Explorer, начиная с 8-й версии и выше, этот сервис работает по такому же принципу. А вот владельцам браузеров Opera, Internet Explorer 7 и некоторых других, придется поискать какой-либо другой вариант.

Пошаговые действия

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

Fount - шрифт на сайте

Нажимаем в браузере на иконку Fount, под мышкой появляется крестик, и нажимаем мышкой на участок текста, шрифт которого хотим определить. Посмотрите, в правом верхнем углу, появилась табличка с названием шрифта «PT Serif». Вот таким легким способом, мы можем определить, какой шрифт на сайте нашего коллеги. А также, можно увидеть размер 17  пикселей, степень насыщенности и стиль.

Тренируемся здесь же!

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

Копилка эффективных советов
В этой же рубрике:
Я согласен на обработку моих персональных данных в соответствии с Пользовательским соглашением

kopilkasovetov.com

Как определить какой шрифт используется на сайте или картинке

Искать название незнакомого шрифта, сравнивая его визуально с другими шрифтами это всё равно, что искать иголку в стоге сена. Но этого делать и не нужно, потому что для этих целей есть специальные инструменты. Впрочем, все зависит от того, где вы нашли интересующий вас шрифт. Если на сайте, то идентифицировать его не составит особого труда, так этот шрифт у вас уже есть в папке Fonts. Ну а как иначе? Смотрите сами. Для оформления веб-страниц сегодня используется специальный язык CSS. Так вот, в нём имеется такое свойство как font-family, оно и отвечает за гарнитуру шрифта, только вот сам шрифт при открытии страницы подгружается не с сервера, а с папки Fonts на вашем компьютере.

Если соответствующего значению font-family шрифта в ней не окажется, на его место браузером будет подставлен шрифт по умолчанию. Теперь о том, как узнать его название. Сделать это можно несколькими способами. Например, сохранить веб-страницу как HTML-файл (полностью), после чего открыть его в Word, выделить мышкой текст и в соответствующем поле посмотреть название используемого шрифта.

Открыть его в Word

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

Свойство font-family

Способ явно неудобный, к тому же он требует базового знания HTML и CSS. Поэтому лучше не морочить себе голову, а для определения шрифтов использовать специальные расширения. Для Chrome, к примеру, есть очень даже неплохое расширение Csscan, способное определить не только гарнитуру, но и размер, цвет, ширину отступов, высоту и другие свойства.

Csscan

Typ.io Peek — ещё один плагин для хрома, только более простой. В нижней части странички он создает кнопку, при нажатии на которую отображаются все используемые шрифты. Имеются аналогичные инструменты для Mozilla FireFox, например Firebug. Для этих целей также можно порекомендовать онлайн-сервис WhatFont Tool.

Typ.io Peek

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

WhatTheFont

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

WhatTheFont

Кстати, результаты могут быть самыми неожиданными.

WhatTheFont

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

WhatTheFont

Точность идентификации во многом зависит от качества самой картинки. Маленькие, с высоким уровнем шума или недостаточным контрастом изображения могут потребовать предварительной оптимизации в Adobe Photoshop или другом редакторе. Ну, вот на этом пока и все. Что касается формата PDF, который, как известно, использует встроенные шрифты, то с ним можно поступить так же, как и с изображением.

Сайт сервиса WhatTheFont: http://www.myfonts.com

www.white-windows.ru

2 способа определить шрифт на сайте

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

Первый способ – с помощью специального инструмента

Инструмент: http://fount.artequalswork.com

На сайте есть такая кнопка “Fount”, её нужно перетащить в закладки браузера

добавляем fount в закладки

После чего, заходим на любой сайт с неизвестным шрифтом, например пусть будет это Яндекс, нажимаем на добавленную закладку “Fount”

закладка fount

и выделяем текст

определяем шрифт

В правом верхнем углу браузера появится “облачко” с информацией о шрифте

детали шрифта

Таким образом, можно быстро узнать информацию по любому шрифту на любом сайте. Название, размер, стиль.

Второй способ – через исходный код (css)

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

Копируем название заметки

Открываем исходный код страницы (кликом правой кнопки мыши)

Открываем исходный код

На странице с кодом вызываем поиск (комбинация клавиш CTRL + F)

поиск

Вставляем (CTRL + V) в поисковое поле название заметки

вставляем и ищем текст

Находим

код

Видим, что заголовок заметки помещен в теги <h2> и </h2> То бишь размер, цвет, шрифт заголовков задаются через тег h2 стили которого скорее всего прописаны в css таблице. Значит и ключ к разгадке шрифта лежит в css таблице :)

Как правило, таблица со стилями подключается в самом начале страницы

подключение таблицы стилей

В исходном коде, нажимаем на ссылку которая ведет на таблицу со стилями.

На странице со стилями, снова вызываем поиск (CTRL + F) и забиваем в него h2

поиск тега h2

Находим тег h2 и просматриваем его стиль

Open Sans

А вот и шрифт, называется ‘Open Sans’, размер 25пх.

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

С уважением, Игорь Дулин

Cервис моментального приема платежей и партнерских программ Glopart.ru Понравился пост? Поделись с друзьями!

Метки записи

igordulin.com

Узнать шрифт на сайте

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

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

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

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

   Можно поступить проще. Есть такой сервис, называется он Whatfont. Чтобы им воспользоваться, нужно перетащить кнопку в закладки используемого вами браузера. А когда вас заинтересует тот или иной шрифт, просто щелкаем на этой вкладке, и наводим курсор на шрифт. В виде подсказки вам выведется краткая информация по данному шрифту. А если щелкнуть правой кнопкой, то можно получить и развернутую информацию. Рекомендую!

   Также есть несколько популярных плагинов под различные браузеры, которые помогают определить шрифт на открытой интернет-странице. Под популярный браузер от «Корпорации Добра» Google Chrome этот плагин называется Csscan. Мод Mozilla FireFox – Firebug. Если вы пользуетесь одним из этих браузеров, скачайте данные плагины, и ваше любопытство касательно шрифтов будет удовлетворено в полной мере.

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

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

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

  Теперь переходим к десктопному софту или утилитам.

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

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

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

thelocalhost.ru

5 Онлайн сервисов распознования неизвестных шрифтов.

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

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

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

1. What font is

Это бесплатный сайт, который дает вам возможность проще всего определить, какой шрифт используется на странице. Когда вы находитесь на сайте, на котором вам понравился тот или иной шрифт, просто сделайте скриншот страницы таким образом, чтобы на изображении был текст. Однако скриншот по размеру не должен превышть 1.8мб, и достаточно, чтобы на нем была всего одна строка текста. Формат изображения должен быть jpeg/jpg, gif или png. Далее скриншот загружается на Identify Fonts, и сайт отображает вам результат. Вы можете установить фильтр на отображение только бесплатных шрифтов, только платных шрифтов, либо и тех и тех. Перейти на What font is.

2. Identifont

Identifont задаст вам несколько простых вопросов для того, чтобы определить, какой шрифт вы ищете. На вопросы невероятно просто ответить, а представляют они нечто вроде «Какой тип хвостика должен быть у Q?». Вам будут предоставлены различные диаграммы, чтобы вы могли выбрать ответ. Если будет предложен только набор символов нужного вам шрифта, то вопросы могут быть конкретно касающиеся символов. Перейти на Identifont.

3. WhatTheFont

WhatTheFont распознает шрифты по тому же принципу что и IdentifyFont. Мы можем загрузить изображение в формате GIF, JPEG, TIFF или BMP, и в нем должно быть не более 25 символов. Так как символы сканируются вебсайтом, нам нужно будет подтвердить правильные символы. Затем сайт анализирует каждый символ и находит шрифт. Перейти на WhatTheFont.

4. Font Trainer

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

5. TypeNavigator

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

Еще 3 дополнительных инструмента вы можете увидеть по ссылке —  как определить шрифт по картинке. Советуем тоже смотреть.

Алексей Повловский

web-profy.com

Какой шрифт на сайте? | Блог на ffont.ru

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

1. Fontface.ninja

Это приложение для Chrome, которое встраивается в ваш браузер и активируется одним нажатием при необходимости. После установки, вам нужно зайти на страницу сайта, шрифт которой вы хотите распознать – и кликнуть на иконку «ниндзи» в правом верхнем углу браузера. Теперь приложение активно, и при наведении курсора мыши на текст – он мгновенно выдает не только его название, но и размер кегля, кернинг, и межстрочное расстояние. Также есть полезная функция «убрать всё лишнее», после использования которой – приложение скроет все элементы страницы кроме текстов. Приложение абсолютно бесплатное и не требует регистрации. Всё что вам нужно сделать это перейти на официальный сайт fontface.ninja, выбрать название браузера который вы используете, ознакомиться и подтвердить настройки приложения:

2. Typ.io Peek 

Это тоже приложение для браузера, но оно работает немного иначе. После установки появляется буква «Т» в правом нижнем углу браузера. Приложение показывает сразу все шрифты, используемые на сайте, и обводит их соответствующим цветом. Это не всегда удобно. Часто нужно узнать один конкретный шрифт и нет необходимости в нагромождении информации. Установить Typ.io Peek можно напрямую из магазина Google Chrome (бесплатно).

3. Type Sample

Еще одно хорошее приложение, но оно доступно только для пользователей Chrome. Его отличием является возможность не только посмотреть все гарнитуры на сайте, но и сразу же их опробовать в специально отведенном окне. Также, при взаимодействии с Twitter можно создать свою собственную коллекцию шрифтов. Скачать Type Sample можно на официальном сайте. Эта программа является находкой для тех кому нужно узнать, какой шрифт используется на странице.

4. WhatFont

Самое универсальное приложение, которое подходит как для Chrome, так и для Firefox, и даже для Яндекс-Браузера. Этот инструмент выводит более чем исчерпывающий объем информации о шрифте, начиная с интервалов, заканчивая начертаниями и текущими цветовыми решениями. Вы сможете посмотреть гарнитуру в разных алфавитах, посмотреть используется ли в шрифте кириллица, и сможете даже скачать сам тут же, на месте, только если он есть в базе google fonts. Устанавливается в один клик, найти можно на официальном сайте. С этой программой вам не составит труда узнать, какой шрифт используется на сайте.

ffont.ru