font template
1.0.0
Шаблоны шрифтов Adobe Illustrator, которые позволяют вам редактировать формы глифов (символов) в целом в одном файле .ai (или в их отдельных, соответствующих файлах .ai .ttf если хотите), затем экспортируйте их в виде файлов .svg , .otf могут быть импортированы .woff файл шрифта в бесплатном и открытом шрифте Fontforge и Generate Final Production for font .woff2 .
Красивая версия этого урока на моем сайте
font_template.ai (загрузка): шаблон шрифта Adobe Illustrator для основных и расширенных символов и латинских букв (значительное покрытие CP1252), каждый глиф имеет отдельный артборд, чтобы вы могли легко экспортировать каждый из них в виде отдельного файла Glyph SVG.font_template_single.ai (загрузка): шаблон шрифта Adobe Illustrator для одного глифа. Если вы хотите, вы можете использовать этот файл вместо (или вместе с) font_template.ai .batch_import_svg.py (Откройте, затем Ctrl + S / cmd + S для сохранения) .ttf сценарий Python, который может импортировать несколько отдельных файлов Glyph Svg в файл Fontforge .sfd (и может опционально преобразовать его в файлы производства .woff2 .woff .otf (Вместо того, чтобы загружать файлы, вы также можете git clone https://github.com/tomchen/font-template.git или загрузить весь репозиторий)
( Убедитесь, что вы используете последнюю версию Fontforge, которая является 20-летием Edition (2020-11-07) (страница выпуска GitHub или страница загрузки Fontforge.org). Старая версия Windows 20200314 сбои при импорте файлов SVG. )
Откройте font_template.ai , нарисуйте свои глифы в слое «искусство глиф».
(Неважно, если ваш глиф частично и немного за пределами его артборда.)
После окончания рисования глифов, скрыть «пример глифного» слоя. Нажмите «Файл» -> «Экспорт» -> «Экспорт для экранов».
Выберите глифы, которые вы хотите экспортировать (не выбирайте пустые), выберите формат «SVG», нажмите «Экспорт Artboard».
Экспортируемые отдельные файлы Glyph SVG находятся в папке «SVG», положите его в папку, которая также содержит файл скрипта batch_import_svg.py .
Для пользователей Windows запустите C:Program Files (x86)FontForgeBuildsfontforge-console.bat ,* Перейдите к папке, используя cd <FOLDER_PATH> и выполните скрипт Python, используя ffpython batch_import_svg.py . Будет сгенерирован файл font output.sfd .
Для пользователей Mac или Linux, cd <FOLDER_PATH> и выполните fontforge -lang=py -script batch_import_svg.py .
(*: для 64 -битных Windows IT Program Files (x86) , для 32 -битных Windows It Program Files )
Откройте файл шрифта output.sfd с помощью Fontforge. Отрегулируйте ширину Glyphs (используйте клавишу Shift , чтобы выбрать все глифы, которые вы хотите настроить ширину, а затем в меню выберите «Метрики» -> «Автомобильная ширина», или двойной щелкните глиф и вручную перетащите его пограничную линию).
В меню выберите «Файл» -> «Сгенерировать шрифты ...»
Введите имя шрифта, выберите формат шрифта (обычно TrueType или OpenType), нажмите кнопку «Создать». Тогда у вас есть самодельный компьютерный шрифт!
Вы можете остановиться здесь и не нужно читать следующие разделы.
Этот шаблон шрифта может быть использован для рисования отдельного глифа и создания одного глифного SVG.
На следующем изображении изображены руководства одного глифа.
В Fontforge выберите Glyph или откройте Glyph, затем нажмите «Файл» -> «Импорт ...», выберите «SVG» как «формат», выберите свой файл с одним Glyph SVG и импортируйте его.
Измените файл batch_import_svg.py , если вы хотите открыть существующий файл шрифта .sfd или сгенерировать .otf , .ttf , .woff , .woff2 напрямую, вместо того, чтобы делать это с Gui Fontforge.
В меню Fontforge нажмите «Файл» -> «Выполнить скрипт»
Скопировать и вставить: SelectWorthOutputting(); foreach Export("%e_%n.svg"); endloop;
Выберите радиальную кнопку «FF».
Нажмите кнопку «ОК».
Если форма глифа содержит несколько перекрывающихся путей, было бы лучше присоединиться к ним (хороший учебник на YouTube) вместо того, чтобы группировать их или сделать их составным путем. Этот шаг помогает избежать проблем с визуализацией шрифта для перекрывающихся путей. Тем не менее, для отдельных (непересекающих) путей, не стесняйтесь использовать «группу» ( Ctrl + G ) или «составной путь» («объект» -> «Составной путь» -> «Make»).
Вместо того, чтобы создавать файл шрифта с Fontforge из Scrach, иногда бывает хорошей идеей использовать существующий бесплатный файл шрифта и шрифт с открытым исходным кодом в качестве базового и резервного шрифта. Типичными шрифтами с открытым исходным кодом с хорошим охватом глифа являются источником Adobe Sans Pro и Source Serif Pro. Выберите вес, такой как «обычный», в зависимости от ваших потребностей. Откройте файл шрифта с помощью Fontforge, отредактируйте его, чтобы создать свой шрифт. Однако, если вы используете существующий шрифт, вам может потребоваться редактировать не только AZ, но и их лигатуры, такие как «FF» и «Fi».
Когда вы выбираете Glyphs в окне «Экспорт для экранов» Illustrator, вы не должны выбирать пустые глифы, в противном случае вы увидите «Извините, этот файл слишком сложный для меня, чтобы понять (или ошибочно)», предупреждая, когда вы выполняете сценарий batch_import_svg.py . Тем не менее, он не остановится и будет продолжать генерировать файл output.sfd .
19 августа 2020 года был обновлен файл проекта font_template.ai (многие имена артбордов были изменены, например, 44 , были изменены на 44 comma ), чтобы решить проблему файла Unicode. Если вы загрузили font_template.ai до 2020-08-19 и сделали свой файл .ai на основе старой версии, вы можете при желании ** обновить имена Artboard в своем font_template.ai , используя любой из следующих методов:
.ai до последнего font_template.ai/other_files/update_artboard_names.js в Illustrator: Откройте файл .ai в Adobe Illustrator, в меню, нажмите «Файл» -> «Скрипты» -> «Другой скрипт ...», найти и выберите загруженный файл update_artboard_names.js , нажмите «Откройте». После обновления удалите и регенерируйте свои файлы Glyph SVG в папке SVG .
(**: Если вы используете старую версию, но ваши глифы ограничены основными символами ASCII, поэтому не столкнутся с какой -либо проблемой, связанной с именем файла SVG, вы можете не обновлять свой файл .ai )
После того, как у вас есть собственный шрифт, вы можете использовать его на своих веб-страницах (включая веб-сайты, веб-приложения, электронно-считанные приложения для настольных компьютеров или даже отреагировать на собственное мобильное приложение для нативного / NativeScript).
Вашим шрифтом может быть шрифт алфавита или монохромный шрифт. Если вы хотите показать значки цвета, используйте SVG или PNG.
Поместите свои файлы .woff2 и .woff Font ( my_font.woff2 и my_font.woff в примере) в папку CSS и вставьте следующий код в вашем файле CSS (он поддерживает IE9+):
@font-face {
font-family : 'MyFont' ;
src : url ( 'my_font.woff2' ) format ( 'woff2' ) ,
url ( 'my_font.woff' ) format ( 'woff' );
} (Если вы не хотите поддерживать какой -либо IE, вы можете удалить файл .woff и использовать только .woff2 (самый маленький и последний формат))
Затем используйте свое настраиваемое имя font-family ('MyFont' в примере):
. my-special-font {
font-family : 'MyFont' , sans-serif;
color : yellow;
font-size : 20 px ;
}HTML:
< span class =" my-special-font " > B </ span > Если это монохромный шрифт значка, буква B в HTML-коде будет показана как отображение монохромного значка с буквой B. Хотя веб-разработчики обычно используют символы в области частного использования Unicode, такую как U+EEA0 и U+F2BB, а не основные латинские буквы, и другие часто используемые символы по сравнению с Semantics / SEO / доступом, и никто не преобладает от использования Latin. Чтобы решить эти проблемы, вы можете семантически идентифицировать значок шрифта, добавив role и атрибуты aria-label в свой HTML-элемент:
< span role =" img " aria-label =" A bag " class =" my-special-font " > B </ span > Лицензия MIT для всего в этом репозитории
