Ein Leitfaden für bessere und schärfere UI-Symbole mit Webfonts

Wenn Sie mit der Verwendung von Bitmap-Bildformaten (wie PNG und GIF) zur Anzeige von Symbolen auf einer Website vertraut sind, sind Sie auch mit den Unzulänglichkeiten vertraut. Je nach Größe und Anzahl der Farbinformationen des Symbols kann die Größe der Symboldatei sehr groß sein.

Wenn wir zu viele Symbole für eine Website haben, kann dies auch die Leistung der Website beeinträchtigen, da viele HTTP-Anforderungen vom Browser ausgeführt werden müssen. Obwohl dieses Problem mit CSS-Sprite gelöst werden kann, ist die Dateigröße immer noch groß.

Das Bitmap-Symbol weist auch Mängel in Bezug auf Flexibilität und Skalierbarkeit auf. Nehmen wir an, wir müssen das Symbol auf eine bestimmte Ebene vergrößern oder verkleinern oder es mit einer sehr hohen Bildschirmauflösung betrachten, z. B. auf dem Retina-Display. das icon wird definitiv verschwommen aussehen.

Nun, wenn Sie einige der oben genannten Punkte berücksichtigen, müssen Sie wahrscheinlich Icon-Schriftarten verwenden.

Symbolschriftarten verwenden

Ein Symbolschriftart ist eine Gruppe von Symbolen, die in einer Webschriftart gepackt sind und später in eine Website eingebettet werden können @Schriftart. Wie Chris beim CSS-Trick gezeigt hat, gibt es viele Vorteile, wenn Sie die Schrift über das Bild setzen, um Symbole zu liefern.

Font ist ein vektorbasiertes Objekt, das naturgemäß auflösungsunabhängig ist. Das Symbol wird daher bei verschiedenen Bildschirmauflösungen, einschließlich sehr hoher Bildschirmauflösungen (z. B. Retina-Ebene), scharf dargestellt..
Es ist außerdem skalierbar, sodass es auf vielen Ebenen vergrößert werden kann, ohne an Qualität und Präzision zu verlieren.
Da das Icon grundsätzlich eine Schrift ist, wir können auch die Farbe, die Transparenz, den Textschatten steuern und sogar die Größe des Stylesheets ändern
Wir können das Symbol auch mit CSS3 animieren.
Das Symbol wird mit der @Schriftart Regel, die bereits ab Internet Explorer 4 (mit .eot) unterstützt wurde.
Weniger HTTP-Anforderung und geringere Dateigröße.

Hier sind einige der besten kostenlosen Symbolschriften, die wir finden können:

Schrift fantastisch
IcoMoon
Social Media-Symbole
Zurb Foundation Icons

Stellen Sie sicher, dass Sie die Lizenz geprüft und befolgt haben, bevor Sie sie in Ihre Website einbetten, um die Zeit und harte Arbeit des Autors zu würdigen.

@ font-face-Regel

Wie bereits erwähnt, werden die Icons mit eingebettet @Schriftart Regel durch das Stylesheet, das neu definiert Schriftfamilie. Im folgenden Beispiel verwenden wir die Websymbole.

 @ font-face font-family: 'WebSymbolsRegular'; src: url ('fonts / websymbols-regular-webfont.eot'); src: url ('fonts / websymbols-regular-webfont.eot? #iefix') format ('embedded-opentype'), url ('fonts / websymbols-regular-webfont.woff') format ('woff'), url ('fonts / websymbols-regular-webfont.ttf') format ('truetype'), url ('fonts / websymbols-regular-webfont.svg # WebSymbolsRegular') format ('svg');

Dann müssen wir im HTML-Dokument nur die Zeichen hinzufügen, die das Symbol darstellen, und nicht das neue anwenden Schriftfamilie Im Allgemeinen können wir im Dokument spezifischer vorgehen, indem wir bestimmten Elementen, in die das Symbol gerendert werden muss, eine zusätzliche Klasse hinzufügen.

  h
 ich
 j
 EIN
 ich

Zurück zum Stylesheet definieren wir das Neue Schriftfamilie für diese Klasse, die wir gerade hinzugefügt haben:

 .icon-font font-family: WebSymbolsRegular; Schriftgröße: 12pt;

Demo @ font-face

Verwendung von Pseudoelementen

Wenn das Symbol als Seitenelement behandelt wird, können wir das Symbol auch durchgeben Pseudoelement. Angenommen, unser HTML-Markup lautet wie folgt:

  Antworten
 Allen antworten
 Nach vorne
 Befestigung
 Bild

