font template
1.0.0
Adobe-Illustrator-Schriftarten, mit denen Sie Formen von Glyphen (Zeichen) in einer .ai Datei (oder in ihren separaten, jeweiligen .ai Dateien) bearbeiten können, exportieren Sie sie dann als .svg Dateien, die .ttf .otf Font-Datei .woff freier und offener Font-Maker-Fontforge .woff2 eine Font-Datei importiert werden können.
Schöne Version dieses Tutorials auf meiner Website
font_template.ai (Download): Adobe -Illustrator -Schriftart für grundlegende und erweiterte Symbole und lateinische Buchstaben (signifikante CP1252 -Abdeckung), jede Glyphe hat ein separates Kunstboard, sodass Sie jeden problemlos als individuelle Glyphe -SVG -Datei exportieren können.font_template_single.ai (Download): Adobe Illustrator -Schriftart für eine einzelne Glyphe. Wenn Sie möchten, können Sie diese Datei anstelle von (oder zusammen mit) font_template.ai verwenden.batch_import_svg.py (öffnen, dann Strg .woff s / cmd + s speichern) .woff2 Ein Python -Skript, das mehrere einzelne Glyph -Dateien von SVG .ttf .sfd importieren kann .otf (Anstatt die Dateien herunterzuladen, können Sie auch git clone https://github.com/tomchen/font-template.git oder herunterladen oder das gesamte Repository herunterladen)
( Stellen Sie sicher, dass Sie die neueste Version von Fontforge verwenden, die 20-jährige Jubiläumsausgabe (2020-11-07) (GitHub Release-Seite oder fontforge.org herunterladen)
Öffnen Sie font_template.ai , zeichnen Sie Ihre Glyphen in der Ebene "Artwork Glyphe".
(Es spielt keine Rolle, ob Ihre Glyphe teilweise und leicht außerhalb seiner Kunstkarte liegt.)
Nach dem Abschluss der Glyphen "Beispiel Glyphe" ausblenden Sie die Glyphen. Klicken Sie auf "Datei" -> "Exportieren" -> "Exportieren für Bildschirme".
Wählen Sie die Glyphen aus, die Sie exportieren möchten (wählen Sie keine leeren), wählen Sie "SVG" -Format und klicken Sie auf "Export -Kunstboote exportieren".
Exportierte einzelne Glyph -SVG -Dateien befinden sich in einem "SVG" -Fordner und geben Sie ihn in einen Ordner ein, der auch die Skriptdatei batch_import_svg.py enthält.
Für Windows-Benutzer führen Sie C:Program Files (x86)FontForgeBuildsfontforge-console.bat aus* mit cd <FOLDER_PATH> zum Ordner aus und führen Sie das Python-Skript mit ffpython batch_import_svg.py aus. Eine output.sfd -Font -Datei wird generiert.
Für Mac- oder Linux -Benutzer, cd <FOLDER_PATH> und fontforge -lang=py -script batch_import_svg.py ausführen.
(*: Für 64 -Bit -Windows sind es Program Files (x86) , für 32 -Bit -Windows IT Program Files )
Öffnen Sie die Font -Datei output.sfd mit Fontforge. Passen Sie die Breite der Glyphen an (verwenden Sie die Schaltschlüssel , um alle Glyphen auszuwählen, die Sie Breite einstellen möchten. Wählen Sie im Menü "Metriken" -> "Autobreite" oder doppelklicken Sie auf eine Glyphe und ziehen Sie manuell seine Grenzlinie).
Wählen Sie im Menü "Datei" -> "Schriftarten generieren ..."
Geben Sie einen Schriftnamen ein, wählen Sie ein Schriftart Format (typischerweise TrueType oder Openentype) und klicken Sie auf "Generieren". Dann haben Sie Ihre selbst gemachte Computer-Schriftart!
Sie können hier anhalten und müssen die folgenden Abschnitte nicht lesen.
Mit dieser Schriftvorlage kann ein einzelner Glyphe zeichnen und einzelne Glyphen -SVG erzeugt werden.
Das folgende Bild zeigt die Führer einer einzelnen Glyphe.
Wählen Sie in Fontforge eine Glyphe aus oder öffnen Sie eine Glyphe, dann klicken Sie auf "Datei" -> "Import ...", wählen Sie "SVG" als "Format" aus, wählen Sie Ihre einzelne Glyphen -SVG -Datei aus und importieren Sie sie.
Ändern Sie die Datei batch_import_svg.py , wenn Sie eine vorhandene .sfd -Schriftart eröffnen möchten, oder generieren Sie .otf , .ttf , .woff , .woff2 direkt, anstatt dies mit Fontforge -GUI.
Klicken Sie im Menü fontforge auf "Datei" -> "Skript ausführen".
Kopieren und einfügen: SelectWorthOutputting(); foreach Export("%e_%n.svg"); endloop;
Wählen Sie "FF" -Radial -Taste.
Klicken Sie auf die Schaltfläche "OK".
Wenn die Form eines Glyphs mehrere überlappende Pfade enthält, wäre es besser, sich ihnen anzuschließen (ein schönes YouTube -Tutorial), anstatt sie zu gruppieren oder einen zusammengesetzten Pfad zu machen. Dieser Schritt vermeidet, dass Schriftartenprobleme für überlappende Pfade zu vermeiden. Für separate (nicht überlappende) Pfade können Sie jedoch "Gruppe" ( Strg + G ) oder "zusammengesetzter Pfad" ("Objekt" -> "zusammengesetzter Pfad" -> "make") verwenden.
Anstatt eine Schriftart mit Fontforge von Scrach zu erstellen, ist es manchmal eine gute Idee, eine vorhandene kostenlose und offene Schriftart als Basis- und Fallback-Schriftart zu verwenden. Typische Open-Source-Schriftarten mit guter Glyphenabdeckung sind Adobe's Source Sans Pro und Quell SeriF Pro. Wählen Sie je nach Ihren Bedürfnissen ein Gewicht wie "regulär". Öffnen Sie die Schriftart mit Fontforge und bearbeiten Sie sie, um Ihre Schriftart zu erstellen. Wenn Sie jedoch eine vorhandene Schriftart verwenden, müssen Sie möglicherweise nicht nur AZ, AZ, sondern auch deren Ligaturen wie "FF" und "FI" bearbeiten.
Wenn Sie im Fenster "Export für Bildschirme" des Illustrators Glyphen auswählen, sollten Sie keine leeren Glyphen auswählen. Andernfalls sehen Sie "Es tut mir leid, dass diese Datei zu komplex ist, als dass ich das Skript batch_import_svg.py ausführen kann, wenn Sie batch_import_svg.py ausführen. Trotzdem wird es nicht aufhören und die Datei output.sfd weiter generieren.
Am 19. August 2020 wurde die Datei font_template.ai des Projekts aktualisiert (viele Kunstboardnamen wurden geändert, z. B. 44 , in 44 comma ), um ein Unicode -Dateiname -Problem zu beheben. Wenn Sie vor 2020-08-19 font_template.ai heruntergeladen und Ihre .ai Datei basierend auf der alten Version erstellt haben, können Sie optional ** die Kunstboardnamen in Ihrem font_template.ai mit einer der folgenden Methoden aktualisieren:
.ai -Datei in die neueste font_template.ai/other_files/update_artboard_names.js in Illustrator: Öffnen Sie Ihre .ai -Datei im Adobe -Illustrator, klicken Sie update_artboard_names.js Menü auf "Datei" -> "Skripte" -> "Anderes Skript ...", finden und wählen Löschen und regenerieren Sie nach dem Update Ihre Glyphen -SVG -Dateien im SVG -Ordner.
(**: Wenn Sie die alte Version verwenden, Ihre Glyphen jedoch auf grundlegende ASCII -Zeichen beschränkt sind, werden Sie daher nicht auf ein Problem mit SVG -Unicode -Dateinamen begegnen. Sie können sich entscheiden, Ihre .ai -Datei nicht zu aktualisieren.)
Sobald Sie eine eigene Schriftart haben, können Sie sie auf Ihren Webseiten verwenden (einschließlich Websites, Webanwendungen, elektronenkompilierten Cross-Plate-Form-Desktop-Anwendungen oder sogar mobile App native / nativeskript).
Ihre Schriftart kann eine Alphabet -Schriftart oder eine monochrome Symbolschrift sein. Wenn Sie Farbsymbole anzeigen möchten, verwenden Sie SVG oder PNG.
Fügen Sie Ihre .woff2 und .woff -Schriftdateien ( my_font.woff2 und my_font.woff in das Beispiel) in Ihren CSS -Ordner ein und fügen Sie den folgenden Code in Ihre CSS -Datei ein (es unterstützt IE9+):
@font-face {
font-family : 'MyFont' ;
src : url ( 'my_font.woff2' ) format ( 'woff2' ) ,
url ( 'my_font.woff' ) format ( 'woff' );
} (Wenn Sie keinen IE unterstützen möchten, können Sie die .woff -Datei löschen und nur .woff2 (das kleinste und neueste Format) verwenden)
Verwenden Sie dann Ihren benutzerdefinierten font-family ('myfont' im Beispiel):
. my-special-font {
font-family : 'MyFont' , sans-serif;
color : yellow;
font-size : 20 px ;
}HTML:
< span class =" my-special-font " > B </ span > Wenn es sich um eine monochrome Symbolschrift handelt, wird der Buchstabe B im HTML-Code als monochrome Symbolzuordnung an den Buchstaben B angezeigt. Obwohl Webentwickler normalerweise Zeichen im Bereich Private-Nutzungsbereich von Unicode wie U+EEA0 und U+F2BB verwenden, verwenden Sie lateinische Buchstaben und andere häufig verwendete Zeichen über Semantik / SEO / SEO / SEO / SEO / SEO / SEO / SEO / SEO / SEO / SEO / SEO / SEO / SEO / SEO / SEO / SEO / SEO / SEO / SEO / SEO / SEO / SEO / SEO / SEO / SEO / SEO / SEO / SEO / SEO / SEO / Access-Access. Um diese Bedenken auszuräumen, können Sie Ihr Schriftartsymbol semantisch identifizieren, indem Sie Ihrem HTML-Element role und aria-label -Attribute hinzufügen:
< span role =" img " aria-label =" A bag " class =" my-special-font " > B </ span > MIT -Lizenz für alles in diesem Repository
