Import SVG w FontForge: zamień narysowane kształty w kontury glifów

Aby zaimportować SVG do FontForge, otwórz docelowe pole glifu, wybierz File → Import, zmień format na SVG i wybierz plik. W oknie edycji tego glifu pojawi się geometria konturów. Zanim wygenerujesz font nadający się do użycia, musisz jeszcze sprawdzić jej położenie, rozmiar, kontury i odstępy.

To rozróżnienie ma znaczenie, gdy źródłem jest rysunek. Wektoryzacja pozwala odtworzyć kształty z pikseli. Nie potrafi określić zamierzonej linii bazowej, szerokości posuwu ani rytmu odstępów w kroju pisma. Zacznij od jednego glifu i sprawdź wszystkie te elementy, zanim zaimportujesz cały alfabet.

Importuj do pola glifu, a nie tylko do otwartego okna fontu

Utwórz nowy dokument FontForge lub otwórz font, nad którym pracujesz, a następnie kliknij dwukrotnie pole znaku, który chcesz edytować. Zaimportuj SVG przez File → Import w tym oknie edycji konturów. Jeśli okno wyboru pliku początkowo pokazuje formaty bitmapowe, przełącz filtr formatu na SVG. Taką kolejność opisuje outline import tutorial FontForge.

Najpierw sprawdź miejsce docelowe. Jeśli dodajesz własną małą literę g, upewnij się, że edytujesz właściwe pole g. Nazwa pliku g.svg nie zastępuje sprawdzenia glifu i jego przypisania do znaku. Zapisz kopię istniejącego fontu, zanim zastąpisz jakiekolwiek kontury.

Po imporcie zaznacz punkt i upewnij się, że kontury można edytować. Jeśli masz jedynie obraz służący jako wzór do obrysowania, nie jest to jeszcze ten sam rezultat. File menu documentation FontForge rozróżnia import obrazów, kontury glifów i operacje na plikach fontów.

W tym poradniku celem jest zwykły glif zbudowany z konturów. Specjalistyczne procesy pracy z fontami wielowarstwowymi lub kolorowymi mają dodatkowe wymagania; ilustracja przygotowana do wyświetlania w przeglądarce również nie staje się automatycznie takim fontem.

Korzystaj z oryginalnej grafiki wektorowej, jeśli ją masz

Jeśli glif powstał w edytorze grafiki wektorowej, przygotuj bezpośrednio tę grafikę. Zachowaj jej oryginalne kontury, utwórz osobną kopię do importu i w niej uprość nieobsługiwane właściwości wpływające na wygląd grafiki. Ponowna wektoryzacja obrazu istniejącej grafiki wektorowej może zmienić kształty, nad którymi już masz kontrolę.

Jeśli źródłem jest rysunek rastrowy lub wygenerowany symbol, przekształć obraz w ścieżki wektorowe za pomocą PerfectVector i sprawdź SVG. Otrzymasz w ten sposób wyjściowy kontur do edycji. FontForge pozostaje narzędziem do opracowania metryk glifu, odstępów i działania fontu.

W przypadku odręcznego projektu wybierz wyraźny materiał źródłowy o wysokim kontraście. Usuń z kadru sąsiednie znaki i zbędne elementy na papierze, ale zachowaj całe wydłużenie górne lub dolne. Poradnik wektoryzacji odręcznego liternictwa omawia etap przygotowania źródła; wyjaśnienie wektoryzacji obrazów opisuje, co faktycznie powstaje podczas konwersji.

Litera po wektoryzacji nadal jest geometrią grafiki

Przygotowaliśmy własną rastrową małą literę g z jednym szerokim światłem wewnętrznym i wyraźnym wydłużeniem dolnym, a następnie przekształciliśmy ją za pomocą PerfectVector. Surowy SVG zawierał trzy zamknięte ścieżki: niemal białe tło obszaru roboczego, czarną sylwetkę litery i niemal biały kształt światła wewnętrznego. Nie zawierał osadzonych obrazów.

Białe światło wewnętrzne było namalowane na czarnej sylwetce. Nie stanowiło jeszcze wewnętrznego konturu gotowego glifu fontu. Usunięcie samego białego kształtu odsłoniłoby pod nim jednolitą czerń. W kopii do importu usuń tło po upewnieniu się, który kształt nim jest, i przygotuj światło wewnętrzne jako rzeczywisty otwór, zanim ocenisz wypełnienie glifu.