Wir können das im Stylesheet so machen:

 ul.icon-font.pseudo li: vor font-family: WebSymbolsRegular; Rand rechts: 5px;  ul.icon-font.pseudo li: nth-child (1): before content: "h";  ul.icon-font.pseudo li: nth-child (2): before content: "i";  ul.icon-font.pseudo li: nth-child (3): before content: "j";  ul.icon-font.pseudo li: nth-child (4): before content: "A";  ul.icon-font.pseudo li: nth-child (5): before content: "I";

Demo-Pseudoelement

Privater Gebrauch Unicode

Es gibt einen Umstand, bei dem die Symbole nicht in Buchstaben (A, B, C, D usw.), sondern in Unicode Private Use eingebettet wurden, um das Zusammentreffen von Zeichen zu minimieren. Wie in FontAwesome hat der Autor zum Glück den gesamten Zeichencode im Stylesheet hinzugefügt, der so aussieht.

 .icon-glass: vor content: "\ f0c6";

Wenn das Symbol jedoch direkt in den HTML-Code eingebettet werden muss, ähnelt der folgende Code \ f0c6 Das gerichtete Symbol wird nicht gerendert, da es kein gültiges Zeichen ist, das in HTML codiert ist.

HTML benötigt eine numerische Referenzmarkierung Sonderzeichen zu rendern. In unserem vorherigen Tutorial über CSS3-Buttons haben wir uns etwas damit beschäftigt. Diesem Zeichen wird eine Kombination aus einem kaufmännischen Und-Zeichen vorangestellt (&), ein Hash-Zeichen (#) und ein x gefolgt von der Hexadezimalzahl, die das Zeichen darstellt.

Zum Beispiel die f0c6 ist eine Hexadezimalzahl, daher wird die numerische Zeichenreferenz in HTML verwendet & # xf0c6;, In FontAwesome zeigt dieser Code die Büroklammer-Symbol, wie so;

Demo-Unicode

Font-Subsetting

Die Symbole in der Sammlung werden möglicherweise nicht alle benötigt. In diesem Fall können wir die unbenutzten Zeichen löschen, indem wir die Schriftart auch untersteuern Dies führt zu geringeren Schriftgrößen. Glücklicherweise gibt es ein praktisches Tool von FontSquirrel, das diesen Job problemlos erledigt, den @ font-face-Generator.

Nachdem Sie zu dieser Seite gegangen sind und die Schriftart hinzugefügt haben, wählen Sie Experte. Sie werden einige weitere Optionen sehen. wählen Benutzerdefiniertes Subsetting.

In diesem Beispiel verwenden wir die Sociolico-Schriftart, um Social-Media-Symbole auf unserer Website anzuzeigen. Die benötigten Symbole sind jedoch nur Dribble, Facebook und Twitter, die jeweils durch diese Zeichen dargestellt werden. d, f und t. Geben Sie diese Zeichen also wie folgt in das Eingabefeld Einzelzeichen ein:

Und wir sind fertig. Jetzt können wir die Schriftart herunterladen und in meinem Fall hat sich herausgestellt, dass die Schriftgröße nur 3 KB bis 5 KB beträgt. Denken Sie auch daran, dass die einzigen Zeichen das sind In einem Symbol werden nur d, f und t dargestellt, während die anderen Zeichen nur einen normalen Buchstaben darstellen.

Letzter Gedanke

Eine Sache, die wir bei dieser Übung nicht tun können, ist, dem Symbol sehr detaillierte Effekte wie diese hinzuzufügen.

Wenn unser Gesamtdesign auf dieser Ebene jedoch keine Details erfordert, könnte dieser Ansatz eine bessere Methode sein, um Symbole auf Websites zu verwenden. Es bietet Flexibilität, Skalierbarkeit, ist für die Retina mit einer sehr geringen Dateigröße vorbereitet. Was können wir sonst noch verlangen??

Wenn Sie sich eingehender mit diesem Thema beschäftigen möchten, haben wir nachfolgend einige nützliche Referenzen sowie unsere Demo- und Quellcodes zum Download zusammengestellt.

So erstellen Sie Ihr eigenes Symbol Webfont - WebDesignerDepot.com
Anzeigen von Schriftarten und Datenattributen - 24Ways
Privater Gebrauch Unicode - Wikipedia

Demo
Quelle herunterladen