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

Содержание

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

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

Инструменты разнообразны и делятся на несколько категорий:

  • функциональные расширения браузера;
  • применение разметки, CSS;
  • локальные инструменты;
  • проверка.

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

Применение расширений

Для того чтобы определить формат написания на веб-странице, можно воспользоваться дополнениями WhatFont.

Они доступны для Chrome, Firefox, Safari. Для этого необходимо открыть каталог опций, найти соответствующий инструмент и установить его. Открыв программу, выделите ту часть текста, которая интересует, выбрать проверку. В окне появится вся информация о тексте. Font Family показывает, как узнать название шрифта на сайте. Также все демонстрируется в алфавитном порядке. Это самый быстрый и удобный способ, он выдает характеристики сразу же.

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

Похожий метод отвечает на вопрос о том, как узнать размер шрифта на сайте. Вам понадобится Font Size.

Ручная проверка с помощью CSS

Некоторые браузеры предоставляют возможность узнать шрифт на сайте вручную. Для этого необходимо выделить фрагмент, кликнуть правой кнопкой мыши, выбрать поле «Проверить» («Исследовать элемент»). Можно воспользоваться горячими клавишами Ctrl+Shift+I. В результате в правой части окна появляется поле с расписанными кодами и подробной информацией о создании сайта (режим разработчика). Здесь представлена история изменений и правок. Сведения, которые перечеркнуты линией, были использованы в предыдущей версии, но уже изменены. Нужно выбрать самую последнюю правку стиля, чтобы точно определить параметр.

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

Онлайн-инструменты

Indentifont — это сервис для определения стиля, подбора похожих шрифтов онлайн. Работает непосредственно на базе сайта. Эта функция может найти характеристики не только по заданному коду, но и по имени конструктора, издателя, сходству с другими видами написания. Ресурс используется графическими дизайнерами и редакторами страниц.

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

Как узнать шрифт на сайте online

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

Исходный код страницы

Самый простой способ – исследовать код страницы. Глубокие познания в HTML и CSS для выполнения этой задачи не понадобятся, нужно лишь найти свойства «font-family». Рассмотрим на примере Google Chrome:

Откройте страницу, на которой используется понравившийся шрифт. Щелкните правой кнопкой по тексту. Выберите пункт «Просмотреть код».

Справа появится консоль с инструментами разработчика. Найдите в ней пункт «font family».

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

Кстати, в других браузерах операция выполняется аналогично. Например, в Mozilla Firefox нужно щелкнуть по тексту правой кнопкой и выбрать пункт «Исследовать элемент».

Искомые данные отобразятся в окне справа, свойство называется также «

font family».

Сервисы и расширения

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

Зайдите на сайт fount.artequalswork.com. Там есть большая кнопка «Fount», которую нужно схватить и перетащить на панель закладок.

Важно! Чтобы отобразить панель закладок в Chrome, нажмите сочетание Ctrl+Shift+B.

Откройте страницу с понравившимся шрифтом. Нажмите на Fount на панели закладок. Курсор превратится в крестик. Наведите его на шрифт и щелкните левой кнопкой. Результат появится в правом верхнем углу.

В Mozilla Firefox, Opera и других браузерах Fount тоже работает без проблем. Если этот сервис вам не нравится, или вы не хотите пользоваться панелью закладок, то используйте одно из расширений для определения шрифта.

— Fontface Ninja для Safari и Chrome.

— Type Sample для Chrome.

— WhatFont для Chrome, Firefox, Яндекс.Браузера.

— Typ.io для Chrome.

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

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

Пишу без воды и по делу. Способов есть масса, но все их можно поделить на 3 основных

  • Через расширение для браузера
  • Через код страницы
  • При помощи сторонних сайтов

Два последних достаточно сложные и затратные по времени, поэтому их отправим в топку, а тут поговорим о расширениях.

Определить шрифт на сайте при помощи расширений

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

Fontface Ninja

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

Type Sample

Из фишек – возможность создать свою коллекцию шрифтов через свой же акк в твиттере. Занятно, при этом можно подглядеть коллекции других людей все через тот же акк твиттера. ИМХО – в рунете не имеет смысла, зато есть. Вторая фишка – возможность «поиграться со шрифтами» прямо на странице. Вот это уже круто.

WhatFont

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

Typ.io

Добавил для количества. Никогда им не пользовался, да и ты, скорее всего , не дочитал до этого места, а сразу установил Fontface Ninja. Полезно в Typ.io то, что у них на сайте есть статистика использованных шрифтов и еще масса приятностей.

PS В следующей статье расскажу, как определить  шрифт с картинки. Ставь лайк, если тебе интересна такая тема.

Как определить какой шрифт использован. Определить шрифт по картинке онлайн

