Share
Sehen wir uns einen alternativen Ansatz für die Anzeige von Logos auf einer Webseite an. Normalerweise nähern Sie sich der Herausforderung mit einer
Zunächst ein kurzes Wort zum Branding. Die visuelle Identität (wenn sie richtig gemacht wurde) ist sehr gründlich und sehr spezifisch gestaltet. Typografie, Farben, Whitespace, Varianten - Sehen Sie sich die Richtlinien zum Branding eines Unternehmens oder eines Unternehmens an, und Sie werden schnell auf die kleinen Interpretationsspielräume aufmerksam.
Logos können nicht angenähert werden; Sie müssen exakt reproduziert werden. Deshalb sind wir auf Bilddateien angewiesen, um sie auf Webseiten anzuzeigen.
Die meisten Webseiten zeigen ein Logo (was Sie wundert, warum es kein gibt
oder durch Verwendung einer Bildersetzungstechnik für den Inhalt des Ankers:
Logo
h1 a # logo font: 0/0 a; Text-Schatten: keiner; Farbe: transparent; Hintergrund: URL (images_19 / your-logo-as-a-web-font-ligature.png);
Das ist okay. Das Markup sagt "wichtige Überschrift, Link zur Homepage, mit indexierbarem (barrierefreiem) Inhalt, der uns sagt, worum es geht" Das CSS tauscht den Inhalt gegen visuell genaues Branding aus.
Aber was ist mit dem Problem der Bildschirme mit hoher Pixeldichte? Damit die oben genannten Techniken in einer Retina-Welt funktionieren können, müsste bei Bedarf eine zweite hochauflösende Version des Logos bedient werden. Oder stattdessen eine SVG-Version. Beide Möglichkeiten, aber wie wäre es mit Webschriftarten, indem wir unsere eigene Ligatur bestimmen?
Denk darüber nach:
Eine ausführliche Erklärung finden Sie in unserer Anatomie der Webtypografie. Zusammengefasst sind Ligaturen zweckmäßig entworfene Kombinationen von Zeichenpaaren. Wenn zwei Zeichen in einer Schriftart nebeneinander platziert aussehen (fl ein klassisches Beispiel) eine Ligatur kann so gestaltet werden, dass sie hilft. Die Ligatur-Glyphe wird dann der fraglichen Buchstabenkombination „zugeordnet“ (zugeordnet). Wenn der Browser auf diese Kombination stößt, schaltet er die Buchstaben für eine einzelne Ligatur aus.
Eine der vielen Ligaturen von Adobe Caslon Pro Dieses Prinzip muss nicht nur für den Brief gelten Paare entweder; Glyphen können ganzen Strings zugeordnet werden.
Unsere Ligatur-Glyphe wird ein gefälschtes App-Logo (mit dem Namen „Vectr“; der letzte Vokal wurde entfernt, um zu beweisen, dass es sich um eine App handelt…) und wird der Zeichenfolge „Vectr“ zugeordnet..
Machen Sie keinen Fehler, IcoMoon hat diesen Prozess leicht gemacht. Bevor IcoMoon auf den Markt kam, mussten Sie eine Schriftartentwurfsanwendung verwenden (der SVG-Schriftarteditor von Inkscape ist eine der wenigen Möglichkeiten, dies kostengünstig zu tun), um jede Glyphe auszurichten und abzubilden. Dann speichern Sie die Datei mit etwas Glück direkt als TTF (TrueType), alternativ als SVG-Datei, nach der Sie mit einem anderen Tool in TTF konvertieren. Dann laden Sie schließlich Ihre TTF-Datei in einen Webfont-Generator hoch, um Ihnen Ihr Endprodukt zu geben.
Mit IcoMoon müssen Sie nur noch Folgendes tun:
Bevor wir etwas anfangen, brauchen wir ein Logo in Vektorform. Viele Vektordateiformate können in einer Reihe von Grafikanwendungen geöffnet und bearbeitet werden. Encapsulated Post Script (EPS), Post Script (PS), PDF (Portable Document Format) und SVG (Scalable Vector Graphics) sind einige häufige Beispiele für den Umgang mit Vektoren.
In diesem Beispiel verwende ich Adobe Illustrator, aber der gesamte Prozess kann auf andere Anwendungen angewendet werden (z. B. Open-Source-Inkscape)..
Achten Sie zunächst auf Ihre Zeichenfläche. Wir entwerfen effektiv eine Schrift-Glyphe, die unter TrueType-Bedingungen ein Quadrat von 512, 1024 oder 2048 Pixel wäre. Dies ist eine Konvention, keine Anforderung, aber wir entscheiden uns für 1024px, um ein solides Raster von 64x16 zu erhalten. Ideal für das Entwerfen von Schriftarten mit einer Standardgröße von 16px.
Unsere Glyphe wird mit diesem ganzen Quadrat der Zeichenfläche ausgegeben, wodurch unsere "EM" -Messung effektiv definiert wird.
Beim Entwerfen ganzer Schriftarten ist es wichtig, alle Zeichen auf dieser Zeichenfläche relativ zueinander zu positionieren, damit sie alle auf derselben Grundlinie liegen.
Ich schweife ab…
Wenn unser Logo korrekt auf der Zeichenfläche positioniert ist, speichern wir die Datei als SVG. Es gibt keinen großen Unterschied (was unsere Zwecke betrifft) in den verschiedenen SVG-Einstellungen. Gehen Sie einfach zu den Standardeinstellungen und klicken Sie auf "Speichern"..
Starten Sie die IcoMoon.io-Web-App. Mit IcoMoon (entwickelt von dem sehr cleveren @Keyamoon) können Sie Symbol-Glyphen auswählen, sie den Zeichen Ihrer Wahl zuordnen und dann das @ font-face-Paket für die Verwendung im Internet herunterladen.
Es ebenfalls Damit können Sie Ihre eigenen Glyphen (als SVG oder TTF) hochladen, um sie Ihrer Sammlung hinzuzufügen. Importieren Sie die SVG-Datei, die wir gerade erstellt haben, und überprüfen Sie, ob das Miniaturbild mehr oder weniger gut aussieht.
Sie können das Logo neu positionieren und kleine Änderungen vornehmen, indem Sie die Stifttaste drücken und auf die Miniaturansicht klicken. Im Bearbeitungsbildschirm können Sie feststellen, dass die Kugeln am Ende jedes Griffs im Logo ein Problem haben.
Sie sehen, wo sich die Formen kreuzen? Wir haben nicht alle unsere Vektorobjekte in Illustrator richtig zusammengefügt. Daher muss ich zurückgehen und sicherstellen, dass dies ordnungsgemäß ausgeführt wird.
Wenn alles in Ordnung ist, bauen wir uns eine Ikonensammlung auf.
Wählen Sie die gewünschten Symbole aus, einschließlich Ihres Logos, und klicken Sie auf "(Generate) Font". An dieser Stelle erhalten Sie eine Vorschau jeder Glyphe, einschließlich der Zeichen oder Unicode-Objekte, denen sie zugeordnet werden.
Sie können die Zeichen selbst definieren (wenn Sie möchten) oder, wie in unserem Fall, eine ganze Zeichenfolge, die als Ligatur fungiert.
Öffnen Sie das Menü Einstellungen und aktivieren Sie das Kontrollkästchen "Ligaturen aktivieren". Jetzt können wir einen benutzerdefinierten Ligatur-String in das Feld über der Glyphe eingeben. In unserem Fall "Vectr" (und natürlich ist dies die Groß- und Kleinschreibung).
Im Einstellungsfenster können Sie sich auch dafür entscheiden, Ihre Schrift als Base64 herunterzuladen, eingebettet in das CSS selbst, anstatt sich auf dem Server als separate Schriftdateien zu befinden. Ich entscheide mich für die Base64-Kodierung, da uns das erspart sogar mehr HTTP-Anforderungen.
Wenn Sie jetzt auf "Download" klicken, werden Sie mit einer voll funktionsfähigen Demo ausgestattet. eine HTML-Datei, alle Schriftdateien und das zugehörige CSS.
Im Standard-CSS haben Sie die Wahl, alle Elemente mit a auszuwählen [Daten-Icon] Attribut oder verwenden Sie einfach eine Klasse Ihrer Wahl für Elemente, auf die Sie die Schriftdatei anwenden möchten. Wir haben auch eine ganze Reihe interessanter typografischer CSS-Regeln zur Verfügung. Einige davon sind browserspezifisch, aber es lohnt sich, einen Blick darauf zu werfen:
sprich: keine; / * Ligaturen aktivieren * / -webkit-font-feature-settings: "liga", "dlig"; -moz-font-feature-settings: "liga = 1, dlig = 1"; -moz-font-feature-settings: "liga", "dlig"; -ms-font-feature-settings: "liga", "dlig"; -o-font-feature-settings: "liga", "dlig"; Font-Feature-Einstellungen: "liga", "dlig"; Text-Rendering: OptimizeLegibility; font-style: normal; Schriftgewicht: normal; Schriftvariante: normal; Text-Transformation: keine; Zeilenhöhe: 1; -webkit-font-smoothing: antialiased;
Es gibt einige ziemlich experimentelle Regeln, um sicherzustellen, dass Ligaturen verwendet werden, wo immer dies möglich ist, und dann andere (eher standardisierte) Regeln, die unsere Textanzeige für die fraglichen Elemente zurücksetzen. Vor all dem wirst du sehen sprich: keine; Dies verhindert, dass der Inhalt von relevanten Geräten "gesprochen" wird (in unserem Fall möglicherweise nicht erforderlich). Dann wirst du das bemerken optimierenLegibilität und Webkits Schriftglättung, Alle bewährten Methoden, um sicherzustellen, dass unsere Typografie in verschiedenen Browsern optimal dargestellt wird.
Jedenfalls ignorieren wir diese Stile vorerst alle wir Stellen Sie sicher, dass auf unser Logo-Element die neue Schriftfamilie angewendet wird:
Vectr
.Logo Schriftfamilie: 'vectr';
Das ist es! Immer wenn unser Browser auf ein Element der Klasse "Logo" mit dem Inhalt "Vectr" trifft, wird unser Logo angezeigt. Jetzt können Sie allein durch CSS die Größe, Farbe, verschiedene andere CSS-Effekte und alle 100% -Auflösung unabhängig ändern.
Machen Sie sich bereit: Ligaturen werden von IE9 und früheren Versionen nicht unterstützt. Opera hat auch die Unterstützung seit Version 10 entfernt (obwohl Opera zu Webkit wechselt, wird sich dies wahrscheinlich bald ändern). Alle anderen modernen Browser, einschließlich mobiler Plattformen, spielen ziemlich gut, aber Sie müssen sicherstellen, dass Sie eine Fallback-Lösung für ältere Versionen von Internet Explorer haben.
Eine Möglichkeit, dies zu tun, wäre die Verwendung von bedingten Klassen in Ihrem HTML-Tag:
Auf diese Weise können Sie alle Versionen von IE identifizieren. Alles, was früher als IE10 hier ist, wird der Klasse zugewiesen lt-ie10. Sie können dann Ihre Logo-Stile in früheren Browsern überschreiben und eine Alternative zur Webfont-Ligatur definieren:
html.lt-ie10 .logo Hintergrund: etwas-oder-anderes-Ändern der Schriftart-Familie und so weiter;
Accentsconagua