Как графический дизайнер, вы когда-нибудь сталкивались с красивым шрифтом, используемым веб-сайтом, который вы хотели бы использовать и в своем проекте?
Ну, трудно определить название шрифта, просто увидев его.
К счастью, существует множество инструментов, которые могут помочь нам определить название шрифта.
Вот пять лучших вариантов, которые вы можете попробовать!
#1 Определите шрифт на сайте с помощью расширения FontFace Ninja
FontFace Ninja — мой любимый инструмент для поиска названия шрифта вместе со стилями, используемыми на веб-сайте. Он даже предоставляет прямую ссылку для покупки или загрузки шрифта, если он доступен бесплатно.
Это расширение для браузера также предоставляет демонстрационное окно, поэтому мы можем ввести любые слова, чтобы увидеть, как оно выглядит. Вы также можете настроить цвет, размер, ширину и многое другое, прежде чем решите выбрать шрифт.
Как использовать FontFace Ninja:
- Скачайте и установите FontFace Ninja для Хром, Fire Foxили же Сафари
- Откройте любой веб-сайт
- Щелкните значок FontFace Ninja на панели браузера.
- Наведите указатель мыши на текст
- Наконец, вы получили название шрифта и ссылку для скачивания или покупки.
#2 Найдите название шрифта веб-сайта с помощью WhatFont
Как следует из названия, это расширение для браузера предназначено для идентификации шрифтов, используемых на веб-сайте. FontFace очень похож на FontFace Ninja, он может определять имя шрифта, семейство шрифтов, размер, стиль, высоту, ширину, толщину и цвет, но имеет более минималистичный интерфейс. Он также предоставляет прямую ссылку для получения бесплатного шрифта после его обнаружения, но для премиального шрифта он не дает никакой ссылки.
Как использовать WhatFont:
- Скачайте и установите WhatFont для Хром или же Сафари
- Перейдите на веб-сайт, на котором вы хотите узнать шрифт
- Щелкните значок WhatFont, появившийся на панели браузера.
- Наведите указатель мыши на веб-страницу и щелкните ее, чтобы получить дополнительную информацию
- Если шрифт доступен бесплатно, расширение предоставит ссылку для скачивания.
#3 Определите шрифт без расширения с помощью Fount
Fount — это веб-инструмент, созданный Натаном Фордом, чтобы помочь пользователям быстро определить название шрифта веб-сайта. Инструмент предоставляет только базовую информацию, такую как имя шрифта, стиль, размер и вес. Для шрифта не будет прямой ссылки для скачивания, поэтому вам будет дано имя в качестве подсказки, чтобы найти ссылку для скачивания самостоятельно.
Как использовать Фонт:
- Перейдите на страницу сайта, где вы хотите узнать название шрифта.
- Откройте новую вкладку, посетите https://fount.artequalswork.com/
- На странице Fount нажмите и перетащите кнопку «Fount» на вкладку веб-сайта.
- Название шрифта будет отображаться в правом верхнем углу веб-страницы.
Обновлять: Fount больше не работает в современных браузерах.
#4 Определить шрифт на снимке экрана веб-страницы с помощью WhatTheFont
WhatTheFont — это онлайн-инструмент для распознавания шрифта на изображении, в том числе на снимке экрана веб-страницы. Все, что вам нужно, это сделать снимок экрана, загрузить страницу со снимком экрана на веб-сайт WhatTheFont и позволить ему изучить шрифт по его изображению.
После завершения вы получите название шрифта вместе со ссылкой для скачивания или покупки. К сожалению, этот сервис не так точен по сравнению с расширениями браузера, как я упоминал в № 1 и № 2.
Как использовать WhatTheFont:
- Захват страницы веб-сайта с помощью вашего любимого средства захвата экрана
- Загрузите скриншот на WhatTheFont страница
- Дождитесь завершения процесса распознавания
- Возьмите шрифт (если есть)
#5 Получить название шрифта с сайта CSS
Причина, по которой я поместил этот метод в конец списка, заключается в сложности беглого просмотра кода HTML и CSS. Современные веб-страницы содержат сценарий CSS, который действует как «стиль» Интернета. Он также включает конфигурацию шрифта, представленную строками сценария. Ее легко читать как веб-разработчику, но она сбивает с толку людей, не имеющих ни малейшего представления о веб-программировании.
Как получить имя шрифта из CSS:
- Перейти на нужный сайт
- Щелкните правой кнопкой мыши пустое место
- Выбирать Проверить элемент или просто нажав CTRL+SHIFT+I
- Вы увидите новое поле, содержащее скрипт
- Нажимать CTRL+F и введите «семейство шрифтов»
- Формат обычно такой: «бла…бла…семейство шрифтов: ‘имя шрифта’…бла…бла”
Примечание: Не существует определенного способа узнать имя шрифта из CSS. Таким образом, этот метод может работать не для всех веб-сайтов.
#6 Определите название шрифта на веб-сайте с помощью WhatRuns
Я нашел еще одну полезную надстройку для браузера под названием WhatRuns. Он определяется как инструмент, помогающий разработчикам понять материалы/услуги, используемые на веб-сайте, включая название шрифта. Если вам интересно, WhatRuns доступен бесплатно в Google Chrome и Mozilla Firefox.
Как определить имя шрифта с помощью WhatRuns:
- Установите WhatRuns на Хром или же Fire Fox.
- Зайдите на любой веб-сайт, на котором хотите узнать название шрифта.
- Щелкните значок WhatRuns и дождитесь завершения процесса загрузки.
- Теперь вы видите имя шрифта, которое было определено инструментом
Итак, это лучший способ узнать название шрифта веб-сайта. На мой взгляд, расширение для браузера по-прежнему обеспечивает наиболее удобный способ быстрой идентификации имен шрифтов.
Что вы думаете? Какой ваш любимый инструмент для определения названия шрифта?
Если вы собрали все шрифты и хотите установить их на свой компьютер, ознакомьтесь с трюк для установки нескольких файлов шрифтов в одно мгновение.