TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

9 способов определить шрифты из изображений и веб-текста и как загрузить шрифты на свой сайт

4 887

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

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

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

… а что если нет времени ждать?

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

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

Продолжайте читать, и я расскажу, как это делается!


Шаг 1 – Найти шрифты из изображений с помощью таких инструментов, как:

1.

What Font Is

Что такое шрифт

«What Font Is» – самый популярный сервис для определения шрифта по фотографии или скриншоту. Все, что вам нужно, это загрузить изображение (или указать его URL), и программа отобразит наиболее похожие варианты, доступные для покупки на MyFonts. По словам создателей What Font Is, требования к изображению:

  • четко горизонтальный текст
  • высота буквы не менее 100 пикселей
  • буквы не касаются друг друга
  • не более 50 символов

2.

WhatTheFont

Что за шрифт

WhatTheFont – еще один известный ресурс для определения шрифтов в качестве своего предыдущего конкурента. На первый взгляд кажется, что шаги обслуживания похожи, но на самом деле это не так. С WhatTheFont все немного сложнее: конечный результат напрямую зависит от качества изображения вашего шрифта. Кстати, программа не оптимизирует картинку автоматически.

И хотя по сравнению с What Font Is этот ресурс имеет более слабую коллекцию шрифтов, у вас все еще выше вероятность успешного распознавания шрифтов. 


3.

Font Squirrel

Шрифт Белка

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

Кроме того, не забудьте просмотреть предлагаемые предложения Font Squirrel – некоторые из них действительно «горячие», поэтому не упустите их.


4.

Matcherator

Matcherator

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

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


5.

FontFaceNinja

FontFaceNinja на данный момент является бесспорным лидером. Расширение не только помогает вам найти заголовок шрифта на веб-сайте (не по изображению), но также дает вам возможность попробовать писать этим шрифтом. Более того, он позволяет вам скачать понравившийся шрифт!

В дополнение к красоте и удобству этого расширения, FontFaceNinja имеет своего рода волшебную кнопку (маску), которая скрывает всю рекламу на странице, что позволяет вам наслаждаться только шрифтами. Расширение полностью бесплатно и работает с Chrome и Safari.


6.

Type Sample

Тип Образец

Это еще одно полезное расширение, к сожалению, только для пользователей Chrome. Он работает аналогично предыдущему варианту, хотя Type Sample может похвастаться некоторыми классными уникальными функциями. Особого внимания заслуживает возможность «поиграть со шрифтами» в режиме реального времени. Когда вы щелкаете по выделенному текстовому блоку, вы можете изменить размер шрифта, посмотреть на диаграмму, ввести собственный текстовый пример и попробовать еще несколько хитростей, недоступных для других сервисов.

Входя в учетную запись Type Sample на Twitter, вы можете создать свою собственную коллекцию шрифтов и / или посмотреть чужую.


7. WhatFont

WhatFont

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


8. Typ.io

Typ.io

Typ.io – идеальный выбор для максималистов, отказывающихся выполнять дополнительные действия, или тех, кому просто безразличны стили шрифтов и цветовые коды. После установки расширения вы увидите кнопку с буквой «T» в нижнем углу браузера. Если вы нажмете эту кнопку, она отобразит названия всех шрифтов, указанных на странице, в отдельном столбце. Чтобы узнать, где находится шрифт, просто нажмите на его название.


9.

Fount

источник

Fount – отличный плагин для определения шрифтов на сайтах, используемых многими профессиональными веб-дизайнерами. Чтобы он работал, нужно добавить сайт в закладки и нажать на него. Курсор станет крестиком, поэтому при нажатии на шрифт вы увидите окно с его заголовком, размером в пикселях, весом и стилем. Чтобы выключить режим Fount – нажмите его еще раз. Расширение работает с такими браузерами, как Safari, Chrome, Firefox и IE8 +.


Шаг 2 – Предварительный просмотр вашего шрифта.

Теперь, когда вы, скорее всего, нашли тот потрясающий шрифт, который видели где-то еще, вам необходимо выяснить, будет ли этот шрифт соответствовать стилю вашего сайта. «Вы никогда не узнаете, если не попробуете» – возможно, вы уже подумали об этом, и вы были бы на 100% правы. Но загрузка каждого любимого шрифта на ваш сайт будет пустой тратой денег, верно?

Хорошей новостью является то, что если вы являетесь пользователем Chrome, вы можете получить предварительный просмотр любого шрифта. Расширение Google Font Previewer позволяет тестировать их на веб-сайте, не переходя в режим редактирования. Вы также можете пометить шрифты, которые вы предварительно просматриваете, и отметить их как избранные в вашем приложении.


Шаг 3 – Загрузите пользовательский шрифт на ваш сайт.

Итак, вы выбрали правильный шрифт, на который так долго охотились, и теперь пришло время внедрить его в свой собственный дизайн сайта. Наиболее распространенный подход к добавлению пользовательского шрифта на веб-сайт заключается в использовании правила CSS FontFace .

  1. Загрузите шрифт в соответствующем формате (.ttf или .otf)
  2. Создайте WebFont Kit для кросс-просмотра с помощью генератора Webfont
  3. Загрузите этот комплект на свой сайт, используя свой FTP или файловый менеджер
  4. Обновите ваш файл CSS
  5. Используйте собственный шрифт в своих декларациях CSS

Если у вас есть сайт на WordPress, с плагином для типографики все может стать еще проще – вам больше не нужно будет возиться с кодом. Или вы можете добавить эти шрифты в свою тему вручную, используя файл functions.php.


Bright Calligraphy PSD Font

Яркая каллиграфия PSD шрифт.

Если вы ищете современный, гладкий шрифт, то это именно то, что вам нужно. В него входят потрясающие персонажи в неоновом стиле. Идеально подходит для дизайна логотипов, пакетов или других рекламных материалов. Вы получите набор из 81 PSD (4000×4000 px) и PNG файлов (2000×2000 px). Вы можете легко комбинировать отдельные буквы для создания нужного слова. Более того, эти буквы легко настраиваются – вы можете изменить их цвет. Он также поставляется со шрифтом Golden Bush (файлы OTF и TTF, которые вы можете легко установить и использовать). Он снабжен темной текстурой фона. В целом, это привлекательный набор букв в неоновом стиле.


Янтарный вкус

Янтарный вкус шрифта.

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


Курение гарнитура

Курение шрифта + иллюстрация шрифта.

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


Шнурки

Шнурки

Если вам нужен хороший шрифт в стиле рукописного ввода, то это именно то, что вам нужно. Этот шрифт имеет две версии – с эффектом «шнурка» и без него. Эффект «шнурка» добавляет специальную текстуру, которая добавляет прозрачные участки. Это может сделать ваш дизайн более интересным. Чистая версия не имеет такого эффекта, но все равно выглядит потрясающе и чисто. Он поставляется с 8 штрихами, лигатурами и альтернативами, чтобы вы могли сделать свой дизайн более сложным и интересным. Он поставляется в виде файлов OTF и TTF, поэтому его легко установить и использовать. Он содержит только латинские символы.


Этикетка виски

Виски этикетка + элементы дизайна шрифта.

Это идеальный вариант, когда вы ищете шрифт в классическом стиле. Это может быть здорово использовать при разработке упаковки, этикетки или логотипа. Это сделает ваш дизайн роскошным и роскошным. Этот шрифт поставляется в файлах OTF и WOFF, поэтому вы можете легко установить и использовать их. Он снабжен четырьмя файлами EPS 10, которые демонстрируют, как его можно использовать. Векторные файлы включают в себя декоративные рамки, ленты и гранж текстуры. Шрифт включает цифры и знаки препинания. Если вы ищете шрифт, который может выделить ваш дизайн – получите его прямо сейчас.


Агресс

Agress Font.

Вот современный, агрессивный шрифт, который может сделать ваш дизайн привлекательным. Этот шрифт в стиле граффити идеально подходит, если вы хотите, чтобы ваш дизайн выглядел нестандартным и сложным. Это чистый и хорошо продуманный. Этот шрифт предоставляется в виде файлов OTF и TTF, которые можно легко установить и использовать. Он поставляется с бонусными абстрактными изображениями – шестью 6000×6000 PSD и JPG файлами. Это многоязычный шрифт, поэтому у вас нет никаких ограничений. Все персонажи выглядят динамично, поэтому они делают дизайн более интересным и сложным. Поэтому, если вы хотите создать что-то, на что люди обратят свое внимание – этот шрифт – то, что вам нужно.


Внутри коробки

Внутри BOX Font & Patterns Font.

Вы устали от всех этих стандартных шрифтов? Если да, то этот шрифт для вас. Он выглядит потрясающе и сделает ваш дизайн концептуальным и ярким. Этот шрифт имеет 2 стиля. Он включает в себя широкие символы, которые выглядят современно и концептуально. Есть также тонкие персонажи, которые выглядят очень элегантно и чисто. Это приходит как файлы OTF и TTF. Они просты в использовании. Кроме того, он снабжен файлами шаблонов. Шаблоны могут быть настроены для получения нужного вам вида. Включает только латинские буквы. Этот шрифт может быть отличным, чтобы сделать ваш дизайн несколько футуристическим.


Шрифт Pin Up

Закрепить шрифт и рисунок шрифта.

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


Мегаватт

Мегаватт Шрифт.

Этот красивый современный каллиграфический шрифт заставит ваш дизайн выглядеть мощным. Это замечательно, если вам нужно разработать логотип, постер, привлекательное изображение и т.д. Он сочетает стиль рукописного ввода с некоторыми острыми углами. Эта комбинация делает этот шрифт таким мощным. Включает несколько лигатур. Он поставляется в виде файлов OTF и TTF. В качестве бонуса вы получите высококачественный 3D-рендеринг гитарного усилителя (разрешение этого PSD-файла составляет 6000×4000 пикселей. Это многоязычный шрифт (включает символы Западной Европы). В целом, если вы хотите, чтобы ваш дизайн качался, тогда этот шрифт вам нужен.


Augustine

Августин |  Modern Script Font.

Вот современный элегантный скрипт шрифта. Он очень чистый и гладкий, поэтому идеально подходит для элегантного дизайна. Этот шрифт отлично подходит для создания приглашений, визитных карточек, меню, листовок, плакатов и т.д. Он имеет различные функции, такие как стилистические наборы, стилистические альтернативы, контекстная альтернатива, лигатура и т.д. Он поставляется с косой чертой, поэтому вы можете добавлять специальные штрихи к вашему дизайну и сделать его сложным. Он предоставляется в виде файлов OTF и TTF – вы можете легко установить и использовать его. У него много глифов. Все символы имеют код PUA – вы можете получить к ним доступ без использования дополнительного программного обеспечения. Это многоязычный, поэтому у вас нет никаких ограничений. Это очень чисто, и это сделает ваш дизайн впечатляющим.


И в завершение…

Иногда лучший способ найти правильный шрифт – это искать красивые примеры и коллекции шрифтов в Интернете. Худшее для графических дизайнеров – видеть красивый шрифт и не знать, как он называется. Но теперь, когда у вас есть девять способов определения шрифтов, вы сможете узнать их названия всего за пару минут … или, может быть, даже быстрее!

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

Источник записи: https://www.templatemonster.com

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