Достаточно часто на всевозможных сервисах вопросов и ответов люди задают один и тот же вопрос: «Как определить шрифт по картинке ».

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


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

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

  • буквы не должны сливаться другом, иметь четкие контуры
  • буквы должны быть выровнены по горизонтальной линии
  • желательно, чтобы высота букв была около 100px

Чтобы определить шрифт по картинке, необходимо загрузить эту самую картинку на сервис либо указать её адрес в интернет. Оба эти действия производятся на главной странице WhatTheFont.

В качестве примера давайте определим шрифт в логотипе моего сайта MuzRelax.ru. Я то знаю, какой шрифт там использован, а вот посмотрим сможет ли сервис WhatTheFont корректно его идентифицировать.


Кстати, тем, кто еще не посещал этот сайт, крайне рекомендую сделать это – получите настоящее удовольствие).

Я сделал скриншот лого и загрузил картинку в таком виде:

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

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

На финальном этапе сервис выдаст список шрифтов, которые выглядит схоже с тем шрифтом, который есть на картинке. В моем случае было предложено 4 варианта, самый первый из которых (Georgia) и есть тот тип шрифта, который я использовал в логотипе сайта MuzRelax.ru. Отличный результат!

К сожалению, WhatTheFont имеет несколько недостатков:

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

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

P.S. Не забудьте оставьте эту статью у себя в закладках и порекомендовать своим друзьям).

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

Вам понадобится
  • Компьютер с подключением к сети Интернет.
