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

У Вас недостаточно прав для добавления комментариев.
Регистрируемся,а потом можно будет писать.

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

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

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

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

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

Сейчас все покажу на примере:

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

Я использовал популярный шрифт Lobster и решил проверить, найдет ли сервис его. К сожалению, в результатах отобразилось не то, что ожидалось. Как я уже говорил, WhatTheFont позволяет найти лишь тот шрифт, который есть в базе. Так что вердикт такой: это отличный сервис, если вы ищете шрифт из базы данного сервиса. Во всех других случаях – лучше использовать альтернативные способы.

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

Мобильное приложение WhatTheFont

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

Процесс работы с WhatTheFont довольно прост: достаточно навести устройство на картинку, и сервис автоматически определит шрифт.

Рассмотрим на примере:

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

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

Другие сервисы для определения шрифта по изображению онлайн

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

WhatFontis

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

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

Официальная страница: WhatFontis

FontDetect (FontMassive)

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

Ссылка на скачивание: FontDetect

Identifont

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

Также Identifont предлагает искать шрифт по названию или какой-нибудь характеристике (компании-издателю или фамилии дизайнера). Кроме того, можно ввести название уже известного шрифта и подобрать похожие на него варианты.

Официальная страница: Identifont

FontSpring

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

Официальная страница: FontSpring

FontMatch

FontMatch – это приложение, которое изначально было разработано для ОС Windows, но позже разработчики выпустили программу и для macOS. Поиск по картинке здесь происходит аналогично другим сервисам: загружаем картинку и запускаем анализатор приложения, в результате которого будет отображен список похожих шрифтов. Из минусов: англоязычный интерфейс, но разобраться в нем не составит никакого труда даже тому, кто совсем не знает языка.

Ссылка на скачивание: FontMatch

FontSquirrel

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

Официальная страница: Font Squirrel

Что делать, если не получилось найти шрифт

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

Вот ссылки на некоторые из них:

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

Заключение

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

Как определить шрифт: 7 популярных сервисов

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

7 способов распознать шрифт

1. WhatTheFont

Один из самых популярных сервисов для определения шрифта. Нужно загрузить картинку размером не менее 360 x 275 пикселей в программу, и запустить процесс распознавания. Чем выше качество изображения, тем точнее определение. Допустимые форматы изображений: GIF, JPEG, TIFF, BMP.

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

2. What Font is

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

3. Identifont

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

4. Bowfin Printworks

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

5. Typophile

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

6. Плагин для Google Chrome

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

7. Мобильное приложение WhatTheFont

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

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

Для распознавания кириллических шрифтов (на русском языке) специальных сервисов нет. Можно попробовать оставить на изображении только такие символы, которые дублируются в латинице: A, B, C, E, H, K, M, O, P, T и попробовать распознать с помощью вышеуказанных сервисов. Иначе, помогут только списки или советы специалистов на форумах.

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

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

Часто оказываешься на веб-сайте с ЛУЧШИМ шрифтом и не понимаешь, как его найти и откуда, черт возьми, он взялся. Сегодня я решаю вашу проблему самым простым способом, аналогично выяснению, какую платформу использует сайт.Все эти советы и уловки настолько хороши, потому что иногда вам просто нужно работать, чтобы быть легким, и я знаю, что мы все иногда так себя чувствуем (гм … все время)! О, И мы делаем это шаг за шагом на Goo gle Chrome и Safari ! Ура варианты. Извините, пользователи Firefox 😬.

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

Google Chrome

Шаг 1. Щелкните правой кнопкой мыши и выберите «Проверить»

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

Зайдите на сайт, который вызывает у вас зависть, когда дело касается их шрифтов. Для меня это определенно сайты моих друзей! Щелкните правой кнопкой мыши пустую область страницы и выберите «Проверить» и приготовьтесь к проверке. Первый пример, который я вам показываю, — это сайт моего друга-фотографа Каси Йоста.

Это сайт моего друга-фотографа Каси Йост, который просто потрясающий!

Шаг 2. В разделе «Источники» выберите категорию шрифтов

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

Например, «font-family: Nunito Sans» — шрифт Nunito Sans!

Далее, моя подруга-иллюстратор Брук Глейзер:

Это сайт моей подруги-иллюстратора Брук Глейзер, такой яркий и игривый!

Другой пример на другом веб-сайте, выберите «Источники», затем в разделе « шрифтов .googleapis.com «, вы увидите, что в правой части экрана отображается» font-family: Grand Hotel «.

И мой умный сайт:

