Вполне естественно быть очень впечатленным шрифтом, который использует веб-сайт, и начать задаваться вопросом, как определить, что это за шрифт. Например, вы новичок в CodeWatchers и вам действительно нравится шрифт, который мы используем на нашем веб-сайте, вы, вероятно, захотите идентифицировать этот шрифт. Вот о чем этот урок. Фактически, мы собираемся рассмотреть несколько методов определения шрифта, который вы видите на любом веб-сайте.
Почему шрифты имеют значение?
Шрифты играют очень важную роль в улучшении работы вашего сайта. Важно привлечь внимание пользователя отличной читабельностью и стилем шрифта. Шрифты также играют огромную роль в том, чтобы читатель чувствовал себя комфортно и оставался сосредоточенным.
Для вышеуказанных целей хорошо иметь список этих шрифтов, чтобы в дальнейшем использовать их на вашем веб-сайте или для клиента.
Как определить шрифты с помощью Inspector Tool
Каждый браузер содержит инструмент инспектора, с помощью которого мы можем легко определить шрифт веб-сайта. Это один из самых простых и простых способов узнать о шрифте веб-сайта.
Создавайте потрясающие сайты
С лучшим бесплатным конструктором страниц Elementor
Начать сейчасВо-первых, вам нужно перейти на страницу, содержащую шрифт, который вы хотите идентифицировать. Затем щелкните страницу правой кнопкой мыши и в появившемся меню нажмите «Проверить».
Если вам нравятся ярлыки, вы также можете попробовать ctrl + shift + I для Windows и Linux и cmd + shift + I для IOS, чтобы напрямую открыть панель проверки.
На панели проверки найдите текст, шрифт которого вы хотите определить. Он автоматически выделится, когда вы дойдете до соответствующего HTML-элемента.
Затем вы можете проверить семейство шрифтов, перейдя на вкладку Computed.
Здесь вы сможете определить заголовок и стиль шрифта.
Как найти шрифты с помощью расширений браузера
Если вы считаете, что описанный выше метод сложен, им могут помочь расширения браузера. Есть несколько расширений для браузера, которые помогут вам добиться желаемых результатов еще быстрее.
1. Фонтанелло
С помощью этого расширения вы можете легко узнать почти все детали шрифта, просто щелкнув правой кнопкой мыши текст во время просмотра. Это бесплатное расширение, доступное в Firefox и Chrome.
2. WhatFont
С помощью WhatFont вы можете легко определить шрифт, просто наведя на него курсор. Это самый тонкий способ определить понравившийся шрифт. WhatFont доступен в Internet Explorer, Firefox, Chrome и Safari.
3. CSS Peeper
CSS Peeper специально разработан для дизайнеров, так как он также помогает определять стиль CSS различных элементов. Однако этот инструмент доступен только для Chrome.
Этот инструмент помогает найти гораздо больше информации, которая важна для дизайнеров и разработчиков. Однако, если вы не один из них, мы рекомендуем вам попробовать первые два варианта.
Как управлять шрифтами с помощью плагинов
Возможно, вам будет удобно иметь в WordPress инструмент, который можно использовать для управления шрифтами. Вот ресурсы, которые вы можете использовать для этого.
Плагин шрифтов | Типография Google Fonts
В настоящее время библиотека Google шрифты содержит 998 уникальных шрифтов. Плагин Fonts позволяет легко использовать любой из этих шрифтов на вашем веб-сайте WordPress.
Поскольку нелегко узнать, насколько хорошо будет выглядеть ваш веб-сайт со шрифтом, в этот плагин встроен предварительный просмотр. Как только ваш идеальный шрифт будет найден, вам просто нужно нажать «Сохранить» и сделать изменения общедоступными.
Ключевая особенность
- Предварительный просмотр Live Customizer
- Более 900+ шрифтов Google
- Работает с любой темой WordPress. Кодирования не требуется.
- Легкие обновления в один клик.
- Перевод готов.
- Совместимость с SSL и HTTPS.
- Эффективная загрузка шрифтов
- SEO-дружественный
- Протестировано на PHP7.
- Выборочная загрузка шрифтов.
- Предварительные подсказки ресурсов.
- Разместите шрифты Google локально.
Пользовательские шрифты
Custom Fonts - это плагин WordPress с более чем 100 000 активных установок. Он позволяет вам легко и просто встраивать файлы пользовательских шрифтов на ваш сайт WordPress, чтобы ваш сайт выглядел гораздо более привлекательным для пользователей.
Ключевая особенность
- Работает с Elementor
- Работает с бобрами
- Пользовательские шрифты
- Поддерживает все форматы
- Работает с Астрой
- Легко использовать
Использовать любой шрифт
Использовать любой шрифт - это плагин WordPress, с помощью которого вы можете устанавливать пользовательские шрифты на свой сайт WordPress. Он позволяет использовать любой шрифт, доступный в формате ttf, otf или woff. Кроме того, он работает быстрее и помогает загружать только один формат, а остальную часть можно автоматически собрать и преобразовать в один и тот же формат.
Ключевая особенность
- Быстро и просто
- Поддержка всех основных браузеров
- Преобразование шрифта
- Файл пользовательского шрифта до 25 МБ
- SEO дружественный
- Добавлено свойство font-display
FontPress - менеджер шрифтов Wordpress
Font Press - это небольшой и мощный плагин WordPress с широким спектром настроек и опций, чтобы ваш веб-сайт WordPress выглядел лучше и помогал улучшить взаимодействие с пользователем с помощью настраиваемых параметров шрифта.
Ключевая особенность
- Предварительный просмотр визуальных шрифтов
- Неограниченные шрифты и комбинации
- Полная настройка шрифтов и эффекты CSS3
- Шорткод типографики
- Блок выделения текста
- Интеграция конструкторов без кодов
Это все для этого урока. Мы надеемся, что это руководство поможет вам в поиске потрясающих шрифтов для использования на ваших сайтах или для ваших клиентов.
Чтобы и дальше оставаться в курсе наших публикаций, подписывайтесь на наши номера Facebook и Twitter.
