PerfectVector
Автор: Irene Kim8 мин чтения

Импорт SVG в FontForge: рисунки в контуры глифов

Импортируйте SVG в ячейку глифа FontForge, затем проверьте контуры, базовую линию, масштаб и интервалы. Узнайте, что дает трассировка и что еще требует дизайна шрифта.

На этой странице

Чтобы импортировать SVG в FontForge, откройте нужную ячейку глифа, выберите File → Import, измените формат на SVG и выберите файл. Результат — геометрия контуров в окне редактирования этого глифа. Все еще нужно проверить положение, размер, контуры и интервалы перед созданием пригодного шрифта.

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

Импортируйте в ячейку глифа, а не просто в открытое окно шрифта

Создайте новый документ FontForge или откройте рабочий шрифт, затем дважды нажмите ячейку символа для редактирования. Импортируйте SVG через File → Import внутри этого окна контуров. Если диалог сначала перечисляет растровые форматы, переключите фильтр формата на SVG. Это последовательность из руководства FontForge по импорту контуров.

Сначала проверьте назначение. Если добавляете собственную строчную g, подтвердите редактирование нужной ячейки g. Файл g.svg не заменяет проверку глифа и его сопоставления символу. Сохраните копию существующего шрифта перед заменой контуров.

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

В этом руководстве цель — обычный контурный глиф. Специализированные многослойные или цветные шрифты имеют дополнительные требования; иллюстрация для браузера не становится автоматически таким шрифтом.

Используйте исходные векторы, если они есть

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

Если исходник — растровый рисунок или сгенерированный символ, преобразуйте изображение в векторные контуры с PerfectVector и проверьте SVG. Это дает начальный контур для правки. FontForge остается местом построения метрик глифа, интервалов и поведения шрифта.

Для рисунка от руки выбирайте четкий высококонтрастный исходник. Обрежьте соседние символы и лишние элементы бумаги, сохранив полностью выносные элементы вверх и вниз. Руководство по векторизации леттеринга рассматривает подготовку исходника; объяснение векторизации изображений описывает реальный результат преобразования.

Трассированная буква все еще является геометрией графики

Мы подготовили исходную растровую строчную g с одним широким внутрибуквенным просветом и четким нижним выносным элементом, затем преобразовали через PerfectVector. Необработанный SVG содержал три замкнутых контура: почти белый фон холста, черный силуэт буквы и почти белую фигуру просвета. Встроенных изображений не было.

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

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

Сравнение показывает проверенные нами данные контуров, а не тест FontForge. Мы не назначали этому выводу базовую линию, размер em, ширину продвижения или кернинг. Чисто выглядящий нижний выносной элемент показывает, куда продолжается рисунок; он не говорит шрифту, где должна быть базовая линия.

Подготовьте явные контуры перед настройкой метрик

Сохраните нетронутый SVG и отдельную рабочую копию. В рабочей копии удалите несвязанные фоновые фигуры, преобразуйте обводки в контуры, если их видимая толщина определяет глиф, и превратите маски или отсеченные эффекты в нужные сохраняемые фигуры. FontForge импортирует подмножество SVG, как объясняет справка импорта.

Для буквы с просветом проверьте и наружную, и внутреннюю границу. Они должны описывать нужную заполненную область. Белое наложение может имитировать вид на белой странице, не давая шрифту правильную структуру контуров.

После импорта подготовленной графики проверьте открытые концы, случайные перекрытия и самопересечения. Element → Correct Direction задает чередующиеся направления наружных и вложенных контуров, но может дать неожиданные результаты при пересечении сплайнов. Устраните пересечения, прежде чем полагаться на команду. FontForge описывает это ограничение в справке меню Element.

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

Выровняйте базовую линию перед оценкой высоты

Импортированная графика может оказаться слишком маленькой, большой или смещенной от нужного начала координат. Выделите все точки глифа и переместите или масштабируйте вместе. Руководство FontForge по импорту описывает размещение контура и использование Element → Transform → Transform с равномерным масштабированием.

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