Porównanie pokazuje geometrię konturów, którą sprawdziliśmy, a nie test w FontForge. Nie przypisaliśmy temu wynikowi linii bazowej, rozmiaru em, szerokości posuwu ani kerningu. Wydłużenie dolne o czystym kształcie pokazuje, dokąd sięga rysunek; nie wskazuje fontowi, gdzie powinna przebiegać linia bazowa.

Przygotuj jednoznaczne kontury, zanim dostosujesz metryki

Zachowaj nietknięty SVG i osobną kopię roboczą. W kopii roboczej usuń zbędne kształty tła, zamień obrysy na kształty, gdy ich widoczna grubość definiuje glif, oraz przekształć maski lub efekty przycinania w kształty, które chcesz zachować. FontForge obsługuje przy imporcie tylko część możliwości SVG, co wyjaśnia jego import reference.

W przypadku litery ze światłem wewnętrznym sprawdź zarówno zewnętrzną, jak i wewnętrzną granicę. Muszą opisywać zamierzony obszar wypełnienia. Biały kształt nałożony na literę może odtwarzać jej wygląd na białej stronie, nie zapewniając fontowi właściwej struktury konturów.

Po zaimportowaniu przygotowanej grafiki sprawdź, czy nie ma otwartych końców, przypadkowych nakładających się fragmentów ani samoprzecięć. Element → Correct Direction ustawia naprzemienne kierunki dla konturów zewnętrznych i zagnieżdżonych, ale może dawać nieoczekiwane wyniki, gdy krzywe się przecinają. Usuń te przecięcia, zanim zaufasz wynikowi polecenia. FontForge opisuje to ograniczenie w Element menu reference.

Unikaj upraszczania wyłącznie po to, by osiągnąć docelową liczbę węzłów. Zachowaj narożniki, zakończenia i krzywe, które definiują Twój rysunek. Poradnik dotyczący nadmiernej liczby węzłów SVG może pomóc rozpoznać nierówne kontury z nadmiarem drobnych szczegółów, ale kontur fontu wymaga również oceny typograficznej w rozmiarach, w których będzie czytany.

Wyrównaj linię bazową, zanim ocenisz wysokość

Zaimportowana grafika może być za mała, za duża lub przesunięta względem zamierzonego początku układu współrzędnych. Zaznacz wszystkie punkty glifu i przesuń je lub przeskaluj razem. Import tutorial FontForge opisuje ustawianie konturu we właściwym miejscu oraz korzystanie z Element → Transform → Transform z zachowaniem jednakowej skali w obu osiach.

W przypadku małej litery g nie wyrównuj najniższego punktu do linii bazowej: ten punkt należy do wydłużenia dolnego. Ustaw główną część litery względem zamierzonej linii bazowej i wysokości x, pozostawiając wydłużenie dolne poniżej linii bazowej. Porównaj ją z sąsiednimi małymi literami w tym samym projekcie, jeśli już istnieją.

Przygotowując kolejne litery, korzystaj ze spójnego źródłowego układu współrzędnych. Poradnik FontForge przedstawia proces oparty na 1000 jednostkach, a Design With FontForge's import guide wyjaśnia, jak pionowe współrzędne SVG odnoszą się do wysokości nad linią bazową i głębokości pod nią. Traktuj te wskazówki jako spójne instrukcje konfiguracji, a nie zasadę, według której każdy istniejący SVG trzeba rozciągnąć do kwadratu.

Font z inną liczbą jednostek na em wymaga odpowiednio dopasowanego planu. Podobnie ciasne kadrowanie każdej litery do strony SVG o innej wysokości może pozbawić Cię wspólnego punktu odniesienia potrzebnego do spójnego rozmieszczenia. Ustal ten punkt odniesienia na jednym lub dwóch glifach, zanim przetworzysz pozostałe.

Ustaw odstępy w kontekście

Widoczna szerokość litery i jej szerokość posuwu to dwie różne rzeczy. Szerokość posuwu określa, gdzie zaczyna się następny znak; pusta przestrzeń wokół konturu wpływa na rytm słowa.

Otwórz okno Metrics z menu Window i obejrzyj glif obok innych liter. Metrics tutorial FontForge opisuje zmianę lewej odsadki przez przesunięcie konturu oraz prawej odsadki za pomocą linii szerokości posuwu.

