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

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

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

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

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

Вот как определить шрифт с помощью инструмента Inspect в вашем браузере.

1. Откройте веб-сайт, который хотите использовать.
2. Выделите текст с шрифтом, который вы хотите идентифицировать, и щелкните его правой кнопкой мыши.
3. Нажмите на Осмотреть из контекстного меню.
4. Когда откроется меню Inspect, нажмите на Вычислено.
5. Прокрутите вниз, чтобы найти Семейство шрифтов раздел. Здесь вы можете найти название и стиль шрифта, а также его размеры.

Если вам нужен более быстрый способ найти шрифт сайта с помощью инструмента Inspect, попробуйте вместо этого следующее:

1. Откройте веб-сайт, который хотите использовать.
2. Нажмите Ctrl + Shift + C (Cmd + Shift + C на Mac).
3. Наведите указатель мыши на текст, чтобы отобразить стиль, размер, цветовой код и поля шрифта.

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

1. Перейти на веб-страницу.
2. Откройте исходный код, нажав Ctrl + Shift + I (Cmd + Shift + I на Mac).
3. Щелкните значок Сеть вкладку, а затем выберите Шрифт таб.
4. Здесь вы увидите список всех шрифтов, используемых на веб-странице.

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

Связанный: Как увеличить или уменьшить размер шрифта в Firefox

Как определять шрифты с помощью расширений браузера

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

Давайте посмотрим на процесс идентификации шрифтов с использованием обоих расширений.

1. WhatFont

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

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

Скачать: WhatFont для Хром | Fire Fox | Сафари (Бесплатно)

2. Поиск шрифтов

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

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

Вот как проверить шрифт с помощью Font Finder:

1. Выделите часть текста на веб-странице.
2. Щелкните его правой кнопкой мыши и выберите Поиск шрифтов из контекстного меню.
3. Выбирать Заменить шрифт на и введите название шрифта. Добавим Калибри и посмотрите, как он меняет шрифт в превью.
4. Если вы хотите сбросить шрифт, обновите страницу.

Скачать: FontFinder для Хром | Край | Fire Fox (Бесплатно)

А как насчет проверки шрифта на изображении?

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

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

1. Если вы еще этого не сделали, загрузите изображение, которое хотите использовать.
2. Импортировать изображение в WhatTheFont.
3. WhatTheFont автоматически обнаружит текст на вашем изображении. Уменьшите или увеличьте рамку кадрирования, чтобы она окружала шрифт, который вы хотите идентифицировать. Ударь кнопка со стрелкой когда закончите.
4. WhatTheFont сопоставит шрифт на изображении со шрифтами в своей галерее и покажет вам тесно связанные шрифты.
5. Если вы не нашли подходящего совпадения сразу, вы можете продолжать нажимать Показать больше результатов чтобы увидеть больше связанных шрифтов.

Связанный: Лучшие сайты бесплатных шрифтов для бесплатных шрифтов в Интернете

Находите шрифты из Интернета и используйте их в своих проектах

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

WhatTheFont и 4 альтернативы поиска шрифтов из изображений

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

Читать далее

Об авторе