5 способов определения шрифтов на веб-странице
И так, вы делаете свое дело, просматривая веб-страницы, и наткнулись на понравившийся шрифт, но не можете его определить? Давайте определим шрифт вместе.
1. Фонтанелло (Chrome + Firefox)
На мой взгляд, Fontanello Chrome и Firefox Extension – это самый быстрый способ узнать, какой шрифт используется на веб-странице. Вы просто щелкаете правой кнопкой мыши по тексту, находите Fontanello в меню и видите, что есть семейство шрифтов и некоторые дополнительные атрибуты.
2. WhatFont (Chrome и Safari)
WhatFont Chrome и расширение Safari – мой любимый вариант, когда дело доходит до обнаружения шрифтов. Чтобы активировать инструмент, вы должны щелкнуть значок What Font в меню браузера. Теперь вы можете выбрать несколько частей текста, что позволяет лучше визуализировать разбивку шрифта по сравнению с Fontanello.
3. Визуальный инспектор (Chrome)
Visual Inspector Chrome Extension предлагает немного больше глубины, чем два предыдущих. Вы просто нажимаете значок Visual Inspector в меню Chrome, чтобы активировать инструмент, а затем переходите к разделу «Типография» в раскрывающемся списке. Теперь вам представлены семейства шрифтов, используемые с дополнительной разбивкой всей типографии на веб-странице.
4. Старый добрый код проверки (все браузеры)
Так что, если вы пытаетесь избежать установки десятков расширений браузера, мы можем узнать больше о шрифтах, используемых при проверке старого доброго кода:
5. Раскройте переименованные шрифты (продвинутый метод)
С препятствием, с которым мы можем столкнуться, является то, что когда семейство шрифтов не имеет четкого названия, естественно отбросить инструменты и методы проверки шрифтов. Мы начинаем миссию по спасению, фактически загружая шрифт.
Есть несколько способов сделать это, но я начну с обозначения текущего имени шрифта. Теперь откройте инструмент «Инспектор» (я использую Google Chrome), перейдите на вкладку «Приложение», прокрутите до раздела «Рамки» и откройте «Шрифты». Нам нужно сопоставить имя файла с именем шрифта, отмеченным ранее. Теперь откройте этот шрифт в новой вкладке, чтобы загрузить его. Наконец, мы перетаскиваем этот файл шрифта в классный What Can My Font Do? веб-сайт и bam, информация о шрифте представлена красиво.
Узнать шрифт на сайте
И я вас снова категорически приветствую, уважаемый читатель! Сейчас я хочу с вами поговорить о том, каким образом можно узнать шрифт на сайте. Зачем и кому это может понадобиться? Ну, допустим, вы готовите поздравительную открытку своей любимой девушке, посмотрели сайт онлайн-открыток, и вам очень понравилась одна, и надпись красивая, и сама открытка вроде тоже. А вот сам текст надписи ну совсем не подходит.
Еще можно воспользоваться текстовым редактором Microsoft Word из пакета Office. Сохраните интересующую вас веб-страничку, и откройте ее затем в данном редакторе. В большинстве случаев, шрифт вам покажет именно такой, какой и был в оригинале.
Также есть несколько популярных плагинов под различные браузеры, которые помогают определить шрифт на открытой интернет-странице. Под популярный браузер от «Корпорации Добра» Google Chrome этот плагин называется Csscan. Мод Mozilla FireFox – Firebug. Если вы пользуетесь одним из этих браузеров, скачайте данные плагины, и ваше любопытство касательно шрифтов будет удовлетворено в полной мере.
Но как же поступить, если шрифт, название которого вам требуется узнать, на картинке? Ведь выдрать его оттуда затруднительно. Но и тут отчаиваться не стоит. Есть несколько сервисов, которые помогут определить шрифты даже на логотипах и картинках.
В первую очередь, стоит упомянуть сервис WhatTheFont. Данный веб-интерфейс позволяет загрузить изображение со шрифтом или логотип, и в результате обработки выведет вам шрифт, который наиболее похож на тот, что присутствует на изображении, вернее – не один шрифт, а небольшой их перечень, чтобы вы могли подобрать среди них наиболее похожий.
Теперь переходим к десктопному софту или утилитам.
Программка Kleptomania – позволяет копировать текст из окон, которые этого по умолчанию не поддерживают, а бонусом в софтине идет возможность определения шрифта, которым написан текст. Из достоинств данной программы — очень быстро работает и к тому же бесплатная.
Вот основные способы, как узнать шрифт на сайте. Также читайте мою статью, о том как скачать сайт и смотреть его оффлайн 🙂
Кстати, это тоже интересно:
Как узнать шрифт на сайте
При создании индивидуального, интересного и красивого интернет-продукта используются разнообразные способы дизайна. Одной из основных особенностей является подбор практичного и подходящего по стилю шрифта. Для ознакомления с самыми популярными и распространенными видами не обязательно связываться с редактором или владельцем проекта. Можно воспользоваться одним из способов, как узнать шрифт на сайте.
Инструменты разнообразны и делятся на несколько категорий:
Каждый из методов подбора зависит от ресурсов пользователя и его целей. Перед тем как узнать, какой шрифт используется на сайте, изучите несколько простых правил.
Применение расширений
Для того чтобы определить формат написания на веб-странице, можно воспользоваться дополнениями WhatFont. Они доступны для Chrome, Firefox, Safari. Для этого необходимо открыть каталог опций, найти соответствующий инструмент и установить его. Открыв программу, выделите ту часть текста, которая интересует, выбрать проверку. В окне появится вся информация о тексте. Font Family показывает, как узнать название шрифта на сайте. Также все демонстрируется в алфавитном порядке. Это самый быстрый и удобный способ, он выдает характеристики сразу же.
Указанное приложение можно применять для получения сведений о тексте на рисунке. Необходимо выделить ссылку или перетащить изображение в поле поиска, потом подождать. Недостаток такого способа в том, что если качество картинки не очень хорошее для идентификации исходного шрифта, то манипуляция становится бессмысленной.
Похожий метод отвечает на вопрос о том, как узнать размер шрифта на сайте. Вам понадобится Font Size.
Ручная проверка с помощью CSS
Некоторые браузеры предоставляют возможность узнать шрифт на сайте вручную. Для этого необходимо выделить фрагмент, кликнуть правой кнопкой мыши, выбрать поле «Проверить» («Исследовать элемент»). Можно воспользоваться горячими клавишами Ctrl+Shift+I. В результате в правой части окна появляется поле с расписанными кодами и подробной информацией о создании сайта (режим разработчика). Здесь представлена история изменений и правок. Сведения, которые перечеркнуты линией, были использованы в предыдущей версии, но уже изменены. Нужно выбрать самую последнюю правку стиля, чтобы точно определить параметр.
Такая манипуляция требует навыков работы с HTML и понимания языка разметки. Этими способами, как узнать, какой шрифт на сайте, пользуются дизайнеры и тестировщики.
Онлайн-инструменты
Indentifont — это сервис для определения стиля, подбора похожих шрифтов онлайн. Работает непосредственно на базе сайта. Эта функция может найти характеристики не только по заданному коду, но и по имени конструктора, издателя, сходству с другими видами написания. Ресурс используется графическими дизайнерами и редакторами страниц.
Если функциональных навыков для выбора и определения шрифта недостаточно, обратитесь к услугам специалистов. Они точно понимают, как узнать шрифт текста на сайте. Существуют специальные инструменты для экспертной оценки и проверки текста. Команда дизайнеров и редакторов определит всю необходимую информацию о шрифте. Сотрудничая с профессионалами, вы избежите ошибок, которые часто совершают неопытные пользователи.
Как я могу узнать, какие шрифты использует сайт?
Как я могу узнать, какой шрифт или шрифты использует веб-сайт? Существуют ли какие-либо инструменты или расширения для браузера, которые могут облегчить работу?
Вариант 1: использовать расширение для браузера (Easy)
Такие расширения, как WhatFont (доступны для Chrome, Firefox и Safari), позволяют довольно легко обнаруживать семейства шрифтов любого текста на веб-странице. Вам просто нужно установить расширение, активировать его на сайте и нажать на элемент, который вы хотите проверить. Результаты отображаются во всплывающем окне, всегда в выбранном вами контексте.
Вариант 2. Проверка CSS с помощью инспекторов браузера (Дополнительно)
Использование инспектора не так просто, как использование расширения, но имеет ряд преимуществ. Требуется некоторое понимание CSS, так как вам обычно нужно пройти через несколько стилей, чтобы найти применяемый. Как правило, перечеркнутые стили перезаписываются, поэтому всегда ищите те, которые применяются последними.
Все стили на странице перечислены на вкладке « Стиль », но если вместо этого вы используете вкладку « Вычисленные », вы можете найти свойства, которые активно применяются к выбранному элементу, включая, конечно, семейство шрифтов.
Этот второй метод медленнее, но с помощью инспектора вы сможете лучше понять, как создается вся страница. Кроме того, многие дизайнеры и разработчики используют его в качестве инструмента для тестирования изменений перед тем, как записывать их в таблицу стилей (поскольку изменение строки CSS в инспекторе вызывает предварительный просмотр в браузере в реальном времени).
Как определить какой шрифт используется на сайте или картинке
И скать название незнакомого шрифта, сравнивая его визуально с другими шрифтами это всё равно, что искать иголку в стоге сена. Но этого делать и не нужно, потому что для этих целей есть специальные инструменты. Впрочем, все зависит от того, где вы нашли интересующий вас шрифт. Если на сайте, то идентифицировать его не составит особого труда, так этот шрифт у вас уже есть в папке Fonts. Ну а как иначе? Смотрите сами. Для оформления веб-страниц сегодня используется специальный язык CSS. Так вот, в нём имеется такое свойство как font-family, оно и отвечает за гарнитуру шрифта, только вот сам шрифт при открытии страницы подгружается не с сервера, а с папки Fonts на вашем компьютере.
Если соответствующего значению font-family шрифта в ней не окажется, на его место браузером будет подставлен шрифт по умолчанию. Теперь о том, как узнать его название. Сделать это можно несколькими способами. Например, сохранить веб-страницу как HTML-файл (полностью), после чего открыть его в Word, выделить мышкой текст и в соответствующем поле посмотреть название используемого шрифта.
А еще гарнитуру можно «вытащить» из исходного кода самой страницы. Для этого выделяем текст, кликаем правой клавишей мыши и в контекстном меню выбираем «Просмотр кода элемента» или что-то в этом роде, а затем в открывшемся окне инспектора (в правой его части) ищем свойство font-family.
Способ явно неудобный, к тому же он требует базового знания HTML и CSS. Поэтому лучше не морочить себе голову, а для определения шрифтов использовать специальные расширения. Для Chrome, к примеру, есть очень даже неплохое расширение Csscan, способное определить не только гарнитуру, но и размер, цвет, ширину отступов, высоту и другие свойства.
Typ.io Peek — ещё один плагин для хрома, только более простой. В нижней части странички он создает кнопку, при нажатии на которую отображаются все используемые шрифты. Имеются аналогичные инструменты для Mozilla FireFox, например Firebug. Для этих целей также можно порекомендовать онлайн-сервис WhatFont Tool.
Ну хорошо, как отыскать название гарнитуры на сайте мы уже знаем, а вот как быть, если шрифт представляет собой картинку? Вот тут всё немного сложнее. ABBYY FineReader вам здесь не поможет, исключение составляют те случаи, когда шрифт уже имеется на компьютере. Во всех остальных случаях на помощь придут специальные сервисы. Работают они примерно так же как FineReader, но при этом имеют собственную базу шрифтов, куда более обширную, чем та, которая наличествует на вашем компьютере.
Подобных сервисов очень много. Мы упомянем лишь один из них, остальные вы без труда сможете найти в Интернете. Называется он WhatTheFont. Распознавание картинки проходит в три этапа: загрузка изображения на сервер, разделение текста на глифы с подтверждением правильности распознания и вывод результата.
Кстати, результаты могут быть самыми неожиданными.
Как правило, сервис предлагает несколько вариантов, из которых окончательный выбрать нужно вам самим.
Точность идентификации во многом зависит от качества самой картинки. Маленькие, с высоким уровнем шума или недостаточным контрастом изображения могут потребовать предварительной оптимизации в Adobe Photoshop или другом редакторе. Ну, вот на этом пока и все. Что касается формата PDF, который, как известно, использует встроенные шрифты, то с ним можно поступить так же, как и с изображением.