При подготовке других букв используйте согласованную исходную систему координат. Руководство FontForge описывает процесс с 1 000 единицами, а руководство Design With FontForge по импорту объясняет связь вертикальных координат SVG с метриками ascent и descent — расстояниями над и под базовой линией. Считайте это согласованными инструкциями настройки, а не правилом растягивать каждый существующий SVG в квадрат.

Шрифту с другими единицами на em нужен соответствующий план. Аналогично плотная обрезка каждой буквы до страницы SVG разной высоты может отбросить общую основу, нужную для согласованного размещения. Установите ее на одном-двух глифах перед обработкой остальных.

Задавайте интервалы в контексте

Видимая ширина буквы и ширина продвижения различаются. Продвижение указывает следующему символу, где начинаться; пустое пространство вокруг контура влияет на ритм слова.

Откройте окно Metrics из меню Window и проверьте глиф рядом с другими буквами. Руководство FontForge по метрикам описывает изменение левого бокового поля перемещением контура, а правого — через линию ширины продвижения.

Для первой g сравните повторенные буквы и короткие сочетания с уже нарисованными глифами, например gg, ng и go. Смотрите на интервалы, а не только контуры. Не используйте кернинг для компенсации каждого плохо выбранного стандартного бокового поля; сначала установите разумные интервалы для обычных соседей, затем исправляйте исключительные пары.

Глиф, выглядящий центрированным на странице SVG, все еще может неловко располагаться в тексте. И наоборот, одинаковое численное пространство с обеих сторон не всегда выглядит правильным интервалом. Сохраняйте границы SVG как геометрическую основу, а шрифт оценивайте в строке текста.

Проверьте и создайте тестовый шрифт

Сохраните редактируемый проект FontForge перед созданием файла шрифта. Save сохраняет рабочий исходник; Generate Fonts создает формат шрифта, например TrueType или OpenType. Руководство по проверке и созданию объясняет это разделение.

Запустите Element → Find Problems для подготовленных глифов. Рассмотрите найденные проблемы вместо автоматического принятия каждого предложенного изменения: FontForge отмечает, что некоторые находки могут отражать намеренные дизайнерские решения. Затем снова проверьте глифы визуально.

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

Частые вопросы

Почему SVG имеет неверный размер или положение в FontForge? Исходные координаты и размеры страницы могут не соответствовать настройке em и базовой линии шрифта. Последовательно переместите и масштабируйте импортированный контур, затем установите общий план координат перед подготовкой других глифов.

Может ли PerfectVector превратить рисунок в полный шрифт? PerfectVector преобразует растровую графику в векторные контуры. Все еще нужен редактор шрифтов для подготовки контуров глифов, сопоставления, метрик, интервалов и созданного файла шрифта.

Почему просвет буквы заполняется? Проверьте, не является ли кажущееся отверстие белым наложением, присутствует ли внутренний контур и нужны ли исправления направлений контуров или пересечений. Проверяйте заливку подготовленного глифа вместо доверия виду исходного SVG на белой странице.

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

Источники

  1. FontForge outline import tutorial — Импорт в ячейку глифа, размещение, равномерный масштаб и согласованные размеры исходника.
  2. FontForge File menu — Типы импорта, поддержка SVG и операции исходных и шрифтовых файлов.
  3. FontForge Element menu — Исправление направлений контуров и ограничения при пересечениях.
  4. Design With FontForge: importing glyphs — Координаты SVG и настройка верхней и нижней частей относительно базовой линии.
  5. FontForge metrics tutorial — Боковые поля, ширина продвижения, интервалы в контексте и кернинг.
  6. FontForge checking and generation tutorial — Проверка проблем и создание пригодного формата шрифта.

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

Ещё из блога

Начните с более чистого SVG,
который проще редактировать