Wie man aus deinen Icons eine Webschrift macht
Ich hatte einige ordentliche Symbole für ein Website-Redesign erstellt, das ich gerade machte, und ich habe die neue Website auf einem alten iPad vorgelesen. Das Layout sah bei normaler Größe OK aus, aber wenn ich auf einen Teil der Seite zoome, sah ich plötzlich, dass mein Icon ein unscharfes Chaos war, während der textbasierte Header immer noch scharf und scharf war. Auf einem neueren Retina-Display-iPad sahen die Icons selbst bei normaler Größe nicht ganz scharf aus.
Die erste Idee, die ich hatte, war es, Sprites mit doppelter Größe zu erstellen, indem ich sie auf die Hälfte ihrer Größe mit CSS einstellen ließ. Während sie auf einem Retina-Display in normaler Größe besser aussahen, kehrte die Unschärfe zurück, sobald man anfing zu kneifen und zu zoomen. Aber der Text war immer noch so knackig und gestochen scharf.
Die Antwort war offensichtlich. Ich musste meine Icons in eine Schriftart umwandeln.
In diesem Tutorial werden wir uns ansehen, wie man Vektor-Icons mit Hilfe einer großen kostenlosen Web-App namens IcoMoon in eine Web-Schriftart verwandelt. Dann sehen wir uns an, wie die generierten Font-Dateien und CSS in einer Webseite verwendet werden.
Die Vorteile der Verwendung einer Symbolschrift
Eine Symbolschrift hat neben der Bildschärfe mehrere Vorteile gegenüber Bitmap-Bildern.
- Eignung: Eine Symbolschriftart ist in der Dateigröße viel kleiner als eine Reihe von Bildern, insbesondere wenn Sie für Retina-Anzeigen Bilder in doppelter Größe verwendet haben. Sobald die Schriftart geladen ist, werden Ihre Symbole sofort gerendert, ohne dass ein Bild heruntergeladen werden muss.
- Skalierbarkeit: Eine Symbolschrift kann auf eine beliebige Größe eingestellt werden, indem Sie die
font-sizeEigenschaft im begleitenden CSS. Dies ermöglicht Ihnen, mit verschiedenen Größen zu experimentieren; Bei Bitmap-Bildern hingegen müssten Sie für jede Größe eine Bilddatei ausgeben. - Flexibilität: Texteffekte können einfach auf Ihr Symbol angewendet werden, einschließlich Farben, Schlagschatten und Rollover-Status. Sie werden auch gut gegen jede Farbe oder Bildhintergrund angezeigt.
- Kompatibilität: Web-Fonts werden von allen modernen Browsern und älteren Browsern, auch IE 6 und früher, unterstützt.
Also lasst uns anfangen!
Erstellen einer Symbolschriftart
Symbol-Fonts können mit einer speziellen App zur Erstellung von Schriften erstellt werden, wie z Glyphen , aber ein professionelles Typografie-Tool geht weit über die Bedürfnisse oder Anforderungen hinaus, eine einfache Symbolschrift zu erstellen, bei der die Beziehung zwischen Zeichen (dh Kerning und Ligaturen) nicht wichtig ist.
Bei weitem der einfachste Weg ist, eine große kostenlose Online-App namens IcoMoon , von Keyamoon, die den ganzen Aufwand bei der Umwandlung von Symbolen in eine Webschrift überflüssig macht.
Diese HTML5-Anwendung nimmt Ihnen die Mühe, Schriftdateien für einfache Anwendungen wie das Erstellen von Symbolschriften zu erstellen. IcoMoon wird mit einer Reihe von bereits geladenen Icon-Sets geliefert, und Sie können Ihrer Bibliothek weitere hinzufügen, von denen die meisten kostenlos genutzt werden können (überprüfen Sie die Lizenzierung). Wenn Sie nach Standardsymbolen wie "Dateidownload" und "Einkaufswagen" suchen, sollten Sie feststellen, dass die Verwendung einer dieser Dateien der Erstellung eigener Dateien vorzuziehen ist.
Schritt für Schritt
1. Bereiten Sie Ihre Illustrationen vor
Zu Beginn müssen Sie die Symbole in einem Vektorgrafikprogramm erstellen, das in das SVG-Format exportiert werden kann, z. B. Illustrator oder Inkscape.
Während Sie entwerfen, können Sie mit beliebigen Farben arbeiten, aber die Symbole müssen eine Farbe haben. Stellen Sie sicher, dass jedes Symbol ungefähr die gleiche Größe hat. Wenn ein Symbol viel größer oder länger als ein anderes ist, wird es schwierig, eine konsistente Schriftart zu erstellen. Hier musste ich die Breite meines Luftschiffsymbols reduzieren, damit es mit den anderen übereinstimmt.
2. Aufräumen
Überprüfen Sie jedes Symbol sorgfältig, um sicherzustellen, dass es keine Unvollkommenheiten aufweist - Details, die bei kleineren Größen OK aussehen, können beim Heranzoomen kleine Defekte verbergen. In dem unten gezeigten Symbol muss ich die gezackten Schritte entfernen, die sich bei Ebenenelementen eingeschlichen haben.
Verwenden Sie in Illustrator das Pathfinder-Werkzeug, um überlappende Elemente zu vereinen, und das Minus-Front-Element, um ausgeschnittene Elemente zu entfernen, z. B. den Stern in diesen Symbolen.
Das Schlüsselprinzip besteht darin, sicherzustellen, dass Ihr Symbol in kleinen Maßstäben lesbar ist. Vereinfachen Sie so viel wie möglich.
3. Exportieren nach SVG
Wählen Sie nun ein Symbol aus, kopieren Sie es und fügen Sie es in ein neues quadratisches Dokument ein (z. B. 200 × 200 Pixel). Skalieren Sie das Symbol so, dass es passt. Sie können es nützlich finden, ein Grundlinienlineal zu setzen. Färben Sie das Symbol so, dass es auf einem weißen Hintergrund schwarz ist.
Jetzt wähle File… Save as und speichern Sie die Datei als SVG-Datei. Verwenden Sie die SVG-Standardeinstellungen. Sobald Sie dies für alle Symbole getan haben, können Sie eine Webschriftart erstellen.
4. Importieren Sie in IcoMoon
Öffne das IcoMoon Web App . Um ein Symbol zu importieren, klicken Sie auf die Schaltfläche "Symbole importieren" und wählen Sie dann die SVG-Dateien aus, die Sie hinzufügen möchten. Sie können mehrere Dateien gleichzeitig hinzufügen. Diese werden dann unter "Ihre benutzerdefinierten Symbole" angezeigt. Wenn sie gelb markiert sind, werden sie Teil der Symbolschrift sein, die Sie erstellen. In diesem Beispiel können Sie sehen, dass ich mich entschieden habe, eines meiner eigenen Symbole nicht zu exportieren, und ich habe eines der Symbole aus den "Mini-Symbolen" hinzugefügt.
5. Exportieren Sie die Schriftart von IcoMoon
Sie können auf die Schaltfläche "Bearbeiten" klicken, wenn Sie die Position, Größe oder Drehung des Symbols anpassen möchten. Verwenden Sie die Schaltfläche "Kopie speichern", um Symbolvariationen zu erstellen (z. B. ein Spiegelbild eines Symbols). Fügen Sie dem Symbol ein aussagekräftiges Tag hinzu, da damit der Klassenname für das Symbol generiert wird.
Wenn Sie fertig sind, klicken Sie auf die Schaltfläche "Schriftart" am unteren Bildschirmrand, um mit dem Generieren der Schriftart zu beginnen. Hier können Sie festlegen, welches Symbol welchem Zeichen zugeordnet wird. Wenn Ihr Icon-Set beispielsweise aus sechs Bildern eines sich drehenden Balls besteht, können Sie den sechs Frames die Zeichen q, w, e, r, t und y zuweisen. Wählen Sie in den Einstellungen einen Schriftartnamen aus. Sie können auch die Metrik der Schriftart anpassen, aber wenn Sie nicht neben Standardtext Ihre benutzerdefinierte Schriftart festlegen, brauchen Sie sich darüber keine Gedanken zu machen.
6. Laden Sie die Schriftartdateien herunter
Klicken Sie auf "Download", um das Font Pack auf Ihren Computer herunterzuladen. Es wird ein Unterordner sein, der die Schriften selbst enthält (in den Formaten WOFF, EOT und TTF), sowie eine Beispiel-HTML-Seite und das entsprechende CSS. Es gibt sogar eine JavaScript-Datei mit einer Problemumgehung, wenn Sie IE 6 oder 7 unterstützen müssen.
Um die Schriftarten zu Ihrem Projekt hinzuzufügen, kopieren Sie den Schriftartenunterordner auf Ihre Site. Sie können das CSS aus style.css kopieren und in die CSS-Datei Ihrer eigenen Site einfügen , aber ich möchte es als fonts.css umbenennen und als separate CSS-Datei speichern. Sie müssen dann einen Verweis auf diese CSS-Datei in Ihrer HTML-Datei hinzufügen, indem Sie den entsprechenden Link verwenden:
<link rel="stylesheet" href="fonts.css" />Im @ font-face- Element der CSS-Datei müssen Sie den URL-Verweis auf den neuen relativen Speicherort der Schriftarten ändern, oder Sie können den Schriftartenordner einfach in Ihrem Stylesheet-Ordner löschen.
7. Die Schriftart aufrufen
Wie Sie in der Datei index.html sehen können , gibt es zwei Möglichkeiten, auf die benutzerdefinierte Schriftart zu verweisen, entweder anhand ihres Zeichens (Unicode oder Name) oder anhand ihres Klassennamens. Das erste Beispiel verwendet die HTML5 -Datensymbolbedingung
<div aria-hidden="true" data-icon="g"></div>Hier wird die fs1- Klasse verwendet, um die Größe der Schriftart festzulegen . Die Aria-Hidden- Referenz hilft sicherzustellen, dass der Charakter von keinem Screenreader gesprochen wird.
Die zweite Methode verwendet ein span-Element:
<span aria-hidden="true"></span>Diese Methode ist nützlich, wenn Sie möchten, dass das Symbol in normalem Text angezeigt wird.
Wenn Sie das Symbol als Link verwenden möchten, können Sie es in eine href einfügen :
8. Fortgeschrittene Ideen
Wie wir gerade mit dem Hover-Status festgestellt haben, ist das Ändern der Farbe des Symbols so einfach wie das Festlegen der color -Eigenschaft in unserem CSS, und das Ändern der Größe ist so einfach wie das Festlegen der font-size -Eigenschaft. Sie können auch andere Eigenschaften festlegen, z. B. Textschatten und Transparenz, und dabei die Unabhängigkeit der Auflösung einer Schriftart beibehalten.
Probieren Sie es aus, und ich garantiere Ihnen, dass Sie nie wieder Bitmap-Symbole verwenden werden.
Haben Sie versucht, Schriftarten für Symbole zu verwenden? Wie hast du es gefunden? Lassen Sie es uns in den Kommentaren wissen.