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


Как узнать шрифт на сайте 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 кажутся особенно полезными.

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

.

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

Обновлено: 02.04.2019 компанией Computer Hope

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

Шрифт в документе

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

Шрифт на веб-странице

Через текстовый редактор или текстовый редактор

Вы можете выделить текст на веб-странице, для которого хотите определить шрифт. Скопируйте этот текст (щелкните правой кнопкой мыши и выберите Копировать или нажмите Ctrl + C на клавиатуре). Откройте текстовый редактор или текстовый редактор и вставьте (щелкните правой кнопкой мыши и выберите Вставить или нажмите Ctrl + V на клавиатуре) текст в новый документ. Снова выделите текст в текстовом редакторе и посмотрите на параметр шрифта на панели инструментов.Он должен отображать, какой тип шрифта используется для этого текста.

Через плагин

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

Заметка

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

Через исходный код

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

Наконечник

Во многих веб-браузерах вы можете просмотреть исходный код, нажав Ctrl + U или нажав F12 .

.

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 apps-school 20 лучших приложений для учеников, возвращающихся в школу

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

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

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

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

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

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

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

.

Как найти шрифт с нужным символом

Шрифты, которые мы используем сегодня, содержат огромный массив символов Unicode. Так как же нам найти шрифты, которые содержат нужный нам символ? К сожалению, мы не можем использовать панель «Глифы» в InDesign. Эта панель имеет множество замечательных функций, в том числе возможность создавать наборы глифов для часто используемых символов. Но в нем нет возможности поиска и нет способа найти конкретный глиф в разных установленных шрифтах.

Есть отличная утилита, которая удовлетворяет эту потребность, но только для Mac.Он установлен во всех последних версиях Mac OS X, но по умолчанию не включен, поэтому многие пользователи Mac могут даже не знать о его существовании. Утилита называется Character Viewer, , и это краткое введение в ее возможности. (Бесплатная утилита для Windows под названием BabelMap упоминается в конце этого поста.)

Включение программы просмотра персонажей

Чтобы включить просмотрщик символов, откройте «Системные настройки»> «Клавиатура». Щелкните вкладку «Клавиатура» и выберите «Показать средства просмотра клавиатуры и символов в строке меню».(В более ранних версиях Mac OS X вы найдете тот же параметр в настройках «Язык и текст» на вкладке «Источники ввода».)

Включение программы просмотра персонажей

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

Меню ввода Mac

Краткий обзор программы просмотра персонажей

Когда открывается программа просмотра персонажей, она, вероятно, будет выглядеть примерно так:

Открытие программы просмотра персонажей

С левой стороны находится список категорий глифов (которые вы можете редактировать, как описано ниже). Когда вы выбираете большинство категорий, глифы внутри этой категории появляются в средней части. Отображаемые глифы основаны на текущем стандарте Unicode.В настоящее время насчитывается более 110 000 символов, охватывающих 100 скриптов.

Когда вы щелкаете по одному из этих глифов в средней части, его имя и номер Unicode отображаются вверху справа. В правом нижнем углу появится раздел «Варианты шрифта». Варианты шрифтов представляют собой способ отображения глифов в шрифтах, которые в настоящее время установлены на вашем Macintosh. В приведенном выше примере я щелкнул категорию пиктограмм, затем выбрал глиф под названием Black Spade Suit (черная пика из колоды карт), и вы можете видеть, что многие шрифты на моем компьютере включают этот глиф.

Если я нажму на один из вариантов шрифта, его имя и увеличенное изображение появится вверху справа:

Отображение символа

Как найти нужный символ

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

».

Настройка списка категорий

Прокрутите список категорий и выберите категории, которые вас интересуют, затем нажмите Готово.

Настройка списка категорий

Я нашел три основных способа найти шрифты, содержащие нужный вам глиф:

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

2. Найдите глиф по его имени в Юникоде (например, вопросительный знак). Когда я ищу «вопросительный знак» в поле поиска, выделенном в правом верхнем углу на иллюстрации выше, я могу получить больше результатов, чем ожидал.Он включает результаты для всех имен глифов, содержащих вопросительный знак, например, перевернутый вопросительный знак:

.

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

3. Выполните поиск по номеру Unicode для интересующего вас глифа. Возможно, вы нашли нужный глиф в текущем шрифте, но вам не нравится его отображение. Вы бы хотели увидеть, как это выглядит в других шрифтах. В палитре «Глифы» InDesign, когда вы останавливаетесь над отображением глифа, отображаются имя и номер Unicode. Когда я останавливаюсь над орнаментом, показанным ниже, я вижу его имя в Юникоде «Цветочное сердце» и его номер в Юникоде 2766.

Число Unicode в панели символов

В поле поиска в средстве просмотра символов введите номер Unicode в следующем формате: «U + 2766» и нажмите Return. Вот результат:

Поиск в Unicode

Несколько советов по просмотру персонажей

Вот еще несколько советов, которые я усвоил:

  • Кнопка в правом верхнем углу переключает между обычным представлением, которое я показал, и сверхкомпактным представлением. Последнее представление полезно только в том случае, если вы сохранили избранное или просматриваете недавние глифы
  • В обычном режиме просмотра вы можете выбрать глиф, затем щелкнуть «Добавить в избранное».Затем эти избранные появятся в категории «Избранное» в списке слева.
  • Не похоже, что Средство просмотра символов можно изменять, но если вы переместитесь к его левому, нижнему и правому краям, вы можете перетащить, чтобы изменить размер. Вы также можете переместиться через границу между различными разделами и изменить размер раздела, чтобы сделать его шире или уже.
  • Если вы используете приложения Apple (например, Mail, Pages или TextEdit), вы можете открыть средство просмотра символов, выбрав «Правка»> «Специальные символы».Если вы используете панель «Шрифты» в этих приложениях, выберите меню «Действие» (значок шестеренки)> Символы. В этих приложениях вы можете вставлять глифы двойным щелчком, как вы делаете это с панелью «Глифы» в InDesign.
  • Что еще более интересно, общедоступная предварительная версия Microsoft Word 2016 также включает в себя «Правка»> «Специальные символы», так что вскоре вы сможете легче вставлять глифы в документы Word. (Более ранние версии Word не включают эту функцию.)

Бесплатная утилита для пользователей Windows

Эта статья была вдохновлена ​​вопросом на форуме Adobe InDesign, в котором спрашивается, как найти шрифт, в котором используется определенный глиф.Поскольку я не регулярно пользуюсь Windows, я не могу рекомендовать аналогичную утилиту для Windows. К счастью, Джоэл Черней, постоянный участник форума по вопросам шрифтов, предложил бесплатную утилиту для Windows: «Я фанат BabelMap. Он выполняет множество полезных задач, связанных со шрифтами. У него есть три разных способа сделать то, о чем вы просите, мой любимый из них - «изучить буфер обмена и сообщить мне все шрифты в моей системе, которые имеют все эти глифы». Он также позволит вам вводить текст, или введите отдельные кодовые точки.”

Стив Вернер - инструктор, консультант и соавтор (вместе с Дэвидом Блатнером и Кристофером Смитом) InDesign для пользователей QuarkXPress и перехода на InDesign. Он проработал в полиграфической индустрии более 20 лет и десять лет был менеджером по обучению в Rapid Lasergraphics. С 1988 года преподает уроки компьютерной графики.

.

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

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

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

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