W przypadku pierwszej litery g porównaj powtórzenia tej litery i krótkie kombinacje z już narysowanymi glifami, takie jak gg, ng i go. Przyglądaj się odstępom, a nie tylko konturom. Nie używaj kerningu do kompensowania każdej źle dobranej domyślnej odsadki bocznej; najpierw ustal rozsądne odstępy dla typowych sąsiednich znaków, a następnie zajmij się wyjątkowymi parami.

Glif, który wygląda na wyśrodkowany na stronie SVG, nadal może źle układać się w tekście. Z kolei jednakowa liczbowa wartość odstępu po obu stronach nie zawsze daje wizualnie właściwy efekt. Zachowaj granice SVG jako punkt odniesienia dla geometrii i oceniaj font w wierszu tekstu.

Sprawdź poprawność i wygeneruj font testowy

Zapisz edytowalny projekt FontForge, zanim wygenerujesz plik fontu. Save zachowuje źródło robocze; Generate Fonts tworzy font w formacie takim jak TrueType lub OpenType. Checking and generation tutorial wyjaśnia ten podział.

Uruchom Element → Find Problems dla przygotowanych glifów. Przejrzyj zgłoszone problemy, zamiast automatycznie akceptować każdą sugerowaną zmianę: FontForge zaznacza, że niektóre wykryte sytuacje mogą wynikać z celowych decyzji projektowych. Następnie ponownie sprawdź glify wzrokowo.

Wygeneruj font testowy i wypróbuj go w aplikacji, w której zamierzasz go używać. Sprawdź przypisanie znaków, światło wewnętrzne, linię bazową, wolne miejsce na wydłużenie dolne oraz odstępy zarówno przy małych, jak i dużych rozmiarach tekstu. Jeśli font nadal jest niewielkim prototypem, jasno określ ten zakres testu. Pomyślny import jednego konturu nie oznacza, że cały krój pisma jest gotowy.

Najczęściej zadawane pytania

Dlaczego mój SVG ma niewłaściwy rozmiar lub położenie w FontForge? Jego źródłowe współrzędne i wymiary strony mogą nie odpowiadać ustawieniom em i linii bazowej fontu. Przesuń i przeskaluj zaimportowany kontur w spójny sposób, a następnie ustal wspólny plan współrzędnych, zanim przygotujesz kolejne glify.

Czy PerfectVector może zamienić rysunek w kompletny font? PerfectVector przekształca grafikę rastrową w ścieżki wektorowe. Nadal potrzebujesz edytora fontów, aby przygotować kontury glifów, przypisania do znaków, metryki, odstępy i wygenerowany plik fontu.

Dlaczego światło wewnętrzne litery zostaje wypełnione? Sprawdź, czy pozorny otwór nie jest białym kształtem nałożonym na literę, czy istnieje wewnętrzny kontur oraz czy kierunki konturów lub ich przecięcia nie wymagają naprawy. Sprawdź wypełnienie przygotowanego glifu, zamiast polegać na tym, jak oryginalny SVG wyglądał na białej stronie.

Czy mam zaimportować wszystkie litery SVG naraz? Najpierw ukończ jeden reprezentatywny glif. Sprawdź jego skalę, linię bazową, kontury i odstępy, a następnie zastosuj spójną metodę przygotowania do pozostałych liter. Import wsadowy nie ustali za Ciebie tych wartości projektowych.

Źródła

1. FontForge outline import tutorial — Import do pola glifu, pozycjonowanie, skalowanie z zachowaniem proporcji i spójne wymiary źródłowe.
2. FontForge File menu — Rodzaje importu, obsługa SVG oraz operacje na plikach źródłowych i plikach fontów.
3. FontForge Element menu — Korekta kierunków konturów i jej ograniczenia przy przecięciach.
4. Design With FontForge: importing glyphs — Współrzędne SVG oraz ustawienia wysokości nad linią bazową i głębokości pod nią.
5. FontForge metrics tutorial — Odsadki boczne, szerokość posuwu, odstępy w kontekście i kerning.
6. FontForge checking and generation tutorial — Przegląd problemów i generowanie fontu w formacie nadającym się do użycia.

Jeśli Twój pierwszy glif istnieje tylko jako piksele, przekształć rysunek w edytowalną grafikę wektorową, sprawdź światło wewnętrzne i zewnętrzny kontur, a następnie ukończ ten jeden glif w FontForge. Prawidłowo umieszczony i przetestowany kontur z właściwymi odstępami to przydatny punkt wyjścia dla pozostałej części fontu.