Я на СТОКАХ)
5 месяцев на стоках. посмотрим, что будет дальше…
Как я делаю шрифт (обещанный рассказ с картинками 
- Автор swetTS
- 23 марта 2020, 23:09
Рассказываю…
Но сразу скажу, возможно что-то делаю не так и может быть более опытные создатели шрифтов укажут на мои ошибки, буду рада)
К теме создания буковок подошла прям совсем недавно, поэтому пользователь еще не опытный) но тема очень интересна для меня!
С удовольствием делюсь своим пока небогатым опытом в данной области!
Покажу на примере нового шрифта. На Шаттере буквы уже висят (продаж пока не было). Но там просто векторный алфавит. А пока готовлю набор для КМ. Там будет три шрифта и вот один из них.
1. Ну первое, конечно, рисую сами буковки. Рисую я в Кореле (лирическое отступление — люблю Корел очень, работать с вектором там одно удовольствие, и есть в нем несколько незаменимых, на мой взгляд, инструментов, аналоги которых в Иллюстраторе для меня неудобны. Но после Корела всегда «переправляю» вектор в Иллюстратор, проверяю пути и сохраняю в епс — ушла далеко))).
Пример отрисовки букв и некоторых символов:
2. Когда все буквы, цифры и символы нарисованы, нужно каждый из них, отдельным файлом сохранить в png:
3. Далее нужна программа для преобразования нарисованных буковок в полноценный шрифт, который можно будет потом установить и пользоваться им в любой программе (волшебство какое-то )
Я использую Font Creator. Запускаем программу, создаем Новый проект, даем название шрифту:
4. Открывается поле с ячейками для символов. Двойным щелчком заходим «внутрь» ячейки для редактирования. Появляется новое окно, в которое вставляем сохраненные png-буквы. Правим размер в соответствии с базовыми линиями и закрываем окошко. Можно и форму подредактировать, если нужно, да и вообще сразу здесь букву нарисовать! (Но я Корел не предам, буду в нем все отрисовывать)))
И так с каждой буквой, цифрой и символами.
После закрытия каждого окна редактирования, поле постепенно заполняется)
В результате вот такая картина:
5. Остается самая малость: экспортировать шрифт
6. Установить шрифт на своем компьютере и радоваться, так, как будто произошло волшебство
Все вроде бы) Если что, спросите)
Надеюсь, пригодится!
Спасибо за внимание)
swetTS
Мама. Фотографирую и рисую)
15 комментариев
- ★ Летта
- ↓
- Отредактирован : 24 марта 2020, 00:18
- swetTS
- ↑
- ↓
- Отредактирован : Только что
- aeleeta
- ↓
- Отредактирован : Только что
- swetTS
- ↑
- ↓
- Отредактирован : Только что
- aeleeta
- ↑
- ↓
- Отредактирован : Только что
- swetTS
- ↑
- ↓
- Отредактирован : Только что
- Топот Котов
- ↓
- Отредактирован : 24 марта 2020, 05:32
2. Когда все буквы, цифры и символы нарисованы, нужно каждый из них, отдельным файлом сохранить в png:
Зачем.
Вы рисуете в векторе (да еще и в кореле), чтобы экспортировать растр. Неужели Font Creator не понимает векторные форматы, например svg? А при импорте что происходит — он их обратно в вектор трассирует?
Я знаю что некоторые рисуют сами буквы в растре, импортируют их в том же png формате например в FontForge (он кстати абсолютно бесплатный), который очень неплохо выполняет автотрассировку, и там же можно немного полученный вектор откорректировать, собрав таким образом необходимый шрифт. Это удобно когда например готовится hand-drawn шрифт и буквы целиком отрисовываются на бумаге. В остальных случаях естественно импортируют в программу-сборщик svg (как пример, в зависимости что поддерживает программа), или рисуют вектор прямо в ней.
В статье полностью отсутствует тема кернинга. А это зачастую половина всей работы со шрифтами.
И кстати стоит упомянуть что программа Font Creator стоит денег: www.high-logic.com/shop/new-licenses.html
- swetTS
- ↑
- ↓
- Отредактирован : 24 марта 2020, 07:51
Зачем.
Вы рисуете в векторе (да еще и в кореле), чтобы экспортировать растр. Неужели Font Creator не понимает векторные форматы, например svg? А при импорте что происходит — он их обратно в вектор трассирует?
- Топот Котов
- ↑
- ↓
- Отредактирован : Только что
- vilion
- ↓
- Отредактирован : Только что
- swetTS
- ↑
- ↓
- Отредактирован : Только что
- Оля
- ↓
- Отредактирован : Только что
- swetTS
- ↑
- ↓
- Отредактирован : Только что
- hellokisdottir
- ↓
- Отредактирован : Только что
- swetTS
- ↑
- ↓
- Отредактирован : Только что
Я на СТОКАХ)
5 месяцев на стоках. посмотрим, что будет дальше…
Как установить новый шрифт
Для того, чтобы шрифт был доступен в Windows и им можно было пользоваться в программах Photoshop, MS Word и других, шрифт необходимо установить.
Сами шрифты распространяются в виде файлов с расширением ttf или otf, бывают и другие форматы шрифтов, но они встречаются редко.
Для установки шрифта одного скачивания файла недостаточно. Необходимо добавить его в директорию шрифтов операционной системы, попасть в эту директорию можно по следующему пути — %SystemRoot%\Fonts.
Установка шрифта в Windows 7
- Скачайте нужный шрифт.
- Откройте файл, например двойным кликом мышкой.
- В появившемся окне Вы увидите небольшое описание шрифта, его начертание и кнопку «Установить». Нажмите ее.
Как устанавить шрифты TTF?
TTF-шрифты используются в большинстве приложений Windows, и многих Mac-программах. Вы можете редактировать и даже создавать свои собственные TTF-шрифты, если они с открытым исходным кодом. Но для этого их нужно установить:
1. Скачайте шрифт;
2. Распакуйте файл;
3. Откройте папку Шрифты в Панели управления;
4. Выберите шрифт и Установить.
К уда установить шрифты ttf?
Всего четыре клика мышкой и вы сможете установить шрифт TTF:
- Скачайте файл с TTF-шрифтом в новую папку.
- Разархивируйте файл.
- Перейдите Панель управления->Шрифты.
- Выберите Файл->Установить шрифт.
Этапы установки шрифтов TTF:
Некоторые пользователи сразу интерессуются, как редактировать шрифты .ttf? Доступно несколько программ, позволяющих вам освоить основную механику шрифта TTF. Как только вы увидите, как много работы идет на создание каждого символа — или «глифа» — вы по-другому посмотрите на все доступные в Интернете TTF шрифты! Но до этого еще далеко. Сначала нужно найти, скачать и установить подходящий шрифт TTF, а потом уже разбираться, как его редактировать.
Далее вы узнаете, как установить шрифты ttf. Чтоб этот процесс был более понятным, разберем его поэтапно:
1. Скачайте подходящий вам шрифт на свой компьютер.
2. Распакуйте скачанный вами файл шрифта ttf (если он в виде архива).
3. До того, как перейти к установке True Type Fonts, необходимо понять, куда установить шрифты ttf? Перейдите в папку Шрифты в Панели управления своего компьютера.
4. Во вкладке Шрифты, выберите Файл–>Установить шрифт.
5. Откроется окно Добавление шрифтов, где вам необходимо указать, откуда и куда кидать шрифты ttf. Выберите путь и нажмите Установить.
Это и все! Весь процесс установки True Type Fonts не займет более 2-3 минут. Главное, чтоб устанавливаемый вами шрифт был надлежащего качества. Именно такие шрифты предлагает TemplateMonster:
Прикручиваем клевые шрифты с помощью @font-face
Теперь кратко, что мы сделали. Свойство font-family указывает на то, как в нашей системе будет называться новый шрифт. Называть можно как угодно, главное чтобы потом можно было вспомнить, что же вы имели ввиду. Свойство src указывает на файл с самим шрифтом. Поддерживаются следующие форматы шрифтов: eot, ttf, otf, svg, woff.
Как видно, многообразие браузеров добавляет радости, так что приведенный выше код придется переписать вот так:
@font-face <
font-family: ‘Tagesschrift’ ;
src: url( ‘tagesschrift.eot’ ); /* IE 5-8 */
src: local( » ), /* sneakily trick IE */
url( ‘tagesschrift.woff’ ) format( ‘woff’ ), /* FF 3.6, Chrome 5, IE9 */
url( ‘tagesschrift.ttf’ ) format( ‘truetype’ ), /* Opera, Safari */
url( ‘tagesschrift.svg#font’ ) format( ‘svg’ ); /* iOS */
>
Сложно? Однозначно, поэтому по ссылке читаем пару интересных штук. А еще для упрощения жизни используем вот этот сервис. Загружаем в него шрифт и он генерит нам css.
Теперь обратимся к горячо любимым мною мобильным устройствам. Как видно по таблице, на андроиде и айфоне все так или иначе поддерживает. Но здесь проблемы возникает по следующей причине. Пока шрифт грузится, а это овер 50к, ВЕСЬ текст будет невидимым, поэтому со шрифтами в мобильных веб приложениях следует быть осторожнее.
На этом с программированием все и теперь пара слов о нескольких сервисах, которые могут быть полезны при работе со шрифтами в вебе.
Во-первых, Font Previewer — сервис от гугла, который позволяет сразу посмотреть как будет выглядеть тот или иной шрифт и получить готовый css стиль.
И не отходя далеко еще одна разработка гугла — Google font API, API позволяющее добавлять любые шрифты в любую разработку.
По аналогии с Google Font API есть еще ряд сервисов — WebInk, Typekit, и Fontslive. Их отличие в том, что они платные.
В качестве посткриптума, отошлю всех к проблеме FOUT. Если кратко, то она заключается в следующем — при указании нескольких шрифтов в свойстве font-family может произойти проблема, что применился второй шрифт из указанных, пока первый еще подгружается. Данная проблема проявляется в Firefox и Opera. Если вы с ней столкнулись, то следует вновь обратиться к гуглу и его js библиотеке WebFont Loader. Ниже пример работы с этим скриптом
Faq как проинсталлировать свои шрифты
С каждой версией ОС Windows число устанавливаемых шрифтов увеличивается при инсталляции операционной системы. Некоторые шрифты, хотя и считаются морально устаревшими, все равно устанавливаются изначально для связи с документами, созданными десятилетия назад.
Шрифты, инсталлируемые в ОС Windows , как правило, отсутствуют в других операционных системах, например, в ОС Linux или ОС Android .
В предыдущих версиях ОС Windows процесс инсталляции шрифтов был довольно трудоемким и требовал знаний технологии инсталляции. Для инсталляции новых шрифтов в ОС Windows 10 необходимо выполнить следующее:
1) Открыть Панель управления;
2) Запустите элемент Шрифты одиночным щелчком;
3) Откройте папку, в которой находятся шрифты, предназначенные для инсталляции;
4) Выделите шрифты, которые нужно инсталлировать;
5) Скопируйте эти шрифты в папку Шрифты (C:\Windows\Fonts) и вставьте их через буферную память в папку с инсталлированными шрифтами. Выделенные шрифты в папке или на магнитном накопителе можно просто подхватить мышью и перетащить в папку Шрифты с инсталлированными шрифтами.
Другой способ инсталляции шрифтов: открыть папку со шрифтами, которые нужно инсталлировать, выделить нужные шрифты и щелкнуть по ним правой клавишей мыши. Из открывшегося контекстного меню выполните команду Установить. В этом случае даже не потребуется открывать папку с уже инсталлированными в ОС Windows шрифтами. Шрифты, инсталлированные в ОС Windows , устанавливаются в папку по адресу C:\Windows\Fonts.
Шрифты не обязательно должны устанавливаться в папку Fonts: сюда устанавливаются шрифты, инсталлированные в ОС Windows . Если шрифты инсталлируются вместе с некоторыми приложениями, то они могут быть установлены в другие папки, как правило, в раздел Program Files в папку соответствующей программы. Например, приложение Adobe Reader XI устанавливает некоторые шрифты в папку C :\ Program Files \ Adobe \ Reader 11.0\ Resource \ Font , а приложение Adobe Digital Editions 3.0 устанавливает шрифты в папку C:\Program Files \ Adobe \ Adobe Digital Editions 3.0\resources\fonts. Тем не менее и такие шрифты находятся системой и предлагаются во все приложения, использующие шрифты, в том числе и в Microsoft Word , если только тип шрифта не запрещен в данном приложении (для примера: в приложении Microsoft Word в списке шрифтов по умолчанию показываются только типы шрифтов TrueType и OpenType , шрифты типа TrueType помечаются как ( ), а OpenType как ( ) слева от имени гарнитуры шрифта). Растровые шрифты и шрифты Type 1 в приложении Microsoft Word в списке шрифтов показываются только в том случае, если выделен текст, форматированный такими шрифтами (как правило, это старые документы, до сих пор блуждающие в Интернете). В приложениях OpenOffice Writer и LibreOffice Writer в списках шрифтов предлагаются все типы шрифтов, но показывается не тип шрифта, а возможность его пропорциональности ( ), то есть не ухудшающих качество символов шрифта при изменении масштаба.
Для просмотра типа шрифта откройте файл со шрифтом. Тип шрифта обычно указывается в скобках после имени гарнитуры на системной полосе (Рис. 50). Если тип шрифта отсутствует, то речь скорее всего идет о совсем старых шрифтах: растровых или Type 1. Растровые шрифты старых типов не используются совсем. Что касается шрифтов Type 1, то они имеют узкоспециализированное использование, например, для верстки или для создания файлов PDF, читаемых на всех технических устройствах. Более подробно о типе шрифта можно также узнать по расширению файла (или файлов, так как шрифт типа Type 1 состоит из не менее чем 2 файлов). Образец шрифтов в окне шрифта представлен в виде панграммы. Панграмма — это текст, использующий все или почти все буквы алфавита. Панграммы обычно используются для демонстрации шрифтов, тестирования техники, например, печатной. При открытии файла любого шрифта появляется панграмма «Съешь еще этих мягких французских булок, да выпей чаю. 1234567890». Панграмма показывается для разных размеров шрифта, чтобы пользователь заранее видел, удобно ли будет читать текст выбранным размером. В смысл текста панграммы не нужно вчитываться, так как обычно это логически плохо связанный текст, единственное назначение которого — показать основные символы (буквы и цифры) выбранного шрифта.
Панграмм существует довольно много на каждом языке, но в ОС Windows используется панграмма про французские булки. На русском языке есть также панграммы:
В чащах юга жил-был цитрус? Да, но фальшивый экземпляръ!
Друг мой эльфъ! Яшке б свез птиц южных чащ!
Любя, съешь щипцы, — вздохнет мэр, — кайф жгуч.
Подъем с затонувшего эсминца легко бьющейся древнегреческой амфоры сопряжен с техническими трудностями.
Шеф взъярен тчк щипцы с эхом гудбай Жюль.
Эй, жлоб! Где туз? Прячь юных съемщиц в шкаф.
Экс-граф? Плюш изъят. Бьем чуждый цен хвощ!
Эх, чужак! Общий съем цен шляп (юфть) — вдрызг!
Южно-эфиопский грач увел мышь за хобот на съезд ящериц.
Для английского языка создано несколько панграмм:
How razorback-jumping frogs can level six piqued gymnasts!
Jaded zombies acted quaintly but kept driving their oxen forward.
Jelly-like above the high wire, six quaking pachyderms kept the climax of the extravaganza in a dazzling state of flux.
The quick brown fox jumps over the lazy dog.
The risqué gown makes a very brazen exposure of juicy flesh.
The sex life of the woodchuck is a provocative question for most vertebrate zoology majors.
Рис. 50. Просмотр гарнитуры шрифта
К проблемам при установке шрифтов можно отнести нечитаемость файлов со шрифтами из-за сбоев в них, попытку повторной инсталляции этих же шрифтов. От повторной инсталляции лучше отказаться, так как уже инсталлированные вместе с ОС шрифты обычно новее (многие шрифты распространяются в пиратских копиях и старых версиях). Многие пиратские шрифты установить в современные ОС нельзя, так как они (шрифты) требовали специальных программ, например, Adobe Type Manager , которые давно не применяются и не совместимы с современными ОС. От таких шрифтов (обычно в пиратских версиях) желательно избавляться, так как они совершенно бесполезны.
В списке шрифтов одновременно могут быть шрифты с одинаковыми именами, но разными типами ( Type 1, True Type , Open Type ).
После инсталляции новых шрифтов они попадают в список шрифтов немедленно. Поэтому перезагружать открытую до этого программу не нужно. Это было опробовано с приложением Microsoft Word 2010 и 2013 и это было действительно так. Тем не менее, возможно существование программ, которые требуют перезагрузки системы после инсталляции новых шрифтов.
Для удаления шрифта, ставшего ненужным, откройте Панель управления и откройте элемент Шрифты. Щелкните по такому шрифту правой клавишей мыши и из открывшегося контекстного меню выполните команду Удалить. Подтвердите удаление. Не обращайте внимания на то, что в списке шрифтов этот шрифт будет выглядеть так, как будто удаление не было выполнено. После повторного открытия списка шрифтов удаленного шрифта в нем уже не будет. Другой способ удаления шрифта: выделите шрифт, нажмите на кнопку Удалить, которая появляется после выделения шрифта или нескольких шрифтов.
Менеджеры шрифтов сторонних разработчиков предлагают дополнительные услуги по работе со шрифтами, например, позволяют временно отключать некоторые шрифты, которые не нужны, и снова их подключать при необходимости. Физического удаления шрифтов при этом не происходит. Отключение шрифтов приводит к снижению нагрузки на ресурсы компьютера. Вместе с тем отключенные шрифты всегда можно подключить, так как они не удалены, а только временно отключены. К наиболее известным менеджерам шрифтов относится приложение Corel Bitstream Font Navigator из популярного комплекса CorelDraw Graphics Suite X 6, а также Font Frenzy . Для просмотра установленных шрифтов можно рекомендовать программу Font Expert , а для оптимизации кириллических шрифтов можно рекомендовать программу Kira , которую часто используют для приложений корпорации Adobe .
Faq как проинсталлировать свои шрифты
— Подключаем девайс к компьютеру
— Открываем iFunbox
(Рекомендую скачивать iFunbox Classic, т.к. во-первых он легче весит; во-вторых, в нем более удобная навигация; в-третьих, данная инструкция написана под него)
— Нажимаем «Необработанная файловая система»
Примечание: если вы не видите папки User, var, System, etc и пр., значит вам нужно в Cydia установить твик Apple File Conduit «2» из стандартного репозитория или afc2add . Каждый из этих твиков отображает системные папки в сторонних приложениях. Твик можете ставить любой, тут на ваше усмотрение
Примечание: Некоторые антивирусы «ругаются» на файл кряка. Это нормально, вирусов там нет, так что можете смело пользоваться этим кряком, отключив антивирус.
Файлы с расширением .TTF редактируются через программу FontLab.
Т.е. если вы хотите редактировать файл с расширением .TTF, переходите сразу к пункту 5 .
Если мы хотим отредактировать .TTC (группу шрифтов .TTF, собранную в один архив), нам понадобятся вспомогательные программы TTSDK и DOSBox.
— Выделяем и копируем буквы из кастомного шрифта в наш стандартный из iOS.
Примечание1: Следите за тем, чтобы вставляемые символы из первого файла совпадали с символами второго (иначе произойдет путанница и шрифт получится кривой). Поэтому лучше копировать/вставлять буквы небольшими группами.
Примечание2: Выделяйте символы до серых клеток, т.к. при вставке эти серые клетки заполняются символами, что приводит к смещению (см. пример)
До копирования
|
Выделили одну группу символов до пустой ячейки. Скопировали. Вставили. Опять выделили следующую группу до пустой ячейки. Скопировали. Вставили.
|