На моем собственном веб-сайте, пройдя те же шаги, мы видим «font-family: Libre Franklin ». Это на самом деле рассмешило меня, потому что по какой-то причине я подумал, что на моем веб-сайте есть несколько разных шрифтов, но, к моему удивлению, я использую только пару, а остальные представляют собой графику, полную хаоса.Ура для сохранения ?!

Проделаем те же проверки из Safari, будет вроде, то же самое, но другое!

Safari

Шаг 1. Щелкните правой кнопкой мыши и выберите «Проверить элемент»

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

Шаг 2. На вкладке «Источники» выберите папку, связанную со шрифтами.

Меню появится внизу страницы в Safari, не пугайтесь! Выберите вкладку «Источники», и вы увидите симпатичную маленькую папку под названием «шрифты». Я имею в виду, могут ли они быть более ясными ?! Кажется, это было бы очень просто, НО папка дает вам имена шрифтов, не указывая, как они выглядят! Облом, но у тебя есть варианты.

Вариант 1: Погуглите имя шрифта и посмотрите, соответствует ли оно шрифту, на который вы смотрели в поисковике. Следите за вторым вариантом на следующем шаге!

Шаг 2b. Найдите «font» или «font-family» в строке поиска справа и найдите шрифт.

Вот где , второй вариант вступает в игру! Найдите «font» или «font-family» в строке поиска в правой части всплывающего меню. Это выведет все, что находится в этих границах, и даст вам точное имя шрифта, которое вы хотите!

С сайта Брук:

На этом веб-сайте используется платформа Squarespace, поэтому она будет выглядеть немного иначе, чем предыдущая.Нет всплывающей папки «font», ТАК, мы должны использовать нашу изящную панель поиска для поиска либо «font», либо «font-family». В нем будут перечислены все шрифты, используемые на веб-сайте! Просто потребуется немного дополнительных поисков. Хорошо, что у нас есть все время в мире!

С моего сайта:

Я использую Kajabi для платформы своего веб-сайта, в которой не было папки «font», поэтому нам нужно искать снова! Это полезно помнить, когда вам нужно решить проблему, если папка «font» не появляется сразу, вам следует попробовать использовать панель поиска.

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

КАК ОПРЕДЕЛИТЬ ШРИФТ НА ВЕБ-САЙТЕ

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

Хорошее качество типографики помогает улучшить впечатление читателя, поэтому оно того стоит.Но как узнать, какой шрифт используется на сайте?

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

Определить шрифт, используемый в тексте

1. Использование инструмента инспектора браузера

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

Хотя все браузеры имеют одну и ту же функцию, мы покажем вам, как это сделать с помощью Google Chrome.

Шаг 1. Перейдите на веб-страницу с шрифтом, который вы хотите найти.Щелкните его правой кнопкой мыши и выберите «Проверить».

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

Шаг 3. Теперь щелкните вкладку «Computed». вариант и найдите «font-family».

Вы увидите название шрифта, используемого в выделенном тексте. Вы также можете проверить CSS, связанный с этим шрифтом, на вкладке «Стили».

Читайте также: Tailwind Tribes — все, что вам нужно знать

2. Использование расширения браузера

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

Расширения браузера — это более простой и удобный способ поиска шрифтов на веб-странице.

Вот некоторые известные расширения браузера:

•

WhatFont

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

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

Шаг 1. Перейдите по этой ссылке и добавьте WhatFont в качестве расширения в свой браузер, нажав «Добавить расширение».

Шаг 2: Теперь перейдите на веб-страницу, на которой вы хотите найти шрифт.

Шаг 3. Нажмите на расширение «WhatFont» в правом верхнем углу браузера Chrome.

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

Читайте также: Полное руководство по Pinterest SEO

• Fontnaello

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

Как использовать Fontnaello

Шаг 1. Нажмите на эту ссылку и добавьте ее как расширение, нажав «Добавить расширение».

Шаг 2: Теперь перейдите на веб-страницу, на которой вы хотите определить шрифт.

Шаг 3: Выберите шрифт и щелкните его правой кнопкой мыши.

Шаг 4: Нажмите на опцию «Fontnaello». Теперь вы увидите детали, относящиеся к используемому шрифту.

• CSS Peeper

Как использовать CSS Peeper

Шаг 1. Посетите эту ссылку и добавьте ее в качестве расширения в свой браузер.

Шаг 2: Теперь перейдите на веб-страницу, на которой вы хотите определить шрифт.

Шаг 3. Щелкните расширение CSS Peeper в правом верхнем углу.

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

Читайте также: 10 лучших источников для написания убийственных сообщений в блогах

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

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

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

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

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

Шаг 1. Перейдите в WhatTheFont.

Шаг 2: Загрузите изображение, по которому вы хотите определить шрифт.

Шаг 3. Теперь выберите область, в которой вы хотите идентифицировать шрифт, и нажмите Enter.

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

Заключение

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

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

Если вам понравилась эта статья, подпишитесь на нас в Pinterest и Instagram.

Как идентифицировать шрифты на любой веб-странице без использования расширения в Firefox и Chrome

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

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

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

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

Браузеры имеют встроенную функцию под названием Инструменты разработчика. Если вы используете ярлыки и просматриваете в полноэкранном режиме, возможно, вы случайно нажали F12 (открывает Инструменты разработчика) вместо F11 (полноэкранный режим). Это именно то, что мы собираемся использовать для идентификации шрифтов.

Как определить шрифты на любой веб-странице с помощью Firefox

1. Посетите любую веб-страницу и щелкните правой кнопкой мыши текст со шрифтом, который вы хотите идентифицировать.(см. снимок экрана выше)

2. Нажмите на опцию «Проверить элемент» в контекстном меню. Внизу страницы откроется раздел «Инструменты разработчика».

3. Найдите вкладку «Шрифты» в правом нижнем углу раздела инструментов.

4. Firefox отобразит название шрифта, его размер, высоту строки, интервал, толщину.

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

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

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

Как определить шрифты на любой веб-странице с помощью Chrome

1. Выполните шаги 1 и 2 из раздела Firefox. Chrome загружает инструменты разработчика в правой части страницы.

2. Щелкните вкладку «Вычислено».

3. Прокрутите вниз, пока не увидите информацию о шрифте (семейство шрифтов, размер шрифта и т. Д.).

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

После того, как вы нашли тип шрифта, вы можете использовать свои навыки Google-fu, чтобы получить шрифт со сторонних веб-сайтов. Если вы находите описанные выше шаги сложными, вы можете использовать расширение, такое как Font Finder, которое немного упрощает задачу.

Я наткнулся на этот трюк на Reddit, когда искал инструмент для определения шрифта. Но этот метод оказался простым и эффективным.

Сводка

Название статьи

Как определить шрифты на любой веб-странице без использования расширения в Firefox и Chrome

Описание

Хотите знать, какой шрифт на веб-странице? Давайте покажем вам, как определять шрифты на любой веб-странице без использования расширения в Firefox и Chrome.

Автор

Ashwin

Издатель

Ghacks Technology News

Логотип

Реклама

Идентификация шрифтов | Butterick’s Practical Typography

Идентификация шрифтов

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

Традиционный способ — это практика. По моим оценкам, после более чем 20-летнего изучения шрифтов я могу определить около 300 различных семейств на вид.По сравнению с более чем 100 000 доступных цифровых шрифтов — это немного. Но он охватывает около 95% шрифтов, используемых в мире. Поэтому, когда я вижу шрифт, я обычно знаю, что это такое.

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

1. В книгах ищите колофоны.
   Колофон — это примечание, описывающее печать и типографику книги. Обычно в форзацах появляется колофон.Иногда вы можете увидеть их втиснутыми на страницу с авторскими правами впереди. Базовый колофон идентифицирует используемые шрифты. Лучшие из них также укажут дизайнерам и объяснят, почему были выбраны шрифты. У этой книги есть колофон (см. Титры в конце), но это не обязательно, потому что…

2. На веб-сайтах прочтите CSS.
   Веб-участники могут использовать инспектор исходного кода HTML / CSS в любом веб-браузере, чтобы узнать, какие шрифты используются. (Подсказка: ищите свойство font-family .)

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

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

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

5. Спросите у типографа.
Самый простой способ - сделать снимок и написать его в Твиттере в адрес @Font_ID или @TypeID, которых трудно сбить с толку.

6. Изучите ключевые символы.
Идентификация шрифтов становится проще, когда вы узнаете, что отличает их друг от друга.Кое-что из этого придет естественным образом с их использованием. Но в каждом шрифте есть несколько символов с необычными деталями. Если вы заметите и запомните эти детали, вы сможете распознать больше шрифтов. Например, очень сложно идентифицировать шрифты строго по их знакам пунктуации, которые, как правило, больше похожи, чем различаются. Но такие символы, как A, E, G, M, Q, R, S, a, e, f, g, r, s, t - и, конечно, амперсанд - обычно имеют легко распознаваемые различия.

Как определять шрифты на веб-сайтах: Учебное пособие и инструменты

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

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

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

• проверка исходного кода
• с использованием расширения браузера
• с использованием мобильного приложения

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

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

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

