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

Содержание

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

Пишу без воды и по делу. Способов есть масса, но все их
можно поделить на 3 основных

  • Через расширение для браузера
  • Через код страницы
  • При помощи сторонних сайтов

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

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

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

Fontface Ninja

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

Type Sample

Из фишек – возможность создать свою коллекцию шрифтов через
свой же акк в твиттере. Занятно, при этом можно подглядеть коллекции других
людей все через тот же акк твиттера. ИМХО – в рунете не имеет смысла, зато
есть. Вторая фишка – возможность «поиграться со шрифтами» прямо на странице. Вот
это уже круто.

WhatFont

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

Typ.io

Добавил для количества. Никогда им не пользовался, да и ты, скорее
всего , не дочитал до этого места, а сразу установил Fontface Ninja. Полезно в Typ.io
то, что у них на сайте есть статистика использованных шрифтов и еще масса
приятностей.

PS В
следующей статье расскажу, как определить  шрифт с картинки. Ставь лайк, если тебе
интересна такая тема.

Как проверить шрифт на странице в Chrome, Firefox или Opera

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

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

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

Проверьте шрифт на странице с помощью расширения Font Finder

Один из самых простых способов — использовать расширение Font Finder, которое доступно для браузеров Chrome, Opera и Firefox. Вы можете загрузить их из официального репозитория Google или Mozilla, используя следующие ссылки:

Загрузить Font Finder для Chrome

Загрузите Font Finder для Opera

Скачать Font Finder для Firefox

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

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

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

Вы найдете раздел среди кода «Шрифт» (шрифт) и строку с именем «Шрифт отображается» (шрифт, используемый для рендеринга текста). Здесь отображается имя используемого шрифта.

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

Например, в нашем случае это шрифт, описанный как «Familiarpro.» Его полное имя «Familiar PRO», поэтому, когда вы вводите его в поисковой системе Google, мы обязательно найдем нужное место. Таким образом, мы можем быстро и легко найти шрифт каждого шрифта, который используется для стилизации фактического текста, отображаемого на странице.

Как распознать шрифт /this? — CodeRoad

Мне нужно выяснить, каким шрифтом это было написано:

Я уже пробовал http://www.myfonts.com/WhatTheFont/ но это не помогло. Знаете ли вы о некоторых сайтах, которые отображают галереи известных шрифтов? Мне почему-то удалось добраться только до Bizzare fonts.

В любом случае, любое решение приветствуется, thx

fonts

Поделиться

Источник


vlad-ardelean    

19 июня 2013 в 06:47

2 ответа


  • Python Тессеракт не может распознать этот шрифт

    У меня есть этот образ: Я хочу прочитать его в строку, используя python, что, как я думал, будет не так уж сложно. Я наткнулся на tesseract, а затем на оболочку для скриптов python, использующих tesseract. Поэтому я начал читать изображения, и это было здорово, пока я не попытался прочитать это….

  • Как правильно использовать шрифт Ubuntu

    Я попытался использовать шрифт Ubuntu на своей странице, добавив ссылку: <link rel=stylesheet type=text/css href=http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin> Вот это CSS: body{ font-family : Ubuntu; } Это работает, но иногда шрифт не может распознать словацкие…


Поделиться


Seer    

19 июня 2013 в 06:52


Поделиться


Matej    

19 июня 2013 в 07:24


Похожие вопросы:

Что это за шрифт на изображении

Привет, ребята, я знаю, что это глупый вопрос, я поражен заданием в HTML/CSS все хорошо, но я не могу распознать шрифт, я новичок в CSS всего лишь 4-дневный ускоренный курс и все еще изучаю, каким…

Распознать шрифт с этого сайта?

Я надеюсь, что кто — то сможет распознать шрифт на сайте http://www.dineinkelowna.com -слово Kelowna за Dine In-это тот шрифт, который я ищу. Я сделал этот дизайн некоторое время назад и не могу…

