Обзор интернета - Lite Веб-мастеру Графика Игры, Спорт Программы Рецепты Время Рождество Библия
Социальные аккаунты Контакты Теги Собственники Используются География Приложения


Шрифты



Calligraphr - calligraphr.com
Создаем свой рукописный шрифт.
Подробнее

Создаем свой рукописный шрифт.

Как это работает?

  1. скачиваем шаблон в PDF или PNG,
  2. используя бумагу, сканер и редактор забиваем таблицу своими рукописными буквами,
  3. загружаем результат на сайт,
  4. задаем имя шрифту и формат TTF или OTF (по сути разницы тут нет).
Myfonts - myfonts.com/WhatTheFont
Определение шрифтов.
Подробнее

Сервис по распознанию шрифта.
Сайт на английском, но скорее всего всем будет понятно. Шрифт нужен также на латинице.
Заходим, Upload an image file: загружаем картинку с текстом нужного шрифта (желательно приличного качества с фоном одного тона.
Сайт разбивает текст на буквы и старается угадать буквы, предлагает свою версию, мы соглашаемся с его выбором или корректируем, пишем правильные буквы или символы, а затем получаем список шрифтов, на которые ваш похож.

TypeGenius - canva.com/font-combinations
Поиск идеальной комбинации шрифтов для вашего проект.
Identifont - identifont.com
Определение шрифтов.
Подробнее

Сайт задаст несколько напр. "какой хвостик у Q?".
Затем выдаст диаграммы, которые помогут выбрать ответ.

Adobe Edge Web Fonts - edgewebfonts.adobe.com
Бесплатный и легкий способ начать использовать веб-шрифты.
Подробнее

Бесплатный и легкий способ начать использовать веб-шрифты.

Таблица символов Юникода - unicode-table.com
Лучший сайт по Unicode.
Подробнее

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

Как это работает

Выбрав нужный символ можно нажать и получить полное название, номер в Юникоде и HTML-код.

Можно выбрать отдельные алфавиты (более 100) или отдельные наборы, напр. эмодзи, стрелки, знаки валют, греческие буквы, звездочки, сердечки.

Инструменты

Могут вполне пригодиться инструменты для конвертирования текста. К слову, есть сайты, на которых все, что есть - это один такого рода инструмент.
  1. HTML-кодировщик - переводим текст в символы HTML, чтобы на всех сайтах корректно отображались и наоборот - переводим символы HTML в нормальный текст, - HTML-кодировщик
  2. Переводим текст в символы Юникод и наоборот - \u042e\u043d\u0438\u043a\u043e\u0434,
  3. Переворачиваем текст - ɯɔʞǝɯ wǝɐʚиҺɐdоʚǝdǝu,
  4. Генератор таблицы символов Юникода - выбираем диапазон, формат вывода и получаем.
Все выполнено легко, стильно, в высшей степени удобно.
CharMap - charmap.ru
Таблица специальных символов онлайн.
Подробнее

Таблица специальных символов онлайн.
Жмем на символ и он в буфере обмена. Можно насобирать несколько и скопировать за раз.
А потом вставить, где хотели.

Fontello - fontello.com
Оповещение Google карт об обновлениях.
Подробнее

Онлайн генератор шрифтов с иконками в формате Webfont.

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

Fontello позволяет легко решить нашу задачу.
Можно выбрать из предложенного. Иконок достаточно много и очень высокого качества, к тому стиль единый и они будут сочетаться.
Затем из выбранного нам сгененрируется шрифт и создаст файл с CSS классами.
Все берем и прикручиваем к нашему сайту.

Fontello - fontello.com
Оповещение Google карт об обновлениях.
Подробнее

Онлайн генератор шрифтов с иконками в формате Webfont.

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

Fontello позволяет легко решить нашу задачу.
Можно выбрать из предложенного. Иконок достаточно много и очень высокого качества, к тому стиль единый и они будут сочетаться.
Затем из выбранного нам сгененрируется шрифт и создаст файл с CSS классами.
Все берем и прикручиваем к нашему сайту.

Fonts4Web - fonts4web.ru
Прикручиваем сами.
Подробнее

Сервис по внедрению шрифтов на сайт.
Он отличается от шрифтов Гугла.
У Гугла мы копируем код и вставляем на сайт, сам же шрифт берется с Гугла.
Здесь же мы выбираем шрифт, скачиваем и загружаем на свой сайт, и берем код для связывания шрифта на нашем сайте с нашим сайтом. Может указать папку, в которой будем держать шрифты на сайте и тогда получим код с правильным адресом.

Font Squirrel - fontsquirrel.com/fontface/generator
Шрифты на сайт с Font Squirrel.
Подробнее

  1. Загружаем понравившийся нам шрифт на сайт.
  2. Подтверждаем, что имеем право свободно пользоваться выбранным шрифтом (если шрифт с нашего сайта, то можете, они все бесплатные).
  3. Получаем архив с
    • генерированными шрифтами для различных браузеров и мобильников,
    • сгенерированным файлом стиля CSS3,
    • код страницы с примером использования шрифта.
Fontstorage - fontstorage.com
Коллекция бесплатных шрифтов для ваших сайтов.
Подробнее

Коллекция бесплатных шрифтов для ваших сайтов.

Несколько напоминает Google Шрифты. Можно скачать или взять код и прикрутить на сайт.
Коллекция отличается от Гугловской, потому будет интересно для внимания.

Интуитивно понятный интерфейс, настраивается в режиме реального времени.
Очень удобно и интересно.

Fontstruct - fontstruct.com
Создание рукописного шрифта.
Подробнее

Здесь можно легко создавать свой шрифт.
Все просто, смотрим ролик. Ролик на английском, но все наглядно.

Glyphter - glyphter.com
Создать шрифт иконок для сайта.
Подробнее

Сайт для собрания шрифт из предложенных иконок или своих SVG.

Как это работает?

  1. Заходим на сайт,
  2. перетаскиваем иконки из окна справа в главное поле,
  3. на полях указаны символы или латинские буквы, которым потом будут соответствовать символы в нашем шрифте.
  4. если кликнуть на само поле, то можно туда закачать нашу SVG картинку.
  5. под финал жмем на дискету и сохраняем наш шрифт.
Glyphy - glyphy.io
Копируем и вставляем символы финансовой тематики.
Kern Type - type.method.ac
Игра шрифт.
Подробнее

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

easyASCII - easyascii.com
Сервис, чтобы можно было быстро скопировать ASCII символы.
Подробнее

Сервис, чтобы можно было быстро скопировать ASCII символы.

What font is - whatfontis.com
Определение шрифтов.
Подробнее

Сервис по распознанию шрифта.
Очень похож на описанные выше.

Ограничения

  1. на загрузку картинки - 1.8 Mb;
  2. одной строки текста достаточно;
  3. формат картинки jpg, gif или png;
  4. можно задать фильтр, только бесплатные, только платные или все.

ВСЕ СЛУЖБЫ GOOGLE

Google Шрифты - fonts.google.com
Прикручиваем сами.
Подробнее

Сервис по внедрению шрифтов на сайт.
Русской версии нет, но есть русские шрифты (кириллические).

Преимущества

Шрифты находятся на сервере Google, а не у вас на сайте. Что экономит время и увеличивает скорость загрузки.

Что делать?

Внимание, сервис развивается, растет количество шрифтов и возможности. Потому возможны на сайте изменения.
  1. Script: - выбираем Cyrillic или Cyrillic Extended

  2. Вверху в Preview Text: можно ввести свой текст, выставить размер (Size:) и отсортировать шрифты по алфавиту, популярности ... Я выбрал по популярности. Мы ищем самый лучший шрифт из менее популярных. Менее популярный - значит реже его используют и он будет оригинальнее.

  3. Шрифт подбираем для заголовка (Sentence) или текста (Paragraph), в зависимости от того, как хотим использовать. Красивый шрифт для заголовка может быть не читабельным в тексте.

  4. Выбираем шрифт, который нам больше всего подходит Add to Collection и Quick-use.

  5. Берем код, который надо будет разместить в <HEAD>. Он в 3. Add this code to your website:, это ссылка вроде
    <link 
    href='https://fonts.googleapis.com/css?family=PT+Sans&subset=cyrillic' 
    rel='stylesheet' type='text/css'>
  6. Возвращаемся и жмем внизу на синем поле Review (может придется открыть) и выбираем начертание (жирный, курсив ...), если шрифт это позволяет.
Во вкладке Test Drive гуляем по меню в правой колонке. Там много можно настроить, описывать будет сложнее, вы все сможете визуально видеть и выбрать, подогнать. Внизу основного поля на сером фоне будет код вроде:

 font-family: 'Ubuntu Condensed', sans-serif;
  font-style: normal;
  font-weight: 400; font-size: 13px;
  text-transform: none;
  text-decoration: none;
  letter-spacing: 0em;
  word-spacing: 0em; line-height: 1.4;

Копируем его и вставляем куда нам надо в CSS. font-style: normal; font-weight: 400; font-size: 13px; text-transform: none; text-decoration: none; letter-spacing: 0em; word-spacing: 0em; line-height: 1.4;

Копируем его и вставляем куда нам надо в CSS.

РАССЫЛКА

Beautiful Web Type - hellohappy.org/beautiful-web-type
Интересные примеры использования шрифтов с Google.

САМЫЕ ПОЛЕЗНЫЕ САЙТЫ И ПРИЛОЖЕНИЯ

ℂ◉℗⒴ ℘ⓐṨͲℰ Ⓒℌ◭ℝ◬ℂ⒯℮ℛ - copypastecharacter.com
Копируем специальные символы, которых нет не на клавиатуре.
Подробнее

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


Print Friendly and PDF





ВСЕ ТЕГИ
Связанные темы:
Шрифты WEB-шрифты Кодировка Клавиатура Определение шрифтов





Подать статью
Рассылка
О нас

Почта

Графика

Шрифты
Логотипы
Брендбуки
Пиктограммы
Геральдика

Популярное

Уровень сайта
Регистрация сайта
Как сделать сайт
1 место на Google
Переводчики Онлайн
Пароль

Топ интернета

Ph4 в социальный сетях, рассылки и контакт

©2005-2020, Веб-студия Ph4 - Каталог интернета пользователю, веб-мастеру и дизайнеру v. 5.3