Инструкция
  • Интернетизобилует большим количеством разнообразных полезных сервисов, один из которых WhatTheFont.

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

  • С выполнением поиска шрифта и его определения на странице сервиса разберется даже школьник, который хоть немного работал с компьютером. Вам необходимо сделать скриншот с изображения, на котором есть образец искомого шрифта. Для этого следует воспользоваться клавишей PrintScreen, которая, как правило, находится среди блока навигационных клавиш (чуть выше кнопок со стрелками). Обратите внимание, что на ноутбуках и нетбуках расположение этой клавиши иное.
  • Откройте любой графический редактор и вставьте изображение из буфера обмена. В качестве простейшего редактора возможно использовать MS Paint, который запускается из меню «Пуск» и раздела «Стандартных программ». В открытом окне редактора нажмите сочетание клавиш Ctrl + V, чтобы вставить продукт буфера обмена. Сохраните изображение в любой папке, например, на рабочем столе — для быстрого доступа.
  • Если вы знаете точный адрес изображения, изготовлением скриншотов заниматься не стоит. Чтобы его узнать и скопировать, необходимо нажать правую кнопку мыши на картинке и выбрать пункт «Скопировать адрес изображения» (для каждого браузера название этого пункта различно).
  • На странице сервиса нажмите кнопку Upload a file, чтобы загрузить изображение с жесткого диска, в вашем случае это картинка на рабочем столе. А скопированный адрес изображения необходимо вставить в пустое поле Or specify a URL. Затем нажмите кнопку Continue.
  • В следующем окне перед вами появится несколько загруженных вами изображений, в которых будут выделены разные буквы. Под каждым изображением есть пустое поле, в него нужно вставить выделенную на картинке букву. Нажмите кнопку Continue.
  • В итоговом окне вы получите список похожих шрифтов, из которых можно выбрать самостоятельно искомый шрифт.
  • Совет добавлен 29 апреля 2012 Совет 2: Как определить шрифт на сайте Точно подобранный шрифт способен подчеркнуть стиль сайта, придать ему уникальности, красиво разделить абзацы, основной текст, цитаты и второстепенную информацию. А также сделать сайт запоминающимся и подарить приятные эмоции посетителям.
    Инструкция
  • Наиболее точный способ определить шрифт сайта это посмотреть свойства CSS. Современные браузеры имеют специальные инструменты, значительно облегчающую эту задачу.
  • Чтобы посмотреть шрифт в браузере Firefox, кликните по интересующему вас блоку текста правой кнопкой мышки и нажмите «Исследовать элемент». Нажмите кнопку «Стиль», расположенную в правом нижнем углу окна и в появившемся окне кликните «Свойства». Введите в строку поиска по свойствам – «font». Браузер отобразит все настройки текста заданного элемента. Среди них будет «font-family», указывающее название нужного шрифта. Также в остальных свойствах вы сможете определить стиль и толщину текста.
  • Аналогичная функция в Chrome называется «Просмотр кода элемента». Кликнув по нему, раскройте список «Computed Style», расположенный в правой части вкладки «Elements». Найдите в нем свойство «font-family», чтобы узнать название шрифта.
  • В браузере Opera эта функция называется «Проинспектировать элемент». Выберите его, переключитесь на вкладку «Документы» и кликните вкладку «Стили», находящуюся в правой части окна. Введите в поле «Фильтр» — «font». Раскройте список «Рассчитанный стиль», среди перечисленных свойств будет название шрифта.
  • Вы также можете определить шрифт на сайте с помощью Microsoft Word. Он может копировать текст в документ с сохранением форматирования из практически любого источника.
  • Чтобы определить шрифт с помощью программы Word, вставьте в него содержимое буфера обмена с помощью правой кнопки мышки или комбинации клавиш «Ctrl+V», выбрав при вставке «Сохранять исходное форматирование». Вы также можете использовать комбинацию клавиш «Ctrl+Alt+V», указав в меню «Формат HTML».
  • Посмотрите на вкладке «Главная» отобразившийся шрифт. Этот способ легче, чем просмотр свойств CSS, но в некоторых случаях Word определяет шрифт неправильно. Будьте внимательны.
  • Как определить шрифт на сайте — версия для печати

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

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

    Fontface Ninja

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

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

    Расширение для идентификации шрифтов Fontface Ninja для Safari и Chrome вполне соответствует идее скрытного и эффективного наёмника. Работа с ним строится так: нажав на кнопку расширения, наведите курсор на интересующий шрифт — всплывающая подсказка будет содержать информацию о его названии, межстрочном интервале, размере. Если повезёт, тут же шрифт можно будет скачать.
    Весьма любопытной может оказаться функция Mask: она позволяет скрывать графическое содержимое страницы, оставляя лишь текстовые блоки.

    Type Sample

    Ещё одно полезное расширение, но только для пользователей Chrome. Остальные могут приобщиться к прекрасному по старинке — воспользовавшись услугами закладок.

    Принцип работы в данном случае аналогичен; особого внимания заслуживает, пожалуй, реализованная возможность «поиграться со шрифтами» в режиме реального времени. Всплывающая подсказка с информацией о гарнитуре — прошлый век, когда по нажатии на выделенный текстовый блок вы способны изменить размер шрифта, посмотреть на панграмму (англоязычную), ввести собственный пример текста и позволить себе иные вольности.

    Расширение и для Chrome, и для Firefox, и для Яндекс.Браузера. Компенсируется такая всеядность предельно простым функционалом: нажал на кнопку, включив режим определения шрифтов, навёл на нужный и узнал кое-что новое.

    Стоит отметить: WhatFont позволяет определить не только название, но при нажатии на текст также межстрочный интервал, начертание, размер, семейство, которому принадлежит шрифт, а также его текущий цветовой код.
    Кроме того, можно посмотреть, как шрифт выглядит на примере английского алфавита в целом и скачать — если к его разработке приложила руку сама Google.

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

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

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

    Некоторые сайты не заморачиваются с оформлением по многим причинам:

    • страница узкоспециализирована и не создана для привлечения новых посетителей;
    • сайт является первым у разработчика;
    • страница является временной версией основного ресурса и т.д.

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

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

    Онлайн сервисы для распознавания шрифта с картинки

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

    WhatTheFont

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

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

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


    Для того, чтобы изображение максимально точно распозналось сервисом, постарайтесь выполнить несколько важных рекомендаций:

    1. Текст на картинке должен размещаться исключительно горизонтально.
    2. Высота одной буквы должна составлять хотя бы 100 пикселей.
    3. Следите за тем, чтобы буквы на картинке не прикасались друг к другу. Это усложнит процесс поиска шрифта по изображению.
    4. Сайт имеет ограничение на количество знаков – не более 50.

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

    What font is

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



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

    В предыдущем приложении максимальное количество символов составляло 50 знаков. В What Font is количество букв сократилось до 10.

    Identifont

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

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


    Онлайн сервис Identifont отлично подходит тем, кто обладает дополнительной информацией о том или ином шрифте. Дело в том, что на сайте вам предлагается еще несколько вариантов поиска:

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

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


    Bowfin Printworks

    Как и все предыдущие варианты сервисов, сайт не работает с кирилличным текстом. Bowfin Printworks определяет шрифт по изображению, а не по перечню вопросов, как предыдущий сайт. Однако он ищет не по картинке, которую вы загрузили из своего компьютера. Здесь алгоритм работет несколько иначе. Сайт имеет в запасе множество шрифтов и предлагает вам выбрать параметры варианта, который вас устроит. Весь процесс поиска шрифта по картинке можно поделить на несколько этапов:

    1. Вы переходите на сайт — bowfinprintworks.com .
    2. Сервис предлагает вам несколько картинок с одинаковыми буквами, выполненными в разных стилях.
    3. Обращая внимание на мелкие детали (крючки, толщина и т.д.) вы выбираете наиболее подходящий вариант.

    Bowfin Printworks имеет обширную базу, однако работает не так быстро, как уже описанные выше сервисы.

    В то же время ресурс обладает некоторыми преимуществами:

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

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

    FontShop

    Принцип работы сервиса FontShop имеет много общего с описанным выше сервисом. Он также предлагает осуществить поиск шрифта по изображению на основе выбора наиболее характерных деталей букв. Все очень просто – сайт дает несколько характеристик символов:

    • ширина линий;
    • контраст букв;
    • вид угла знаков;
    • тип буквы (прямой или курсив).

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


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

    FontDetect

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

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

    1. Откройте программу и загрузите необходимое изображение из папки компьютера.

      Font Detected — загрузить изображение

    2. Далее необходимо выделить область вокруг текста (или по-другому – область распознавания). Именно с ней и будет работать программа.

    3. Выделенную область отмечаем более контрастным оттенком.
    4. По тем символам, которые распознает приложение, вам необходимо будет задать определенные буквы.
    5. Приложение предложит вам добавить новые папки для поиска. Сделайте это, если они вам необходимы.

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

    Приложения для распознавания шрифтов на телефоне

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

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

    WhatTheFont

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

    Программа подходит для скачивания владельцам телефонов на операционных системах iOS и Android .

    Важно отметить, что приложение находится в свободном доступе. То есть вам не придется тратить средства для скачивания программы. Установить ее вы можете из магазина соответствующей ОС.

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

    Как пользоваться приложением?

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

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

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

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

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

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

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

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

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

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

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

    Определить шрифт на картинке онлайн: пошаговая инструкция

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

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

    Улучшение качество картинки

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

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

    Сначала измените изображение из цветного в оттенки серого. Зайдите во вкладку Изображение и выберите пункт «В оттенки серого».

    Теперь увеличим контрастность. Перейдите по пути Изображение – Коррекция цветов. Переместите ползунок «Контрастность» вправо до упора.

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

    Используйте ластик (Произвольное стирание), чтобы сделать интервалы. Если шрифт мелкий можно увеличить картинку, так и толщину ластика.

    Когда все сделаете, сохраните улучшенную картинку. Перейдите в закладку Файл, выберите Сохранить как.

    Определение шрифтов

    Теперь загрузите сохраненное изображение в сервис, который может определить шрифт онлайн. Используем What Font is.

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

    Нажмите «Continue» и все готово. Отобразится список с приближенными вариантами. По этим образцам можно точно определить название.

    А как бы выглядели результаты без «переделки»? Очень плохо. WhatFontIs почти не определил буквы.

    Другие онлайн-сервисы

    Font Matcherator

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

    WhatTheFont

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

    Identifont

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

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

    Представленный набор сервисов должен помочь точно определить интересующий вас шрифт.

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

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

    Fontface Ninja

    Самым удобным инструментом считается расширение Fontface Ninja. Плагин доступен для браузеров Firefox, Chrome и Safari. После нажатия на иконку программы, достаточно навести на выбранный текст, чтобы получить информацию об указанном шрифте.

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

    WhatFont

    Доступен в виде кнопки на панели закладок или как расширение для Chrome или Safari. Плагин может определить не только названия шрифта, но и окраску, межстрочный интервал и принадлежность к онлайн хранилищу (typekit, google web fonts).

    Определить шрифт по картинке онлайн

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

    Однако решить эту задачу не всегда просто – особенно, при наличии большого количества похожих друг на друга вариантов.

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

    Cодержание:

    Специальные сервисы

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

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

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

    What font is

    Ресурс What font is позволяет опознать шрифты с картинки бесплатно и достаточно быстро, но работает только с латиницей.

    Попытка распознать кириллицу, скорее всего, будет неудачной.

    Порядок действий для пользователя ресурса следующий:

    • Открыть главную страницу сервиса.
    • Загрузить на сайт изображение, щёлкнув по форме с надписью Upload image containing the font или вставив ссылку на картинку в Сети.

    Рис. 1. Загрузка изображения на сервис What font is.

    • Нажать на «Find a font».
    • Выбрать, будет ли распознаваться изображение без изменений или при распознавании будет выполнено реверс цветов, а также установить определяемую область.

    Рис. 2. Выбор реверса цветов.

    • Выбрать дополнительные настройки изображения (яркость, контрастность и угол поворота), с помощью которых сервису будет проще распознать тип шрифта, и нажать на «Use image».

    Рис. 3. Настройки изображения.

    • Расставить буквы в соответствующих формах, увеличивая шанс на распознавание, и нажать Continue.

    Рис. 4. Расстановка букв.

    • Выбрать подходящий вариант из появившегося на экране списка.

    Рис. 5. Список подходящих шрифтов.

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

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

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

     Важно: Для работы с изображением оно должно иметь размер не больше 1,8 МБ и формат JPEG, GIF или PNG. Также рекомендуется распознавать только одну строку за раз – если шрифтов несколько, выделяется часть картинки. 

    WhatTheFont

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

    Благодаря стараниям сообщества My Fonts, ресурс получил огромную базу данных и является одним из самых удобных в использовании.

    Вероятность правильно определить шрифт при его использовании – самая высокая среди подобных сервисов.

    Действия пользователей должны быть следующие:

    • Открыть страницу и загрузить изображение с текстом.

    Рис. 6. Начало работы с сервисом – загрузка изображения.

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

    Рис. 7. Выбор области распознавания.

    • Получить результаты поиска, среди которых обычно легко обнаружить необходимую информацию – так, в указанном примере заметен шрифт Arial Black, который не определился на сайте What font is.

    Рис. 8. Результаты поиска.

     Важно: Для распознавания требуется выполнение определённых условий: размеры картинки должны быть в пределах 360 х 275 пикс., формат – PNG или JPG. Также рекомендуется, чтобы высота каждого символа была не меньше 100 пикселей. 

    Identifont

    Сервис Identifont позволяет добиться необходимого результата, ответив на целый ряд вопросов.

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

    Рис. 9. Вопросы, задаваемые сервисом.

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

    Bowfin Printworks

    На сайте Bowfin Printworks можно найти значительное количество данных, касающихся различных шрифтов, и идентифицировать тот, который находится на картинке.

    Работать с сервисом удобнее, чем с Identifont, но времени придётся потратить больше по сравнению с WhatTheFont.

    Рис. 10. Главная страница ресурса Bowfin.

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

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

    Однако, если речь идёт о кириллице, результаты поиска вряд ли будут положительными.

    TypeNavigator

    Ресурс TypeNavigator предлагает собственный подход к поиску шрифтов.

    Искать подходящий вариант можно по различным характеристикам символов – типу, ширине, контрасту, углам.

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

    Рис. 11. Варианты наборов символов, которые предлагает сайт TypeNavigator.

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

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

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

    к содержанию ↑

    Приложения для смартфонов

    Список способов найти подходящий шрифт в режиме онлайн включает приложение, выпущенное сообществом MyFonts для смартфонов на Android или iOS.

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

    А найденные шрифты можно приобрести в режиме онлайн на сайтах разработчиков.

    Рис. 12. Мобильное приложение для распознавания шрифтов в Google Play.

    Приложение предоставляет пользователю такое преимущество как определение шрифтов в режиме оффлайн.

    Хотя вероятность распознавания будет выше при подключении к Интернету.

     Однако, если доступа к Сети всё-таки нет, можно просто навести камеру смартфона на рекламный носитель или визитную карту, получив положительный результат через несколько секунд.  к содержанию ↑

    Расширения в браузере

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

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

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

    Рис. 13. Встраиваемое в браузер Google Chrome расширение Naptha.

    Расширение Naptha работает в браузере Chrome, но можно попытаться установить его и на другой веб-обозреватель.

    Среди других вариантов стоит отметить Fontface Ninja для Chrome, Firefox и Safari и Typesample для Хрома.

     Есть собственные плагины и у популярных ресурсов – например, разработчики ресурса WhatTheFont создали дополнение Whatfont Tool для Хрома и Сафари, а у IdentiFont есть расширение с таким же названием. 

    к содержанию ↑

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

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

    Для этого стоит обратиться на такие форумы или сообщества:

    • Type&Typography на Facebook;
    • форум сервиса MyFonts;
    • Typophile – одно из крупнейших сообществ по шрифтам, где можно задать вопросы, размещая картинку на их форуме.

    Рис. 14. Популярные темы на форуме сервиса Typophile, посвящённые распознаванию шрифтов.

    Получить информацию по шрифтам можно и на сообществах популярного ресурса Flickr – например, Typeface Identification или Fonts in Use.

    Первая группа посвящена распознаванию наборов символов.

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

    к содержанию ↑

    Выводы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Как определять шрифты в Интернете

    Вы когда-нибудь заходили на красивый веб-сайт и задавались вопросом, какой шрифт используется? Я знаю, что у нас есть!

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

    Теперь мы можем поиграть с еще большим количеством красивых шрифтов для Интернета.

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

    Теперь приступим к поиску и загрузке шрифта. Но подождите … Что это за название шрифта? Тьфу, облом.

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

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

    Как определять шрифты в Интернете

    1 | Как использовать WhatFont

    WhatFont — один из двух инструментов, которые мы использовали для идентификации шрифтов в Интернете. WhatFont очень удобен в использовании.

    Пошаговое руководство по использованию WhatFont:

    1. Перейдите на этот веб-сайт: https://www.chengyinliu.com/whatfont.html
    2. Добавьте его в закладки, добавьте расширение Google Chrome или добавьте расширение Safari (мы используем расширение Google Chrome)
    3. Перейдите на веб-сайт, на котором вы хотите узнать шрифт, и нажмите на расширение WhatFont
    4. Наведите указатель мыши на веб-страницу и начните обнаруживать используемые шрифты!
    Вы когда-нибудь задумывались, как определить шрифт на веб-сайте? Узнайте, как это сделать, прочитав это сообщение в блоге! Нажмите, чтобы твитнуть

    2 | Как использовать FFFFALLBACK

    FFFFALLBACK — еще один способ узнать, какой шрифт используется на веб-сайте.

    Пошаговое руководство по использованию FFFFALLBACK:

    1. Перейти на этот сайт: http://ffffallback.com/
    2. Перетащите закладку на панель инструментов браузера
    3. Перейдите на страницу, которую хотите идентифицировать
    4. Щелкните закладку FFFFALLBACK.
    5. Посмотрите, какой шрифт используется!

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

    3 | Как использовать WhatTheFont

    1. Перейти на этот сайт: https: // www.myfonts.com/WhatTheFont/
    2. Нажмите, чтобы загрузить изображение.
    3. WhatTheFont попытается выделить символы на изображениях. При необходимости внесите необходимые изменения.
    4. Затем он сопоставит изображение с возможными используемыми шрифтами!
    Ищете ресурсы, которые помогут вывести свой веб-сайт и бизнес на новый уровень?

    У нас есть 20+ БЕСПЛАТНЫХ руководств, контрольных списков и рабочих тетрадей в нашей Freebie Library, чтобы сделать ваш сайт лучше конвертируемым и развивать ваш бизнес.

    РАЗБЛОКИРОВАТЬ БИБЛИОТЕКУ БЕСПЛАТНО

    5 способов определить шрифты на веб-странице.

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


    1. Fontanello (Chrome + Firefox)

    Fontanello Chrome and Firefox Extension, на мой взгляд, это самый быстрый способ узнать, какой шрифт используется на веб-странице.Вы просто щелкаете правой кнопкой мыши по тексту, находите Fontanello в меню и видите семейство шрифтов и некоторые дополнительные атрибуты.

    2. WhatFont (Chrome и Safari)

    WhatFont Chrome and Safari Extension — мой любимый вариант, когда дело доходит до обнаружения шрифтов. Чтобы активировать инструмент, вы должны щелкнуть значок «Какой шрифт» в меню браузера. Теперь вы можете выбрать несколько частей текста, что позволяет на лучше визуализировать разбивки шрифтов по сравнению с Fontanello.

    3. Визуальный инспектор (хром)

    Расширение

    Visual Inspector для Chrome предлагает немного больше возможностей, чем два вышеупомянутых.Вы просто щелкаете значок «Визуальный инспектор» в меню Chrome, чтобы активировать инструмент, а затем переходите к разделу «Типографика» в раскрывающемся списке. Теперь вам представлены используемые семейства шрифтов с дополнительной разбивкой всей типографии на веб-странице.

    4. Старый добрый Проверка кода (все браузеры)

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

    Если вы используете Google Chrome , щелкните правой кнопкой мыши загадочный текст и выберите «Проверить».Появится DevTools, убедитесь, что вы находитесь на вкладке «Стили» и перейдите к атрибутам Font-Family, чтобы узнать больше о шрифтах.

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

    Если вы используете Safari , убедитесь, что меню «Разработчик» отображается, установив флажок в нижней части вкладки «Дополнительно» в настройках Safari. Теперь щелкните текст правой кнопкой мыши и выберите «Проверить элемент».Откройте боковую панель с подробностями, если она закрыта, и выберите вариант Стили — Вычисленные. Раздел font-family представит информацию о шрифте в атрибутах стиля.

    5. Раскрытие переименованных шрифтов (расширенный метод)

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

    Есть несколько способов сделать это, но я начну с записи текущего имени шрифта.Теперь откройте инструмент Inspector (я использую Google Chrome), перейдите на вкладку «Приложение», прокрутите до раздела «Фреймы» и откройте «Шрифты». Нам нужно сопоставить имя файла с именем шрифта, указанным ранее. Теперь откройте этот шрифт в новой вкладке, чтобы загрузить его. Наконец, мы перетаскиваем этот файл шрифта в удивительный What Can My Font Do? веб-сайт и бац, информация о шрифтах представлена ​​красиво.

    С большой любовью,
    Роб

    Твиттер: @robhope
    LinkedIn: @robhope
    Электронная почта: [электронная почта защищена]

    Как узнать, какие шрифты использует веб-сайт • WPShout

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

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

    Вот демонстрационное видео:

    А вот текстовое резюме:

    Как узнать, какие шрифты использует веб-сайт

    1. Откройте инспектор браузера.В Chrome или Firefox это можно сделать, щелкнув правой кнопкой мыши и выбрав «Проверить». Ctrl + Shift + I (Windows) или Cmd + Shift + I (Mac) также должны работать.
    2. Перейдите к элементу, шрифт которого вам интересен. Вы можете сделать это, либо нажав «Проверить» на самом элементе, либо перейдя к элементу в объектной модели документа (DOM) инспектора браузера, его карте связанных элементов HTML, составляющих сайт. (Обратите внимание на то, какие разделы страницы выделяются при перемещении по DOM.)
    3. Выбрав нужный элемент, перейдите на вкладку «Вычислено» в инспекторе и прокрутите вниз до атрибута font-family . Здесь указан шрифт элемента.

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

    Как узнать, какие шрифты используются в изображениях веб-сайта

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

    Для этого есть отличное веб-приложение, которое называется Font Squirrel Matcherator. Вы можете прочитать немного больше о Matcherator в нашей ссылке на него, но вот основы использования Matcherator для идентификации шрифтов в изображении:

    1. Загрузите изображение с сайта (щелкнув правой кнопкой мыши> «Сохранить изображение как ”Или другим способом) и загрузите его в интерфейс Matcherator.
    2. Используйте синюю рамку выбора, чтобы выбрать часть изображения, шрифт которого вы хотите проанализировать. (Вы должны увидеть, как программа начинает помещать маленькие «квадраты» вокруг вещей, которые она идентифицирует как символы шрифта.)
    3. Нажмите «Согласовать!»

    В результате вы получите шрифты, очень близко соответствующие выделенному тексту. Если вы подозреваете, что это не точное совпадение и , вы можете продолжить поиск в Google: например, если возвращенный результат был Adagio Slab, загуглите «Шрифты, похожие на Adagio Slab» и посмотрите, что получится.Подобные списки шрифтов на whatfontis.com кажутся особенно полезными.

    Спасибо, что прочитали, и поищите шрифты для веб-сайтов!

    Как проверить размер шрифта и его начертание на веб-сайте

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

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

    Проверка типа и размера шрифта на веб-сайте

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

    1. Щелкните правой кнопкой мыши страницу, которая вам нравится, и выберите Inspect Element (Firefox), Inspect (Chrome) или F12 Developer Tools (Edge).
    2. Выберите Inspector (Firefox) или Computed (Chrome) в новых нижних окнах и прокрутите вниз вправо, пока не дойдете до Font или font-size . Он должен показывать семейство шрифтов, конкретный используемый шрифт, его размер, цвет и все остальное, что определяет страница.

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

    Сторонние инструменты для определения типа и размера шрифта

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

    Firebug

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

    1. Просто установите надстройку, как обычно, выделите текст на странице, щелкните вкладку HTML в Firebug, а затем щелкните «Вычислено» справа. Затем Firebug должен выделить имя шрифта, семейство шрифтов, размер, вес и все, что вам нужно знать.

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

    WhatFont

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

    После обновления его даже сделали совместимым с соответствующими надстройками.

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

    Существует множество надстроек типа букмарклета, которые могут идентифицировать шрифты; WhatFont — лишь один из них. Вы пользуетесь одним? Эта статья убедила вас попробовать новую? Сообщите нам об этом ниже.

    Как я могу узнать, какие шрифты использует веб-сайт?

    Вариант 1. Используйте расширение для браузера (Easy)

    Расширения, такие как WhatFont (доступны для Chrome, Firefox и Safari), позволяют легко обнаруживать семейства шрифтов любого текста на веб-странице.Вам просто нужно установить расширение, активировать его на сайте и щелкнуть по элементу, который вы хотите проверить. Результаты отображаются в плавающем поле, всегда в выбранном вами контексте.


    Вариант 2. Вручную проверьте CSS с помощью инспекторов браузера (расширенный)

    Большинство веб-браузеров позволяют легко находить шрифты с помощью , щелкнув правой кнопкой мыши → «Проверить» или «Проверить элемент». Это также можно сделать, нажав F12 . Это покажет список стилей, прикрепленных к веб-сайту, который вы можете изучить, чтобы найти шрифты, используемые в любом элементе HTML.

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

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

    Наконец, еще один способ быстро проверить, какие шрифты используются глобально (но НЕ как и где) — это перейти в «Приложение → Фреймы → Шрифты» . Там вы найдете список всех ссылочных (несистемных) шрифтов.

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

    Как определить шрифты с веб-сайта

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

    Почему полезно видеть, какие шрифты использует веб-сайт?

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

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

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

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

    Как определить шрифты с веб-сайта

    Есть несколько способов определить шрифты на веб-сайте:

    1. Использование инструмента проверки
    2. с плагинами
      1. FFF Отмена
      2. Источник
      3. Фонтанелло
      4. Какой шрифт

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

    1) Определите шрифты с помощью инструмента проверки

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

    • Нажатие F12 или Ctrl + Shift + I в вашем браузере
    • Откройте меню браузера, щелкните правой кнопкой мыши и выберите Проверить
    • Открытие Developer Tool опций из меню браузера и переход к Web Developer

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

    Этот элемент будет выделен в инструменте инспектора, и вы увидите стили и макеты в полях рядом с инспектором.

    Затем щелкните вкладку Computed и прокрутите вниз, чтобы проверить поле Font-Family . В этом поле должен быть указан шрифт веб-сайта. Например, в этом примере используется шрифт Roboto или SF-Pro Display.

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

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

    2) Определить шрифты с помощью инструментов и плагинов

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

    2.1) FFFFallBack

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

    Чтобы использовать этот инструмент, вам необходимо открыть эту страницу. Затем нажмите кнопку FFFFALLBACK и перетащите на панель закладок, как показано ниже. Если панель закладок не отображается в вашем браузере, нажмите Ctrl + Shift + B , чтобы включить ее.

    Теперь откройте веб-сайт, на котором вы хотите определить шрифты, и щелкните Bookmarklet , который вы только что сохранили на панели закладок.Он должен показать семейство шрифтов и стиль веб-сайта в новом столбце, как показано ниже. Убедитесь, что вы выбрали Web Font как вариант вверху.

    2.2) Источник

    Fount похож на FFFFALLBACK, но также позволяет проверять шрифты определенных текстов. Таким образом, вы можете указать, для каких текстов вы хотите проверять шрифты.

    Чтобы использовать Fount, перейдите на этот сайт и сохраните Bookmarklet с его веб-сайта, перетащив его на вкладку «Закладки».

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

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

    2.3) Фонтанелло

    Если вы предпочитаете использовать расширения браузера, Fontanello — идеальный инструмент для идентификации шрифтов с любого веб-сайта.Просто установите расширение Fontanello в Chrome или Firefox и активируйте его.

    Чтобы идентифицировать шрифты на сайте, просто щелкните правой кнопкой мыши любой текст и выберите опцию Fontanello . Выпадающее меню покажет вам семейство шрифтов, а также его стиль и варианты.

    2.4) Какой шрифт

    Аналогичным образом можно использовать расширение WhatFont . Сначала установите расширение в Chrome или Firefox.Затем щелкните значок инструмента WhatFont на панели инструментов браузера и щелкните любой текст, чтобы проверить его шрифт. Хорошо то, что вы можете выбрать другой текст и посмотреть, какую типографику они используют одновременно.

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

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

    Как определить шрифты на изображении

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

    Что за шрифт

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

    Для этого перейдите на эту страницу и перетащите или загрузите изображение в инструмент (убедитесь, что оно в формате JPG или PNG.) Затем определите рамку обрезки для текста, и инструмент покажет вам правильный шрифт текста. Кроме того, WhatTheFont также предоставляет вам веб-сайты, на которых вы можете купить шрифты, и даже позволяет тестировать шрифты с вашим собственным текстом.

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

    Заключение

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

    В этом руководстве мы рассмотрели различные способы определения шрифтов на веб-сайте:

    • Использование инструмента проверки браузера
    • Использование инструментов букмарклета
    • Через расширения браузера
    • Использование специальных онлайн-инструментов для определения шрифтов на изображениях

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

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

    Вы открыли для себя новые шрифты? Какой метод вы использовали? Дайте нам знать в комментариях ниже!

    Как определять шрифты в Интернете »XO PIXEL

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

    1. Adobe Fonts

    Adobe Fonts — такой замечательный ресурс. Вы можете не только использовать шрифты в связанных приложениях, таких как Illustrator и XD, но также можете использовать шрифты Adobe на своих веб-сайтах. Еще один замечательный инструмент, который мне очень пригодился, — это визуальный поиск шрифтов. Это очень полезно, если у вас есть изображение с шрифтом, который вы хотите использовать.Просто перетащите изображение или снимок экрана шрифта, который вы хотите найти, и Adobe Fonts мгновенно отсканирует фотографию и подберет шрифт.

    2. Веб-инспектор

    Как веб-разработчик я прекрасно понимаю, что нельзя принимать то, что видишь на веб-сайте, за чистую монету. Один из моих любимых способов изучить понравившийся мне веб-сайт — использовать веб-инспектор. Таким образом, я действительно могу видеть код и другие ресурсы веб-сайта. Вы также можете использовать веб-инспектор, чтобы узнать, какой шрифт используется на любой веб-странице.Просто выделите текст, нажмите «Проверить в Chrome» и на вкладке «Стили» вы увидите, какой именно шрифт используется. В качестве альтернативы, в Firefox щелкните правой кнопкой мыши и выберите «Проверить элемент», а на правой панели просто выберите вкладку шрифтов, чтобы увидеть текущий используемый шрифт, а также все шрифты на странице.

    Оставить комментарий

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *