Share
Die Entwicklung der Internettechnologien überrascht immer wieder. Scheinbar täglich werden neue Konzepte und Techniken von kreativen und talentierten Menschen durchdacht. Da moderne Browser schneller angenommen werden, können Systeme wie CSS3 werden immer mehr für Projekte aller Größen. Dies ist offensichtlich, wenn Sie sich neue Online-Dienste wie TypeKit ansehen. Wenn wir eine Schriftart in ihre grundlegenden Elemente zerlegen, können wir diese Technologie konzeptionell für andere Zwecke als Typ, Symbole verwenden.
Für eine kurze Zeit begannen die Entwickler, Websites zu erstellen, die den Bandbreitenverbrauch wenig beachteten. HTML und CSS wo restriktiv und Adobe Flash eine offene Leinwand für Designer und Entwickler war, in die Animationen und komplexe Layouts eingefügt werden konnten. Dies führte zu extrem extremen Websites, an die wir uns alle erinnern. Das waren die Tage vor der Verbreitung von mobilen Smartphones.
Da Smartphones häufiger auf das Internet zugreifen, sind die Bandbreiten- und Seitenladegeschwindigkeiten plötzlich wieder in den Vordergrund gerückt. Zum Glück Fortschritte in HTML, CSS, und JavaScript haben das alles möglich gemacht. Die Geschwindigkeit und Reaktionszeit der Webseite ist von zentraler Bedeutung HTTP fordert, dass eine Seite geladen werden muss. Moderne Browser begrenzen die Anzahl der Anfragen an einen einzelnen Server. Die W3C HTTP 1.1-Spezifikation liest
„Ein Einzelbenutzer-Client SOLLTE NICHT mehr als 2 Verbindungen zu einem Server oder Proxy aufrechterhalten. Ein Proxy sollte bis zu 2 * N-Verbindungen zu einem anderen Server oder Proxy verwenden, wobei N die Anzahl der gleichzeitig aktiven Benutzer ist. Diese Richtlinien sollen sich verbessern HTTP Reaktionszeiten und vermeiden Sie Staus. “
Eine Technik, die immer beliebter wird, ist die Verwendung von CSS Sprites. CSS Sprites reduzieren die Anzahl von HTTP Anfragen an den Webserver durch Kombinieren vieler kleinerer Bilder zu einem einzigen größeren Bild und Definieren einer Blockebene CSS Element, um nur einen definierten Teil des größeren Bildes anzuzeigen. Die Technik ist einfach, aber genial.
Fonts auf ihrer grundlegendsten molekularen Ebene sind eine Reihe von Vektor-Glyphen, die in einem einzigen "Glyphen-Archiv" zusammengefasst sind..
CSS3 hat in die Webentwicklungswelt die Fähigkeit eingeführt, Schriften in die. einzubetten @Gesicht Gesicht Erklärung. Ohne Zweifel ist dieser Fortschritt bei den Internettechnologien eine der aufregendsten und wichtigsten Etappen unserer kurzen Geschichte. Mit Entwicklern, die Schriftarten ihrer Wahl einbetten können, können Designer Layouts erstellen, die von Plattform zu Plattform weitaus konsistenter werden, wodurch die Kunst des interaktiven Layouts näher an die Druckversion des Druckers gebracht wird.
Wenn wir uns die Technologie hinter einer Schriftart genauer ansehen, können wir ein viel besseres Verständnis davon erlangen, wie sie verwendet und eingesetzt werden können. Schriftarten auf ihrer grundlegendsten molekularen Ebene sind eine Reihe von Vektor-Glyphen, die in einem einzigen "Glyphen-Archiv" zusammengefasst sind. Wir können dann jede Glyphe durch ihren entsprechenden Zeichencode referenzieren. Theoretisch ist dies sehr ähnlich der Art und Weise, wie wir ein Array in fast jeder Programmiersprache referenzieren - über ein Schlüssel / Wert-Paar.
In Anbetracht dessen können die Glyphen, auf die wir uns beziehen, wirklich jedes vektorbasierte einfarbige Bild sein. Das ist nichts Neues - wir haben alle Dingbats und Webdings gesehen. Sie sind zwei Beispiele für Schriftarten außerhalb des Typs, d. H. Eine Reihe von vektorbasierten Bildern, die in einem einzigen Zeichensatzarchiv zusammengefasst sind.
Mit dem Aufkommen der Schrifteneinbettung und der Erkenntnis, dass Schriften im Wesentlichen aus einer Reihe von einfachen Vektor-Glyphen bestehen, begann ich zu experimentieren, wie ich dieses Format zu meinem Vorteil nutzen kann. Wenn ich alle benötigten Symbole für eine bestimmte Website in eine benutzerdefinierte Schriftart einfügte, könnte ich diese Symbole an einer beliebigen Stelle der Website verwenden, um die Größe und Farbe zu ändern, Hintergründe, Schatten und Rotationen sowie nahezu alles andere hinzuzufügen sonst CSS wird Text zulassen. Der zusätzliche Vorteil ist eine Single CSS Sprite-like HTTP anfordern.
Zur Veranschaulichung habe ich eine neue Schriftart mit einigen der großartigen Icons von Brightmix erstellt.
Ich habe die Kleinbuchstaben für einfache Symbole und die Großbuchstaben für dasselbe Symbol in einer kreisförmigen Behandlung verwendet.
Um mein neues Icon-Pack verwenden zu können, muss ich zunächst meine Zeichensatzdateien als verschiedene Schriftdateien (.eot, .woff, .ttf, .svg) exportieren, um mit allen Browsern kompatibel zu sein. Das Thema Einbetten von Schriftarten und Konvertieren von Dateiformaten wird an anderer Stelle behandelt, daher verzichte ich hier auf eine ausführliche Erklärung. Jedoch die CSS würde so aussehen.
Accentsconagua
@ font-face font-family: 'IconPack'; src: url ('iconpack.eot'); src: local ('IconPack'), URL ('iconpack.woff') - Format ('woff'), URL ('iconpack.ttf') - Format ('truetype'), URL ('iconpack.svg # IconPack') ('svg'); Nach dem Einbetten habe ich jetzt ein komplettes Symbol im Vektorformat als Referenz. Um auf ein Symbol zu verweisen, brauche ich einfach einen Stil, der das Symbol enthält Schriftfamilie von “IconPack”.
ein
Das obige Beispiel würde einen Stern darstellen und ist die grundlegendste Verwendung des Icon Pack-Konzepts, jedoch ist es aus Entwicklungssicht nicht sehr intuitiv, nicht SEO freundlich, noch im Fall von nicht zersetzt-CSS Unterstützung.
Um der Situation abzuhelfen, füge ich ein :Vor Pseudoelement und umschließen den Inhalt in ein Spanne Etikett.
Star
Jetzt wird der Stern zur Anzeige hinzugefügt, und ich kann die Sichtbarkeit des Textes mit Hilfe von ändern Show und verbergen Klassen. Das Ergebnis ist leicht zu referenzieren CSS Klasse, die sich grazil abbaut und für Suchmaschinen optimiert ist. Für meine gesamten Icons kann ich unten etwas schreiben.
Bildschirmsymbol
Der Vorteil hierbei ist, dass das Symbol mit der Schriftgröße skaliert wird. Tatsächlich werden alle Symbole skaliert und sorgen für perfekte Klarheit.
Bis jetzt haben wir nur die Spitze des Eisbergs berührt, hier ist nichts wegweisend, obwohl Sie möglicherweise die Möglichkeiten erkennen. Eine wirkliche Weltkulisse wäre der Ersatz der Listenelement-Stil. Wenn Sie ein Bild verwenden möchten, können wir jetzt ein Vektorsymbol aus unserem Icon Pack verwenden. Der Vorteil hierbei ist, dass das Symbol mit der Schriftgröße skaliert wird. Tatsächlich werden alle Symbole skaliert und sorgen für perfekte Klarheit.
Da die Symbole jetzt auf unserer Seite platziert sind, als wären sie Text, können wir alle gültigen anwenden CSS Stil, ohne andere Assets herunterzuladen. Wir könnten uns bewerben Farbe, Schriftgröße, Text-Schatten, etc und nutzen Sie die :schweben Pseudoelement für Mouseover-Effekte - alles mit einer einzelnen Glyphe.
Wie bei allem gibt es einige unglückliche Einschränkungen. Zum jetzigen Zeitpunkt gibt es keine Möglichkeit, eine einzelne Glyphe mit mehreren Farben anzuzeigen. Es gibt einige CSS-Tricksereien, um Farbverläufe über Live-Text zu erhalten. Komplexe Formen mit unterschiedlichen Farben in einer einzelnen Glyphe sind jedoch eine Einschränkung. Es gibt jedoch Möglichkeiten, mehrfarbige Glyphen zu approximieren, indem die Teile einer Vektorgrafik in einzelne Glyphen zerlegt werden, die dann durch CSS auf der Seite zusammengefügt und eingefärbt werden.
Eine andere interessante Verwendung ist eine einfache CAPTCHA Validierung. Durch Ersetzen der Glyphen für das Alphabet durch Zahlen werden Benutzern Nummern angezeigt, der Seitencode wird jedoch aus Buchstaben bestehen. Einige einfache Berechnungen, um zwischen den beiden zu übersetzen, und Sie sind leicht zu lesen CAPTCHA.
Um diese Konzepte besser veranschaulichen zu können, habe ich eine Musterseite aus zwei Seiten zusammengestellt HTTP fordert den Seitencode und ein einzelnes Icon Pack an. Ebenfalls enthalten ist die Möglichkeit, die Schriftgröße der Seite zu skalieren, um die Flexibilität der Einbettung von Vektorzeichen zu demonstrieren. Das Firmenlogo, die Navigation, die Bilder und CAPTCHA verwenden alle Glyphen. Bitte beachten Sie die CAPTCHA hier enthalten ist nur zur Illustration. Um dies auf einer Produktionsstätte zu verwenden, würde ich empfehlen, serverseitig mit einem dynamischen Algorithmus zu validieren, wie er JavaScript zugewiesen ist.
Auf dieser Beispielseite wird auch die Verwendung einer Glyphe als skalierbarer "sich wiederholender" Hintergrund erläutert. Ich bin der Erste, der zugibt, dass diese Implementierung im besten Fall hack-ish ist, aber ich denke, sie demonstriert die Flexibilität und Vielseitigkeit des Icon Packs.
Dies eröffnet natürlich einige Möglichkeiten. Designer können Icon Packs zum Verkauf entwickeln, Unternehmen können ein einziges Icon Pack hosten, das auf allen Unternehmensmedien verwendet werden kann. Vorlagenentwickler können mühelos mehrere Farboptionen derselben Vorlage verteilen, ohne eine einzelne Datei speichern und exportieren zu müssen. Webdesigner können vorhandene Websites problemlos so skalieren, dass sie mit Handheld-Geräten kompatibel sind. Darüber hinaus macht diese Technik unsere Icons für die DOM Aktivieren Sie animierte Flash-ähnliche Effekte mit Ihrem bevorzugten JavaScript API.
Als Nutzung und Browserunterstützung für CSS3 Durchdringt die Icon-Packs bald einen großen Einfluss auf die Bereitstellung von Inhalten, wobei die leichtgewichtigen, skalierbaren Multi-Device-Trends, die sich zu einer Notwendigkeit entwickeln, weiterentwickelt werden.
