Erstellen Sie benutzerdefinierte Symbolschriften: Erstellen Sie ein exklusives Symbolsystem mit Illustrator und iComoon
Kernpunkte:
@font-face Regeln und alle Symbolauswahl, die in der HTML -Website aufgenommen werden können, wodurch auf Webseiten -Elementen benutzerdefinierte Symbolschriften hinzugefügt werden. 
Symbolsysteme sind in der Regel das Kerndesignelement in Webprojekten. Es gibt viele kostenlose oder kommerzielle Symbolsätze online, die normalerweise im Haupt -CSS -Framework enthalten sind (Bootstrap 3 Glyphicons ist ein gutes Beispiel).
manchmal benötigen Sie jedoch möglicherweise eine spezifischere -Glyphe, die nicht im allgemeinen Satz enthalten ist. Oder Sie möchten das Symboldesign möglicherweise nur mit anderen Designelementen in Ihrem Projekt besser koordinieren. In diesen Fällen müssen Sie ein neues Symbol von Grund auf neu zeichnen.
Zwei gemeinsame Möglichkeiten zum Hinzufügen von Symbolsätzen zu Ihrem Projekt:
traditionell war die Schöpfung der Schriftart eine schwierige und anspruchsvolle Aufgabe, aber zum Glück ist es dank des Aufkommens einfacher Online -Tools wie ICOMOON, Fontastic oder Fontello viel einfacher geworden, Symbol -Schriftsätze zu erstellen. Mit jedem Tool können Sie Schriftarten erstellen, indem Sie vorgefertigte Symbole aus der öffentlichen Bibliothek "auswählen" oder Ihre eigenen vorbereiteten SVG-Dateien hochladen und zusammenstellen.
Erstellen Sie Ihr eigenes Symbol
Um Ihre eigenen Symbolschriften zu erstellen, besteht der erste Schritt darin, die Symbole zu entwerfen - wir werden Illustrator für diese Aufgabe verwenden - und sie dann im SVG -Format speichern.Bestätigen Sie den Designstil
Führen Sie zunächst einige Lesbarkeitstests an verschiedenen Größen durch und erstellen Sie eine Vorlage zum Zeichnen aller Glyphen. Die wunderschön detaillierten Symbole, die Design bei niedrigeren Auflösungen nicht funktioniert, sind nutzlos.
Es ist auch nützlich, vor dem Zeichnen Schriftkizzen zu zeichnen, und selbst eine sehr grobe Skizze (siehe unten) kann Ihnen helfen, Ideen für alle Symbole zu finden, die Sie benötigen.
Sie können dann die Netzgröße für die Glyphe bestimmen. Mein Rat ist nicht, nicht direkt auf die Zielgröße (z. B. 16x16px) oder sehr große Größen zu zeichnen. Stattdessen stellte ich fest, dass ein Gitter von 60-80px normalerweise gut für mich ist. Das Auf- oder Ab von dieser Größe ist normalerweise erfolgreich.
Dies ist natürlich keine "eigenständige" Regel: Projektanforderungen und Erfahrung können von Situation zu Situation variieren.
In diesem Artikel habe ich mich für 8PX -Striche entschieden, um das Symbol zu zeichnen, nicht zu füllen und es in ein 64x64px -Gitter einzustellen.
Zeichnen
Artboards Illustrator funktionieren sehr nützlich: Sie können jede Glyphe in verschiedenen Artboards zeichnen und jede Glyphe in einer einzelnen Datei speichern. Die ARTboard kann als eigenständige SVG -Datei umbenannt und als eigenständige SVG -Datei exportiert werden (genau das brauchen wir für ICOMOON).
Jedes ARTBOD kann auch unabhängige Achsenkoordinaten haben, was für die Objektausrichtung sehr wertvoll ist, die wir später sehen werden.
Jetzt können wir ein neues 64x64px -Illustrator -Dokument erstellen:
Beachten Sie, dass Sie mit der Option "Anzahl der Arttboards" alle Artboards erstellen können, die Sie gewünscht haben.
Jetzt können wir das Netz einrichten. Wir möchten, dass es mit jedem Artafel -Ursprung (obere linke Ecke) beginnt und die ARTboard in 8x8 Checkerboard -Netze unterteilt. Schauen wir uns zuvor einen kurzen Blick darauf an, wie das Illustrator -Koordinatensystem funktioniert.
Illustrator Workspace besteht aus einer Leinwand mit einem oder mehreren Artboards.
Die Kunstboote befindet sich auf der Leinwand, beginnend mit einem Punkt, der den Ursprung des globalen Herrschers bezeichnet. Darüber hinaus verfügt jede Artboard auch einen eigenen originellen Ursprung und Herrscher. Wenn Sie mit dem Kunstboard -Tool eine neue Kunstboard finden, werden Sie immer einen globalen Herrscher verwenden. In fast jedem anderen Fall verwenden Sie das ARTboard -Lineal gemäß der Ansicht → Lineal → Wechsel zu den Optionen für die artboard (oder globalen) Herrscher.
Wenn Sie ein globales Herrscher verwenden, wird jedes auf einer Kunstboard gezogene Objekt relativ zu diesem einzelnen Ursprung gezeichnet (d. H.
globales Herrscher -Ursprung). Andernfalls beziehen sich die Koordinaten auf den Ursprung des es enthaltenden ARTboards. Kurz gesagt, verwenden Sie das ARTboard -Lineal -System:
Die Kunstboote befindet sich in der Leinwand gemäß dem
globalen Lineal -Ursprung Für diese Arbeit werden wir das ARTboard -Lineal verwenden, da es besser für die Glyphenausrichtung geeignet ist. 
Illustrators Gitter wird vom Arbeitsbereich aus dem globalen Herrscherorschinenraum gesetzt. Sie können Einstellungen → Führer und Gitter auswählen, um seine Eigenschaften festzulegen. Da wir unsere 64x64px -Leinwand in 8 Teile unterteilen wollen, eines auf jeder Seite, setzen wir alle 16px eine Hauptnetzlinie (dies führt dazu,
Unser Netz sollte jetzt perfekt auf unsere Kunstkarte ausgerichtet sein:
Überprüfen Sie Mark im Kreis:
Aber das Ergebnis ist nicht das, was wir erwartet haben: Illustrator richtet den
aus, ohne die Schlaganfallbreite zu berechnen. Zum Glück kann dies leicht gelöst werden, indem die Option Preview -Grenzen in der Einstellungsgrenze festgelegt wird. Der Illustrator berechnet nun die Schlaganfallbreite innerhalb der Kunstkarte, unabhängig von Ausrichtung und Größe, wodurch das Zeichnen schneller und genauer wird.
Komplette Glyphenzeichnung
Sie können die Artboards dann leicht neu ordnen, indem Sie Objekt → ARTBODE → Um ordnen (oder den Befehl neu ordnungsgemäß im Menü mit dem Kunstboard -Panel neu ordnen) und in der Reihenfolge in der ARTboard -Panel neu ordnen.
Beachten Sie, dass Glyphen immer alphabetisch hochgeladen werden. Wenn Sie also möchten, dass die ARTboard -Bestellung in Illustrator die Glyphen in Schriftarten entspricht, denken Sie daran.
Namen für jedes Kunstboard (ohne Leerzeichen): Dies wird zum Namen der Glyphen und des Klassennamens des generierten CSS. Daher ist es sehr wichtig, sinnvolle Wörter zu verwenden.
Obwohl wir häufig Striche verwenden, um Symbole zu zeichnen, gibt es einige besondere Bedürfnisse für die Schöpfung von Schriftarten. Wir müssen uns erinnern:
Sie können den Befehl Extend verwenden, um Pfade zu konvertieren, um Formen zu füllen und das Pfadfinderfeld schnell überlappende Formen zu einzelnen Elementen zu kombinieren.
Wenn die Glyphe fertig ist, können wir jede Glyphe als separate SVG -Datei im Dialogfeld Speichern als Dialogfeld speichern, indem wir die Option "ARTboard verwenden".
Illustrator speichert SVG -Dateien, indem der Name .ai Dokument (icons_) vorangestellt wird. Da ICOMOON Dateinamen als Glyphen verwendet, bevorzuge ich dieses Präfix (es gibt viele kleine Anwendungen, die problemlos alle Dateien umbenennen können), um Verwirrung zu verringern.
Laden Sie die Datei auf iComoon
hoch hochICOMOON -Website bietet eine Online -Bewerbung zum Erstellen von Symbolschriften. Die App beginnt mit unbenannten Elementen und bietet Zugriff auf eine kostenlose Symbolbibliothek, aus der Sie Symbole auswählen können.
Da wir unsere eigenen Glyphen hochladen, können wir alle vorinstallierten Bibliotheken mit dem kleinen Menü rechts in jeder Bibliothek löschen (beachten Sie, dass dies nicht obligatorisch ist, da nur die ausgewählten Symbole Ihrer Schriftart hinzugefügt werden). Es hält Ihr Projekt einfach einfach.
Sie können dann rechts neben der Anwendungsmenüleiste auf das Projektsymbol verwalten, um Ihr Projekt zu speichern. Beachte .
Sie können jetzt Ihre SVG -Datei mit der Schaltfläche Symbol importieren: Ihr Glyphe wird in der Anwendung als Sammlung angezeigt. Jede Glyphe kann mithilfe der von der Anwendung in dieser Phase bereitgestellten Tools problemlos neu arrangiert, gelöscht oder bearbeitet werden. Sie können auch die Sammelmetadaten (den Namen der Sammlung und einige Autoreninformationen) bearbeiten oder andere Aufgaben mit dem kleinen Menü auf der rechten Seite der Sammlung ausführen.
Symbole können mit dem Bearbeitungswerkzeug in der Anwendung bearbeitet werden. Sie können die Vektordaten nicht auf diese Weise ändern, aber die Größe des Glyphs ändern oder verschieben, die SVG -Datei herunterladen oder ersetzen.
Um eine Schriftart zu erstellen, müssen Sie zunächst das Auswahlwerkzeug verwenden, um alle erforderlichen Symbole auszuwählen (gegebenenfalls können Sie auch den Befehl "All/No Wählen Sie alle auswählen" im Menü Sammlung verwenden ). Sie können ausgewählte Glyphen über ihre gelben Grenzen identifizieren. Anschließend müssen Sie unten auf der Seite auf die Schaltfläche Schriftart klicken.
Die Anwendung lädt ein Helferfenster mit allen ausgewählten Symbolen und zeigt jedes Symbol den Glyphen, den Namen und die Unicode -Punkte an, die von Icomoon innerhalb des PUA -Bereichs zugewiesen werden. Die Verwendung von PUA -Bereichen gilt als der sicherste Unicode -Bereich für Host -Symbole in den PUA -Bereichen. Icomoon ermöglicht es Ihnen jedoch, den Standard -Latin -Reichweite der Standard -Basis zu verwenden, indem Sie oben auf die Schaltfläche "Code" klicken, wenn Sie es vorziehen.
Sie können jedem Charakter auch einen anderen Range -Code zuweisen, indem Sie einen neuen Code oder Zeichen manuell einfügen:
Fügen Sie vor dem Herunterladen der Schriftart den Schriftnamen hinzu (dies wird für die @font-face -Regel verwendet) sowie das Klassenpräfix und/oder das Suffix (dies wird als Selektor im generierten CSS verwendet).
Sie können viele andere Parameter festlegen: Von Metadateninformationen zu metrischen Werten empfehle ich die kurze und gut erklärte Dokumentation sorgfältig, um alle Parameter korrekt festzulegen.
Ihr Symbolsatz ist fertig! Laden Sie Ihre Schriftart herunter (oder, wenn Sie ein Premium -Konto haben, einfach zu CSS verlinken) und fügen Sie es Ihrem Projekt hinzu.
Die heruntergeladene .ZIP-Datei enthält Schriftarten in verschiedenen Formaten, Demo-Dateien, die Sie als Referenz verwenden können, .json-Dateien, die erneut aufgefordert werden können, um das Projekt wiederherzustellen (z. B. auf einem anderen Computer anzeigen) und von von Natürlich gibt es auch .CSS -Dateikodier -Symbol.
CSS (Sie können unten ein Beispiel sehen) enthält @font-face Regeln und alle Symbolauswahl.
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?-88cxph');
src:url('fonts/icomoon.eot?#iefix-88cxph') format('embedded-opentype'),
url('fonts/icomoon.woff?-88cxph') format('woff'),
url('fonts/icomoon.ttf?-88cxph') format('truetype'),
url('fonts/icomoon.svg?-88cxph#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="myicon-"], [class*=" myicon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.myicon-alert:before {
content: "\e600";
}
.myicon-arrow-down:before {
content: "";
}
/* etc */Ich habe festgestellt, dass dies eine sehr schnelle Möglichkeit ist, Symbolschriften zu erstellen, aber es braucht sicherlich Zeit, um den perfekten Workflow zu finden und alle Optionen zu testen, die sowohl Illustrator als auch Icomoon bieten können.
Ich wünsche Ihnen eine glückliche Zeit!
(Folgendes ist der FAQ
FAQs (FAQ) zum Erstellen von Symbolschriften mit Illustrator und ICOMOONF: Was sind die Vorteile des Erstellens von Symbolschriften mit iComoon?
A: ICOMOON ist ein leistungsstarkes Tool, mit dem Sie Ihr eigenes Symbolsatz erstellen und verwalten können. Es bietet eine Vielzahl von Symbolen zur Auswahl, und Sie können auch Ihr eigenes SVG importieren, um benutzerdefinierte Symbolschriften zu erstellen. Der Vorteil der Verwendung von iComoon besteht darin, dass es den Prozess des Erstellens von Symbolschriften vereinfacht, die auch von Anfängern leicht verwendet werden können. Außerdem können Sie die Größe, Farbe und andere CSS -Eigenschaften des Symbols steuern und eine größere Flexibilität im Design bieten.
F: Wie importiere ich meine eigene SVG in iComoon?
A: Stellen Sie zunächst sicher, dass Ihr SVG korrekt optimiert ist, um Ihr eigenes SVG in ICOMOON zu importieren. Gehen Sie dann zur ICOMOON -App und klicken Sie auf die Schaltfläche "Symbol importieren". Dort können Sie Ihre SVG -Datei auswählen und hochladen. Nach dem Hochladen wird Ihr Symbol im Abschnitt "Ihre benutzerdefinierten Symbole" angezeigt, um zu Ihrem Symbol hinzugefügt zu werden.
F: Kann ich mit Adobe Illustrator SVGs für ICOMOON erstellen?
A: Ja, Sie können mit Adobe Illustrator SVGs für ICOMOON erstellen. Illustrator ist ein leistungsstarker Vektorgrafikeditor, mit dem Sie SVG -Dateien erstellen und bearbeiten können. Nachdem Sie ein Symbol im Illustrator erstellt haben, können Sie es als SVG -Datei exportieren und dann in ICOMOON importieren, um ein Symbol zu erstellen.
F: Wie kann man die Größe und Farbe eines Symbols in iComoon kontrollieren?
a: In iComoon können Sie CSS verwenden, um die Größe und Farbe des Symbols zu steuern. Beim Generieren von Symbolschriften bietet ICOMOON eine CSS -Datei mit den Klassen für jedes Symbol. Sie können diese CSS -Datei bearbeiten, um die Größe, Farbe und andere Eigenschaften des Symbols zu ändern.
F: Was sind die besten Praktiken zum Erstellen von Symbolschriften in Icomoon?
a: Beim Erstellen von Symbolschriften in ICOMOON sollten Sie einige Best Practices im Auge behalten. Stellen Sie zunächst sicher, dass die SVG korrekt optimiert wird, bevor Sie sie in ICOMOON importieren. Zweitens versuchen Sie, das Symbol so klein wie möglich zu gestalten, um die Ladezeit der Website zu verkürzen. Denken Sie schließlich daran, Ihre Symbolschriften in verschiedenen Browsern zu testen, um sicherzustellen, dass sie korrekt angezeigt werden.
F: Kann ich Symbolschriften für Geschäftsprojekte mit iComoon erstellen?
A: Ja, Sie können ICOMOON verwenden, um Symbolschriften für Geschäftsprojekte zu erstellen. Sie sollten jedoch wissen, dass einige der von Icomoon bereitgestellten Symbole Lizenzbeschränkungen unterliegen. Überprüfen Sie immer die Lizenz des Symbols, bevor Sie sie in einem kommerziellen Projekt verwenden.
F: Wie füge ich meine Symbolschrift meiner Website hinzu?
A: Nachdem Sie eine Symbolschrift in ICOMOON erstellt haben, können Sie diese Ihrer Website hinzugefügt, indem Sie die von ICOMOON in der HTML der Website bereitgestellte CSS -Datei aufnehmen. Sie können das Symbol mit der in der CSS -Datei definierten Klasse zu Ihrer Website hinzufügen. F: Kann ich nach dem Erstellen des Symbols in Icomoon es bearbeiten? A: Ja, nachdem Sie das in iComoon festgelegte Symbol erstellt haben, können Sie es bearbeiten. Gehen Sie dazu in den Abschnitt "Projekte verwalten" in der ICOMOON -Anwendung. Dort können Sie Ihr Projekt auswählen und die erforderlichen Änderungen am Symbolsatz vornehmen. F: Wie stellen Sie sicher, dass meine Symbolschriften in allen Browsern korrekt angezeigt werden? A: Um sicherzustellen, dass Ihre Symbolschriften in allen Browsern korrekt angezeigt werden, sollten Sie sie während der Entwicklung in verschiedenen Browsern testen. Darüber hinaus stellt ICOMOON eine Icon -Schriftart -CSS -Datei mit den erforderlichen Browserkompatibilitätsbehebungen bereit. F: Was soll ich tun, wenn ich auf Probleme beim Erstellen von Symbolschriften in iComoon stoße? A: Wenn Sie Probleme haben, Symbolschriften in ICOMOON zu erstellen, können Sie sich auf die ICOMOON -Dokumentation verweisen oder das ICOMOON -Support -Team wenden, um Hilfe zu erhalten. Darüber hinaus gibt es viele Online -Communities und Foren, in denen Sie Hilfe und Rat einholen können.
Das obige ist der detaillierte Inhalt vonErstellen Sie eine Symbolschrift mit Illustrator und iComoon. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
