Живые тестовые шрифты в браузере легко с помощью Dragr Font

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

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

Font Dragr предлагает быстрый и простой способ протестировать веб-шрифты в браузерах. Просто перетащите шрифт из вашей коллекции шрифтов на страницу, и шрифт на этой странице автоматически изменит выбранный шрифт. Давайте проверим это.

Рекомендуемое чтение: витрина веб-дизайна с красивой типографикой

Шрифт Dragr разработан Райан Седдон используя правило @ font-face, HTML5 Drag-n-Drop API, а также автономный доступ к applicationCache, что позволяет использовать его без подключения к Интернету после первого посещения.

Он поддерживает различные типы файлов шрифтов, включая TrueType (TTF), OpenType (OTF), масштабируемую векторную графику (SVG) и Web Open Font Format (WOFF), Используя Font Dragr, вы можете проверить шрифты двумя способами:
1. Метод по умолчанию
Посетите FontDragr, затем перетащите n шрифт в любое место на странице. Вы найдете две вкладки: редактор и вкладка Галерея.

редактор Вкладка поможет вам проверить ваши шрифты с точки зрения:

• Сравнение размеров тела
• Оттенки серого
• Размер шрифта
• Образец текста
• Персонажи

Текст на странице полностью редактируемый, поэтому вы можете проверить любой текст, который вы хотите.
Если вам нужны некоторые шрифты для экспериментов, вы можете взять любой из 9 перечисленных вГалерея страница для экспериментов.
2. Использование Bookmarklet
Кроме того, есть букмарклет для использования. Просто перетащите букмарклет на панель закладок, а затем нажмите на нее, пока вы находитесь на веб-странице, которую хотите протестировать. Давайте рассмотрим это с hongkiat.com. На следующем снимке экрана показан сайт, прежде чем мы предпримем действия.
После нажатия на букмарклет появится заголовок (см. Ниже). В текстовом поле «Селектор» вы можете указать элементы HTML, на которых вы хотите протестировать свой шрифт. Селектором по умолчанию является тег p, но вы можете проверить body, h1, h2 и т. Д.
Затем перетащите ваш шрифт в заголовок FontDragr.
Текст, на который влияют, будет автоматически изменен, чтобы отразить шрифт, который вы выбрали для тестирования. На этом снимке ниже измененный шрифт отмечен красной рамкой.
К сожалению, букмарклет не работает на Facebook и на всех сайтах с протоколом HTTPS. Кроме того, отображаемый заголовок может быть скрыт или удален только при перезагрузке веб-страницы.

Кроме того, функция перетаскивания, кажется, хорошо работает только в Firefox 3.6+ и Chrome.
Заворачивать
Если вы когда-либо использовали другие подобные сервисы веб-шрифтов, такие как FontFonter а также FontFriend, вы, вероятно, найдете Font Dragr наиболее полным и простым в использовании. Но не верьте нам на слово, попробуйте и оставьте нам комментарий о том, как приложение работает (или нет) для вас.