Используйте функцию проверки вашего браузера для определения шрифтов с веб-сайтов.

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

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

На правой панели вверху есть несколько вкладок. Значение по умолчанию - « Styles », но щелкните следующую вкладку (« Computed ») и прокрутите, пока не увидите информацию о семействе шрифтов.

Наконец, я получаю имя выделенного мной шрифта, в данном случае NYT-Magslab.Неудивительно, что этот шрифт недоступен для лицензирования, но я могу выполнить поиск по сайтам популярных шрифтов , например, 1001freefonts или DaFont , и поискать другие похожие плоские шрифты.

Как использовать функцию проверки в Chrome, Firefox, Safari и Edge

Предыдущие инструкции относятся к Chrome на Mac, но действия аналогичны в других браузерах.

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

Расширения браузера и инструменты

для идентификации веб-шрифтов

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

1. Fount

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

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

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

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

2. WhatFont - мое любимое средство для определения шрифтов с веб-сайтов

WhatFont - чрезвычайно универсальный инструмент, который доступен как расширение Chrome, расширение Safari и как букмарклет, который работает с Firefox, Chrome, Safari и Internet Explorer.

Инструмент WhatFont дает название семейства шрифтов, а также вес, размер и цвет любого веб-текста. Информация появляется во всплывающем окне, которое наводится на целевой текст (в отличие от Fount).

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

3. Font Finder

Font Finder позволяет выделить целевой текст, затем щелкнуть правой кнопкой мыши и выбрать один из трех вариантов: проанализировать сведения о шрифте, скопировать информацию о шрифте или заменить шрифт на свой собственный предпочтительный шрифт. Это очень популярное приложение (более 118 000 пользователей в Chrome и Firefox), оно также доступно для Opera и Microsoft Edge.

4. WhatFontIs

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

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

Как определить шрифт на веб-сайте с помощью iPhone или iPad

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

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

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

Щелкните здесь, чтобы прочитать нашу статью: Как определить шрифт на изображении или картинке.

Где найти шрифт для загрузки после того, как вы определили его с веб-сайта

Уловка для поиска понравившегося шрифта в Интернете заключается в том, чтобы найти его версию, которая также доступна. Пример, который я продолжаю использовать (в основном потому, что мне нравится заголовок « Я рекомендую есть чипсы ») - это шрифт NYT Mag Slab , который принадлежит исключительно New York Times и недоступен для таких пользователей, как вы и я.

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

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

Подробнее:

Анализируйте информацию о шрифтах на веб-сайте с помощью Firefox или Chrome • Raymond.CC

На некоторых веб-сайтах используются совершенно фантастически выглядящие шрифты, и когда вы увидите тот, который вам нравится, вы, возможно, захотите узнать, как он называется. Определить название шрифта, который используется на веб-сайте, довольно легко для веб-дизайнеров. Однако для пользователей, которые знают только, как использовать конструкторы веб-страниц WYSIWYG (What You See Is What You Get), это будет нелегко. Сначала вам нужно проверить исходный код веб-страницы, затем выяснить, какие теги DIV используются, и, наконец, проверить файл каскадных таблиц стилей (CSS).Файл CSS покажет, какие шрифты используются и какие дополнительные настройки они могут использовать. Более простой способ автоматически узнать, какой шрифт используется на веб-сайте, - это использовать надстройку браузера, которая выполняет детективную работу за вас.

Здесь я рассмотрю 4 надстройки браузера, 3 для Firefox и 1 для Chrome. Firefox называется Font Finder, FontInfo и Context Font . Расширение Chrome - . Что за шрифт?

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

Font Finder требует небольшого дополнительного шага - вы выбираете Analyze selection из подменю Font Finder в контекстном меню. Font Finder может предоставить гораздо более подробную информацию, такую ​​как цвет шрифта, цвет фона, высоту строки, вертикальное выравнивание, межбуквенный интервал, интервал между словами, оформление и элемент.Он также может редактировать элемент и копировать его значение в буфер обмена.

FontInfo немного отличается. Хотя может появиться всплывающее окно с названием шрифта, аналогичное What’s the Font ?, есть также более мощная вкладка « Fonts », когда вы щелкаете правой кнопкой мыши по странице и выбираете « View Page Info ». Это дает обширную информацию обо всех шрифтах на текущей странице.

Возьмем для примера этот веб-сайт. Надстройка показывает 12px verdana для этого веб-сайта, но когда вы щелкаете правой кнопкой мыши по рекламе AdSense, она показывает то же самое, но, как ни странно, выглядит иначе, возможно, немного больше.

Попытка проверить, какой шрифт и размер используется в Google AdSense, требует немного больше работы. Полезно для веб-мастеров, которые хотят совместить рекламу с текстом, используемым на своем веб-сайте. Что вам нужно сделать, это щелкнуть правой кнопкой мыши по рекламе AdSense, перейти к This Frame и выбрать Open Frame в New Tab . Откроется новая вкладка, показывающая только рекламу Google и ничего больше. Если вы видите графическое объявление, вам нужно обновлять его, пока вы не увидите текстовое объявление. Теперь выделите текст, шрифт и размер которого вы хотите проверить, и надстройка сможет сказать вам, какой шрифт и размер используются.

Надстройка Context Font совместима с Firefox. Какой шрифт? был протестирован в Google Chrome.

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

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

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

Доступ к инспектору Chrome

Если вы используете браузер Chrome и хотите проверить веб-сайт, первое, что вам нужно сделать, это получить доступ к окну инспектора. Есть несколько способов сделать это:

• Нажав клавишу F12 или
• Щелкнув правой кнопкой мыши на определенном элементе и в открывшемся меню, получить доступ к опции Проверить .Преимущество этого метода заключается в том, что он непосредственно выделяет рассматриваемый элемент, или
• При нажатии комбинации клавиш Control + Shift + I (в Windows) или Cmd + Alt + I (на Mac) или
• В меню Chrome (3 точки в правом верхнем углу) »Дополнительные инструменты» Инструменты разработчика.

Окно инспектора может отображаться как интегрированное в само окно браузера или отображаться в отдельном окне.Чтобы получить доступ к этим параметрам, вы можете сделать это, щелкнув значок конфигурации (3 точки) в правом верхнем углу инспектора и изменив значение свойства «Dock Side».

На стороне Dock вы можете изменить способ отображения окна инспектора.

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

Выберите режим отображения содержимого страницы.

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

Определение адаптивного и горизонтального режима отображения на мобильном устройстве.

Основные вкладки инспектора

Как вы могли заметить, инспектор состоит из разных вкладок.

вкладок доступно в инспекторе Google.

Из каждого из них у вас будет доступ к различным функциям и функциям:

• Элементы : показывает HTML-код страницы, а также применяемые стили.вы также можете изменять их и быстро добавлять новые правила.
• Консоль : показывает различные сообщения об ошибках и предупреждения, которые появляются на странице (изображения, которые не загружаются, ошибки javascript,…)
• Источники : отображает дерево ресурсов для страницы. Вы можете видеть, откуда берутся различные ресурсы, и изменять их.
• Сеть : показывает различные запросы, сделанные с веб-сайта, доступ к содержимому запроса, полученный ответ, время…
• Производительность : показывает запущенные процессы и служит для измерения производительности страницы.
• Память : показывает объем памяти, потребляемой во время загрузки и выполнения веб-страницы.
• Applicatio n: отображает полезную информацию о ресурсах, используемых веб-приложением.
• Безопасность : отображает информацию о различных сайтах, к которым осуществляется доступ со страницы, и их соответствующие сертификаты.
• Аудиты : позволяет создать отчет аудита для проверки ошибок.
• Существуют плагины, которые добавляют вкладки и функции в инспектор, поэтому вкладок может быть больше.На предыдущем изображении показано, что мы установили плагин Redux DevTools .

Вкладка «Элементы»

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

Как я упоминал ранее, на вкладке Elements вы можете получить доступ к HTML-коду и стилям различных элементов на странице, на которой вы находитесь. Вкладка

Elements инспектора Google Chrome.

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

Фактически, на панели стилей у вас есть три вкладки:

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

Просмотр сведений об элементе

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

Скриншот веб-сайта Nelio Software.

На изображении инспектора вы можете видеть, что главное окно сообщает мне, что стиль заголовка «Программное обеспечение Nelio» - h2 .

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

Редактировать текст элемента на странице.

См. Шрифт

Теперь вы знаете, что это заголовок, но как насчет шрифта?

Ну, очень просто, на вкладке Computed инспектора вы найдете все свойства выбранного элемента. Прокрутите вниз до атрибута font-family , и там вы найдете именно тот шрифт, который имеет заголовок нашего веб-сайта.

Шрифт, примененный к выбранному элементу.

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

Изменение шрифта заголовка в инспекторе.

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

Страница с измененным шрифтом заголовка.

Как видите, инспектор Google Chrome - очень удобный и простой в использовании инструмент, позволяющий поэкспериментировать и опробовать дизайн, который остался бы после внесения каких-либо изменений в элемент.

Как насчет шрифта изображения?

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