Заставьте ImageMagick распознать шрифт

Я играл в генерацию изображений на ImageMagick на Ubuntu 9.10. Я хочу, чтобы он мог распознать шрифт, чтобы я мог назвать его nickname. Я могу найти список шрифтов, которые распознает ImageMagick,…

Python Тессеракт не может распознать этот шрифт

У меня есть этот образ: Я хочу прочитать его в строку, используя python, что, как я думал, будет не так уж сложно. Я наткнулся на tesseract, а затем на оболочку для скриптов python, использующих…

Как правильно использовать шрифт Ubuntu

Я попытался использовать шрифт Ubuntu на своей странице, добавив ссылку: <link rel=stylesheet type=text/css href=http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin>…

JQuery, как распознать правильный $(this) из if statement?

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

Пользовательский шрифт штрих-кода?

Используя iReport 2.0.2. У меня есть шрифт штрих-кода, который я хотел бы использовать, но первая проблема заключается в том, что он не включен в iReport. Я попытался обойти эту проблему, используя…

Помогите распознать шрифт

Кто-нибудь знает, какой шрифт используется в тексте BLOG BUSINESS на этой странице- http://rockablepress.com/books/blog-business /

Как распознать прикосновение на главном экране

Я очень новичок в android. Я просто хочу знать, как я могу распознать прикосновение на экране телефона android. До сих пор то, что я сделал, создало приложение, и на этом представлении приложения я…

Шрифт не применяется

как заставить Chrome распознать мой код — #header {font-size:500%; font-family: Arial rounded MT bold;} Он распознает размер, но не шрифт. IE и Firefox производят правильный источник

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




Опубликовано: 2021-08-16

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

По теме: Как узнать количество страниц на сайте?

Шрифты и сайты

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

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

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

Метод 1 — просмотр исходного кода страницы

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

  • Откройте веб-сайт в Chrome или в своем любимом браузере.
  • Щелкните правой кнопкой мыши и выберите в контекстном меню опцию «Просмотр источника страницы».

Просмотреть исходный код страницы

  • На новой открывшейся странице нажмите «Control + F» в Windows или «Command + F» в Mac.
  • Введите «шрифт» в поле поиска и нажмите Enter, чтобы найти слово в исходном коде.
  • Если на веб-сайте используются шрифты Google или любые другие сторонние шрифты, вы можете найти соответствующие URL-адреса шрифтов в виде таблиц стилей CSS. Вот как это выглядит в исходном коде страницы:

Файлы шрифтов Google в исходном коде

  • Как видите, используются два семейства шрифтов с сайта fonts.googleapis.com, который является API для сервера Google Fonts.
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet">
  • С помощью этой информации вы можете найти название семейства шрифтов, используемого на сайте.

Метод 2 — проверьте с помощью инструментов разработчика

Если на веб-сайте не используются сторонние шрифты, вы не увидите никаких таблиц стилей, включенных в исходный код страницы. В таком случае веб-сайт должен использовать либо пользовательские шрифты, либо использовать системный стек в таблице стилей веб-сайта. Самый простой способ изучить таблицу стилей веб-сайта — просмотреть исходный код любого элемента HTML с помощью консоли разработчика браузера. Вы можете найти шрифт, используемый на веб-сайте, с помощью свойства CSS font-family.

  • Когда вы находитесь на веб-странице, нажмите F11 в Windows для перехода в консоль разработчика. Если вы работаете на Mac, щелкните правой кнопкой мыши веб-страницу и выберите «Проверить» или «Проверить URL-адрес», чтобы открыть консоль разработчика.

Проверить элемент

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

Сведения о шрифте во всплывающем окне

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

Найти шрифт элемента

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

Файлы шрифтов CSS

Метод 3 — проверьте с помощью инструментов тестирования скорости страницы

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

  • Перейдите к инструменту измерения скорости страницы Pingom.
  • Введите URL-адрес веб-страницы, на которой вы хотите найти семейство шрифтов.
  • Нажмите кнопку «Начать тест» и подождите несколько секунд, чтобы получить результаты.

