Как узнать шрифты, который используется на сайте?
Изучаю, к примеры, я сайты. Понравились шрифты на некоторых. Можно ли как-то в коде или еще как-то (я нуб в этом деле) узнать шрифты, которые использовались на каком-то из сайтов?
- Вопрос задан более трёх лет назад
- 13227 просмотров
Комментировать
Решения вопроса 1
Сначала кликаешь правой кнопки мыши на текст, у которого ты хочешь узнать шрифт и нажимаешь «Просмотр кода элемента».
У тебя появится консоль, и справа ищешь font-family:
Ответ написан более трёх лет назад
Нравится 1 1 комментарий
Как определить шрифт на сайте
Бывало ли у вас, что посещая какой-нибудь ресурс в Интернете, вам понравился используемый шрифт? Но как определить название шрифта на сайте? Есть несколько способов.
Используем расширение для браузера
Для каждого браузера есть множество расширений для определения шрифтов на странице сайта, вот самые популярные из них:
Fonts Ninja
WhatFont
Смотрим в коде страницы
Этот способ менее надежен, но позволяет быстро узнать название шрифта без установке расширений, может быть полезен если вам не хочется устанавливать расширение из-за одного раза.
Нажмите правой кнопкой мыши на текст с понравившимся шрифтом. И выберите пункт «Исследовать» в Firefox или «Посмотреть код» в Chrome.
Перед вам откроется окно для разработчиков. В правой части экрана найдите пункт начинающийся с «font-family», после него будет отображаться название шрифта.
Так же возможно вам будет интересно узнать как определить шрифт по картинке
Как определить название шрифта на сайте за 1 секунду
В одной из ранних статей мы рассказали об Интернет-ресурсах, способных превратить процесс распознавания шрифтов если не в нечто занимательное, то по крайней мере в рядовую, но перспективную процедуру.
И хотя лучшее — враг хорошего, сегодня мы пойдём ещё дальше. Ведь кому нужны целые сайты, когда есть расширения для браузеров?
Fontface Ninja
Повальное увлечение азиатской, и в частности японской, культурой, охватившее западный мир в предыдущем столетии, едва ли могло не найти отражения и в сфере IT.
На примере отдельных веб-продуктов мы видим это в минимализме, граничащем со строгостью, в смещении акцентов с результата на процесс и, безусловно, в симпатии к внешней атрибутике. А особую привлекательность для разработчиков, по-видимому, представляет собой воинственный и загадочный символизм самураев и их негласных антагонистов — ниндзя.
Расширение для идентификации шрифтов Fontface Ninja для Safari и Chrome вполне соответствует идее скрытного и эффективного наёмника. Работа с ним строится так: нажав на кнопку расширения, наведите курсор на интересующий шрифт — всплывающая подсказка будет содержать информацию о его названии, межстрочном интервале, размере. Если повезёт, тут же шрифт можно будет скачать.
Весьма любопытной может оказаться функция Mask: она позволяет скрывать графическое содержимое страницы, оставляя лишь текстовые блоки.
Type Sample
Ещё одно полезное расширение, но только для пользователей Chrome. Остальные могут приобщиться к прекрасному по старинке — воспользовавшись услугами закладок.
Принцип работы в данном случае аналогичен; особого внимания заслуживает, пожалуй, реализованная возможность «поиграться со шрифтами» в режиме реального времени. Всплывающая подсказка с информацией о гарнитуре — прошлый век, когда по нажатии на выделенный текстовый блок вы способны изменить размер шрифта, посмотреть на панграмму (англоязычную), ввести собственный пример текста и позволить себе иные вольности.
Посредством авторизации чере аккаунт Twitter’a с помощью Type Sample можно создать собственную коллекцию шрифтов и поглядеть на чужие.
WhatFont
Расширение и для Chrome, и для Firefox, и для Яндекс.Браузера. Компенсируется такая всеядность предельно простым функционалом: нажал на кнопку, включив режим определения шрифтов, навёл на нужный и узнал кое-что новое.
Стоит отметить: WhatFont позволяет определить не только название, но при нажатии на текст также межстрочный интервал, начертание, размер, семейство, которому принадлежит шрифт, а также его текущий цветовой код.
Кроме того, можно посмотреть, как шрифт выглядит на примере английского алфавита в целом и скачать — если к его разработке приложила руку сама Google.
Typ.io
Чем объяснить тот пиетет, который испытывают разработчики к пользователям Chrome, неизвестно, однако факт остаётся фактом: расширений для распознавания шрифта, поддерживаемых этим браузером, чуть больше.
Typ.io — идеальный вариант для максималистов, которые не приемлют лишних телодвижений. После установки расширения в нижнем углу браузера появится кнопка с букой «Т», нажатие на которую выводит названия всех идентифицированных на странице шрифтов в отдельном столбце. Чтобы узнать, где какой шрифт использовался, достаточно кликнуть на его название.
Автор: Денис Стригун
Как быстро определить шрифт на сайте: 4 способа
Увлечённый дизайнер всегда находится в активном поиске новых шрифтов. Не только во время работы.
Листая социальные сети, сайты брендов и даже отдыхая за игрой в приставку можно заметить шрифт, который захочется в свою коллекцию. Остаётся технический момент: узнать, какое шрифтовое семейство используется в проекте и купить лицензию на него.
Способов определить шрифт несколько, мы расскажем о самых простых.
Зачем знать, какой шрифт используется на сайте?
Для начинающего дизайнера узнавать о шрифтах, используемых в других проектах, полезно для профессионального роста. Это поможет развить насмотренность.
Ищите похожие на свои проекты и изучайте шрифты, которые используют другие специалисты. Так вы сможете определить, гарнитуры каких стилей лучше смотрятся в определённой тематике. Изучайте не только понравившиеся работы. Будет полезно понять, какие шрифты кажутся неподходящими и почему. Чтобы процесс стал ещё увлекательнее, составляйте свой список «плохих» и «хороших» шрифтов для различных по тематике проектов.
Искать шрифты, которые используются в других проектах, будет полезно и опытным дизайнерам. Так можно пополнить коллекцию гарнитур или найти новые студии с интересными и стильными шрифтами.
Как узнать название шрифта на сайте
Есть несколько способов определить шрифт, который используется на сайте проекта.
- Расширение для браузера;
- Поиск названия в коде страницы;
- Поиск шрифтов по изображению с помощью онлайн-сервисов;
- Определение шрифта в Adobe Photoshop.
Давайте подробнее остановимся на каждом из них.
Браузерные расширения
Браузерных расширений, которые могут определить шрифт на сайте, довольно много. Мы поделимся теми, которые часто используются дизайнерами и проверены нами.
Fonts Ninja
Браузеры: Chrome, Firefox, Safari.
Одно из самых популярных и удобных расширений. Определяет не только шрифт, но и его начертание. Дополнительный плюс в том, что вы сможете не только смотреть, но и покупать шрифты. В Ninja есть ссылки на покупку — удобно и просто.
Чтобы использовать расширение, скачайте его и установите в браузер. После этого в панели инструментов появится иконка с ниндзя. Нажав на неё, вы можете наводить курсор на любой участок текста, чтобы определить шрифт. Кликните по тексту, чтобы открыть дополнительную панель и протестировать шрифт. Fonts Ninja также доступен в качестве приложения на смартфон.
Кстати, на официальном сайте Fonts Ninja используется бестселлер студии TypeType — TT Norms® Pro.
WhatFont
Браузеры: Chrome, Safari.
Ещё одно популярное расширение для браузеров, помогающее распознать шрифт.
После установки выделите необходимый фрагмент текста и кликните на значок «WhatFont». Вы можете узнать, какое семейство используется, начертание и размер шрифта.
Кроме перечисленных выше расширений, дизайнеры используют CSS Peeper и TypeSample и другие. У каждого свои дополнительные функции, поэтому мы рекомендуем протестировать несколько и выбрать наиболее удобный.
Ручной поиск в коде страницы
Сложный и одновременно самый простой вариант узнать, какой шрифт используется на сайте — посмотреть в коде страницы. Это не идеальный способ, так как шрифты могут быть переименованы.
Чтобы воспользоваться ручным поиском, выберите фрагмент текста и найдите Font Family в коде страницы.
Чтобы сделать это в браузерах Chrome и Firefox, кликните на текст правой кнопкой мыши и выберите пункт выпадающего меню с просмотром кода, затем найдите закладку «Elements», затем «Styles», в котором будет код font-family.
В Safari действия будут аналогичны, но заранее убедитесь, что у вас открывается меню «Разработчик». Для этого поставьте соответствующий флажок во вкладке «Дополнительно».
Онлайн-сервисы для распознавания шрифта по изображению
Иногда понравившийся шрифт находится не на странице сайта, а на изображении. Это может быть рекламный баннер, фотография или картинка в социальных сетях.
Для таких случаев есть ряд онлайн-сервисов, которые помогут определить понравившийся шрифт.
Принцип работы схож во всех. Достаточно зайти на сайт сервиса, загрузить изображение с необходимым шрифтом и подождать результат.
Чаще всего для определения шрифта по изображению используют следующие сервисы:
Вы также можете спросить об интересующем шрифте у других дизайнеров, используя социальные сети.
Определение шрифта в Adobe Photoshop
Вы можете определить шрифт на изображении, используя Adobe Photoshop. Функция «Подбор шрифта» постоянно совершенствуется, но на данный момент поддерживает не все языки.
Чтобы воспользоваться функцией, вам нужно:
- Выделить текст на изображении, используя инструмент «Прямоугольная область»;
- Кликнуть на пункт «Текст» «Подбор шрифта»;
- В списке похожих шрифтов выбрать наиболее подходящий.
Бонус: приложения для смартфонов
Безусловно, интересные шрифты могут настигать дизайнера не только за рабочим компьютером. Чтобы всегда иметь возможность пополнять коллекцию шрифтов, скачайте приложение на свой смартфон.
На данный момент популярны WhatTheFont и Find My Font. Чтобы определить понравившийся шрифт, достаточно открыть приложение и навести камеру на изображение. Из списка похожих шрифтов вы сможете выбрать наиболее подходящий.
Вместо выводов
Эстетичные шрифты находят дизайнера не только во время работы. Лучше заранее подготовить инструменты, с помощью которых можно быстро определить, какой шрифт использовался на сайте, афише, баннере или на вывеске кофейни.
Последние публикации
Шрифт и гарнитура: в чем разница?
Чем отличается шрифт от гарнитуры/шрифтового семейства? Кажется, что эти слова являются синонимами. Но давайте разберемся, что на самом деле означают данные типографические термины, в чем их главные отличия и какое они имеют ли значение для дизайнеров и недизайнеров.
Какие шрифты лучше подходят для чтения? ТОП-10
Ищете самый читаемый и удобный шрифт для чтения с экрана телефона или электронных книг? TypeType предлагает свой рейтинг лучших шрифтов для чтения. Узнайте, какой шрифт считается самым удобочитаемым.
УниверситеТТ: Урок 4. Планирование шрифтового семейства
В этой статье мы продолжим говорить о скетчах, но уже более прагматичных — скетчах шрифтового семейства. Вы узнаете почему уже на начальных этапах проекта важно определиться с наполнением вашей гарнитуры.
Узнать больше
Шрифты для верстки книги: как выбрать лучший
Веб и печать в шрифтовом дизайне — два разных мира. По крайней мере, их часто преподносят именно так. На практике многие шрифты могут применяться в обеих сферах. Но чтобы понимать, какую гарнитуру выбрать, нужно знать об отличиях книжных и веб-шрифтов. В этой статье мы поговорим о книжных шрифтах и о том, как выбрать идеальную гарнитуру для верстки книги, журнала или другого печатного материала.
УниверситеТТ: Урок 1. Классификация шрифтов
Эта статья будет необычной. Если вы ещё не слышали, рассказываем: мы запустили новый проект для всех, кто влюблён в шрифты. В рамках этой инициативы мы будем регулярно выпускать материалы о шрифтовом дизайне. Каждая статья из серии раскроет одну полезную тему. А главное — вы сможете не только погрузиться в индустрию, но и познакомитесь с нашей прекрасной командой, ведь делиться опытом будут шрифтовые мастера TypeType.
Онлайн-магазин TypeType: оплата банковскими картами для вашего удобства
Мы вкладываем много стараний и любви в каждый шрифт, и теперь рады предложить вам удобный и интуитивно понятный способ приобретения наших продуктов в любое время и из любой точки мира. Теперь вы можете оплачивать свои покупки банковскими картами, что существенно упрощает процесс и делает его быстрее.