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


Как узнать шрифт на сайте 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.

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

В последних выпусках Photoshop CC добавлена ​​новая функция шрифта под названием Match Font, о которой вы, возможно, не знали.

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

Вот несколько фотографий, которые я сделал на днях, когда был вне дома.

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

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

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

Затем выберите «Тип», «Соответствие шрифту». Photoshop показывает мне возможные шрифты, которые я уже установил на своем компьютере, выполняет поиск в библиотеке Typekit и определяет шрифты, доступные для вашего уровня подписки Creative Cloud, так что даже если у вас не установлен шрифт, вы можете щелкнуть этот маленький значок облака в диалоговом окне Match Font, которое синхронизирует шрифт вашего компьютера.

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

Я выберу этот шрифт Quimby, который у меня есть, и нажму OK. Теперь я использую шрифт Quimby, идентифицированный Photoshop, чтобы добавить текст в этот дизайн. Думаю, этот шрифт работает хорошо.

Теперь вы знаете, как находить шрифты в Photoshop CC с помощью Match Font. Чтобы узнать о других темах типографики, таких как добавление иллюстративных элементов и графики, а также об использовании 3D-эффектов Photoshop для таких вещей, как выдавливание текста, ознакомьтесь с дополнительными руководствами на Adobe.com.

Вы можете сопоставить шрифты, отображаемые на изображениях или фотографиях, с помощью функции «Подобрать шрифт» в Adobe Photoshop. Узнайте, как найти существующие шрифты, соответствующие выбранному тексту, или загрузить новые шрифты, соответствующие выбранному тексту, с помощью Typekit.

  1. Откройте изображение в Photoshop и выберите инструмент Rectangular Marquee Tool. Используйте этот инструмент, чтобы выбрать область изображения, содержащую текст, который вы хотите сопоставить.
  2. На панели инструментов выберите «Текст»> «Подобрать шрифт».
  3. Выберите из подходящих шрифтов, уже установленных на вашем компьютере, или загрузите из Typekit, щелкнув значок облака.
  4. Теперь добавьте текст к изображению, используя подобранный шрифт.
.

WhatTheFont и 4 альтернативы для поиска шрифтов из изображений

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

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

Что делать, если шрифт встроен в изображение? Как определить шрифт, если копирование и вставка текста невозможно?

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

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

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

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

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

Если исходное изображение не соответствует этим требованиям, отредактируйте его в приложении, например Photoshop, перед загрузкой.

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

Вы также можете скачать WhatTheFont для Android и iOS.Он может читать изображения, которые вы сохранили в библиотеке вашего телефона, а также может работать «на лету» с камерой вашего устройства. Это идеальный компаньон, если вы часто задаетесь вопросом о шрифтах, используемых на рекламных щитах и ​​в магазинах.

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

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

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

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

Проверьте IdentiFont. На сайте есть пять уникальных инструментов:

  • Шрифтов по внешнему виду: Сайт задает вам 13 вопросов о вашем шрифте, а затем дает вам список совпадений из своей базы данных, содержащей более 11 000 стилей. Типичный вопрос: «Есть ли у символов засечки?» и "Какой формы точка на вопросительном знаке?"
  • Шрифты по имени: Если вы знаете часть имени шрифта, но не уверены в полном имени, приложение предложит вам варианты.
  • Шрифты по сходству: Если неизвестный шрифт очень похож на другой шрифт, введите имя и посмотрите, какие стили ему подходят. Это также полезный инструмент, если вы хотите найти (и использовать) менее известный шрифт в своем проекте, который имеет сходство с основным шрифтом.
  • Шрифты по изображению: Этот инструмент позволяет искать различные шрифты дингбата. Вы даже можете искать по слову; например, при вводе «Автомобиль» будут перечислены все шрифты, содержащие изображения автомобилей.
  • Шрифты от дизайнера: Создание шрифтов - это искусство. Как и любое искусство, некоторые создатели стали известными либо потому, что они разработали уникальный стиль, который проявляется во всех их работах, либо потому, что они создали некоторые из классических основных шрифтов, используемых сегодня. Если вам нравится шрифт от определенного дизайнера, введите его имя, чтобы увидеть, что еще они создали.

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

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

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

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

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

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

Есть несколько ограничений для всех пользователей: размер изображений не может превышать 1,8 МБ, поддерживаются только JPEG, JPG, GIF и PNG.

Приложение имеет два других значительных преимущества:

  • Расширение браузера: Есть надстройки, доступные как для Chrome, так и для Firefox, позволяющие мгновенно определять любой шрифт, с которым вы сталкиваетесь в Интернете.
  • PDF Fonts: Природа PDF-файлов затрудняет извлечение шрифтов из них; это не изображения и не традиционные текстовые документы. Сканер PDF WhatFontIs позволяет загружать файлы PDF. Затем инструмент сканирует документ и предоставляет список найденных шрифтов.

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

Какой инструмент вы используете?

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

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

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

free-fonts-design find and fix windows stop codes feature Как найти коды остановки и исправить ошибки Windows 10 Коды остановки

- отличная отправная точка для исправления любых ошибок Windows 10.Вот что вам нужно знать об использовании кодов остановки для устранения неполадок.

Об авторе Дэн Прайс (Опубликовано 1376 статей)

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

Ещё от Dan Price
Подпишитесь на нашу рассылку новостей

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

Еще один шаг…!

Подтвердите свой адрес электронной почты в только что отправленном вам электронном письме.

.

linux - определение того, какие символы поддерживает данный шрифт

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

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