Начать тест в Pingdom

  • Прокрутите вниз и проверьте раздел «Запросы файлов».
  • Если на веб-сайте используются файлы шрифтов (собственные или внешние), вы можете найти HTTP-запрос в этом разделе.

Запросы файлов шрифтов в Pingdom

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

Метод 4 — используйте расширение браузера Chrome

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

  • Откройте браузер Chrome и перейдите по URL-адресу команды «chrome: // apps /».
  • Вы найдете список приложений и щелкните Интернет-магазин, чтобы перейти в раздел расширений Интернет-магазина Chrome.
  • Введите «поиск шрифта» в поле поиска, чтобы отфильтровать релевантные расширения.
  • Вы найдете несколько расширений и нажмите «Какой шрифт — найти шрифт».

Найдите расширение Chrome для шрифтов

  • На следующем экране вы можете найти все сведения о расширении и нажать кнопку «Добавить в Chrome».

Добавить расширение в Chrome

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

Добавить расширение в Chrome

  • Теперь откройте веб-страницу, на которой вы хотите найти шрифт. Щелкните значок головоломки рядом с адресной строкой браузера и выберите расширение «Какой шрифт — найти шрифт».

Нажмите Расширение, чтобы включить

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

Получить сведения о шрифте во всплывающем окне

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

Выход из расширения

Заключительные слова

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

Что это за шрифт?


«Как узнать шрифт?» или определение шрифтов


Многие сталкивались с проблемой «Что это за шрифт?». Рассмотрим несколько путей распознавания названия шрифта.


What The Font — один из самых известных ресурсов. Он помогает найти шрифт по загруженной в него картинке с текстом написанным данным шрифтом. 

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

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





2. Далее, когда вы уже загрузили нужную картинку, проверьте правильность определения глиф (это образ знака, к примеру один знак может относиться к нескольким глифам: капительная «а», строчная «а», или строчная «а» с росчерком), и только после этого нажимайте Далее.





Если выдаётся слишком много вариантов шрифтов, то можно сократить этот список увеличив размер картинки (max: 360х275).

Иногда WhatTheFont не может определить ваш шрифт, то могут помочь следующие ресурсы:


identifont.com


linotype.com


bowfinprintworks.com


fonts.com


Если вы хотите определить шрифт на каком либо сайте то, можно выделить ту самую часть текста и просмотреть её код. Это можно сделать нажав правую клавишу мыши и пункт “Просмотреть код элемента”.


Пример как определить шрифт на сайте


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


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

Похожие статьи:

Не пропустите:



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

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

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


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


Определяем шрифт на фото с помощью 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) в любом браузере. Или вы можете открыть инструменты разработчика из заголовка «Просмотр» в верхнем меню. Вы также можете использовать сочетания клавиш, чтобы открыть окно инспектора, хотя они различаются от браузера к браузеру.

Как открыть функцию INSPECT

Сочетание клавиш (Windows 10)

5 Меню браузера (Windows 10)

Настройки> Дополнительные инструменты> Инструменты разработчика

Инструменты> Веб-разработчик> Переключить инструменты

Настройки> Дополнительные инструменты> Инструменты разработчика

ПРОСМОТР> Разработчик> Проверить элементы

ИНСТРУМЕНТЫ> Веб-разработчик> Инспектор

РАЗРАБОТКА> Показать веб-инспектор

Настройки> Дополнительные инструменты> Инструменты разработчика

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

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

Если описанные выше шаги кажутся непосильными, не бойтесь! Существуют расширения для браузеров 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, как вы видели, позволяет просматривать свойства любого элемента на странице. Но если вы хотите видеть шрифт изображения на веб-сайте, вы не сможете увидеть это с помощью инспектора.

Добавить комментарий

Ваш адрес email не будет опубликован.