Entdecken Sie ältere Inhalte von Fonts.com, die zu Ihrer Information aufbewahrt werden.
Gruppierung von Web Fonts nach Familie
David Harned in. Archiv am 1. November 2013
Wir haben immer daran gearbeitet, dass Fonts.com Web Fonts schnell, zuverlässig und einfach zu bedienen ist. Heute freue ich mich, eine neue Option ankündigen zu können, auf die viele von Ihnen (und wir) schon seit einiger Zeit gewartet haben. Wir bieten jetzt die Möglichkeit, Web Fonts nach Font Familie zu gruppieren, so dass Sie verschiedene Gewichtungen unter einem CSS-Familiennamen verwenden können. Dies ermöglicht mehr standardbasiertes CSS und saubereres HTML auf Ihrer Website.
Wenn Sie Fonts lieber als einzelne Gewichte referenzieren möchten oder einfach mit dem Dienst in seiner jetzigen Form zufrieden sind: Keine Sorge, wir bieten diesen neuen Ansatz als Option bei der Erstellung von Projekten an - alle Ihre bestehenden Projekte haben sich also nicht geändert. Wir empfehlen Ihnen, diese neue Funktion auch für neue Projekte zu nutzen, wenn Sie sich weiterentwickeln.
Ich werde Ihnen zeigen, wie es funktioniert.
IN DEN FRÜHEN TAGEN DES INTERNETS FONTS
Zunächst ein paar Hintergrundinformationen, falls Sie sich fragen, warum unser Dienst ursprünglich nicht auf diese Weise aufgebaut war. Die Gruppierung von Web Fonts nach Familien ist nicht neu; dies war immer die Absicht auf der Grundlage der W3C-Spezifikation für CSS. Aber damals, 2010, als wir Fonts.com Web Fonts ins Leben riefen, war die Browserunterstützung noch nicht so weit, wie sie heute ist.
Damals konnte man zwar Fonts mit @Font-face nach Familien gruppieren, aber diese Konfigurationen brachten die Safari-Browser unter iOS 3 häufig zum Absturz - nichts, was wir unseren Kunden zumuten wollten. Dieses Problem wurde mit iOS 4.2 behoben. Da die Benutzer jetzt auf iOS 7 umsteigen, gehört dieses Problem der Vergangenheit an, so dass es an der Zeit ist, dieses Ändern zu veröffentlichen.
Werfen wir einen Blick auf unsere Font Handhabung vor der heutigen Veröffentlichung.
JEDES GEWICHT BEKOMMT SEINE EIGENE FAMILIE...
In der Vergangenheit wurde unser Web Fonts einzeln referenziert, jede innerhalb ihrer eigenen Familie. Dies ist auch heute noch die Standardoption für neue Projekte, und Entwickler, die diese bestehende Implementierung verwenden, müssen keine Änderungen vornehmen, um den Dienst weiterhin nutzen zu können.
Wie immer würden Sie einfach den JS- oder CSS-Verweis auf unseren Dienst in die <head> Ihrer Website wie folgt:
<script type="text/javascript" src="http://fast.fonts.net/jsapi/8ac15764-9118-4c43-8a15-3fd234faa0e5.js"></script>
Wir bearbeiten die @font-face Deklarationen, so dass Sie einfach auf Fonts einzeln verweisen können, wobei jedes Gewicht zu einer eigenen Familie gehört.
Font-Familie:'Metro Nova W01 Regular';
Font-family:'Metro Nova W01 Bold';
Font-Familie:'Metro Nova W01 Kursiv';
Angenommen, Sie möchten eine fette Schrift verwenden, die bei der Verwendung der <strong> Tag innerhalb eines Textabsatzes. Nehmen wir an, Sie haben auch einen Abschnitt des Absatzes, den Sie in der kursiven Schrift Schrift innerhalb dieser Familie wiedergeben möchten, indem Sie das <em> Tag.
Ihr Seitencode würde wie folgt aussehen:
<p>This is a paragraph of text and <strong> this section is bold</strong>, while the rest is not. However, <em>this section is italic</em>.</p>
Angenommen, Sie wollen nicht, dass der Browser die reguläre Gewichtung Font verzerrt, um einen Pseudo-Fett- oder Kursiv-Effekt zu erzeugen, dann müssten Sie jedes Mal eine neue Font -Familie aufrufen, wenn Sie Ändern eine Schrift fett oder kursiv machen wollen, damit die verschiedenen Font referenziert werden.
Ihr CSS-Code würde wie folgt aussehen:
p {font-family:'Metro Nova W01 Regular'; font-size:2em;}
p strong {font-family:'Metro Nova W01 Bold'; font-weight:normal;}
p em {font-family:'Metro Nova W01 Italic'; font-style:normal;}
Für die Fettschrift Font müssten Sie einen Font-weight:normal Wert zuweisen, da Sie die "normale" Instanz der Fettschrift Font verwenden würden. Für den kursiven Font müssten Sie auch einen Font-style:normal Wert zuweisen, da Sie die "normale" Instanz des kursiven Font verwenden würden. Das ist etwas umständlich, aber erforderlich, damit die richtigen Gewichtungen und Stile angewendet werden, wenn auf jede Font innerhalb ihrer eigenen Familie verwiesen wird.
Das Endergebnis würde wie folgt aussehen:
Das funktioniert. Schauen wir uns nun die neue Option an, die Sie haben.
GRUPPIEREN SIE DIE FONTS NACH FAMILIEN!
Jetzt gibt es eine weitere Möglichkeit. Wenn Sie die Gruppierung der Font -Familien aktivieren, gruppieren wir die Familien zusammen und ermöglichen die Kontrolle über die CSS Font-Gewichtung (100-900) und CSS Font-Style (normal, kursiv). Wir setzen diese Werte auf die Werte, die wir für am besten geeignet halten, aber Sie können sie so einstellen, wie es für Sie und Ihr Projekt am besten ist.
Öffnen Sie zunächst das Projekt und rufen Sie dann das Fenster "Hinzufügen & Bearbeiten Fonts" auf, um die "Familiengruppierung zu aktivieren".
Dann passen Sie die CSS Font-weight und CSS Font-style an - oder lassen Sie sie einfach so wie sie sind!
Wenn Sie alles so haben, wie Sie es wünschen, speichern Sie Ihre Änderungen. In den Veröffentlichungsoptionen sehen Sie, dass die Familien von Font jetzt gruppiert sind und Sie sie in einer einzigen Familie referenzieren können, anstatt in drei.
Font-Familie:'Metro Nova W01';
Anhand des obigen Beispiels würden Sie sie auf diese Weise in Ihrem CSS-Code referenzieren.
p {font-family:'Metro Nova W01'; font-size:2em;}
Die normale (400) Gewichtung wird als Standardgewichtung verwendet. Die Fettschrift (700) wird nun automatisch vom Browser referenziert, wenn Sie die Option <strong> Tag, so wie die kursive Version referenziert wird, wenn Sie den <em> Tag. Hier ist noch einmal die html-Datei, die auf der Seite angezeigt wird.
<p>This is a paragraph of text and <strong> this section is bold</strong>, while the rest is not. However, <em>this section is italic</em>.</p>
Das Endergebnis würde wie folgt aussehen.
Sieht genauso aus, aber mit weniger Code und mit einem Code, der mehr auf Standards basiert.
Nehmen wir jedoch an, dass die Fettschrift nicht fett genug für Ihr Design ist. Gehen Sie zurück zum Fenster "Hinzufügen & Bearbeiten Fonts" und stellen Sie unter Ändern die zusätzliche schwarze Schriftstärke auf "700" und dann die Fettschriftstärke auf einen anderen Wert ein - nicht 700, damit es keinen Konflikt mit der Fonts in der Familie gibt.
Speichern Sie Ihre Änderungen und veröffentlichen Sie Ihr Projekt erneut. Jetzt übernimmt der Browser die von Ihnen zugewiesene Gewichtung 700 und verweist stattdessen auf die zusätzliche schwarze Gewichtung. Ihre Seite sieht jetzt so aus. Schön!
ZUSAMMENFASSUNG
Das war's schon. Sie können diese Funktion nach Belieben für Ihre verschiedenen Projekte aktivieren und deaktivieren. Probieren Sie es aus!
Wie bei jeder neuen Technologie-Implementierung ist es ratsam, nicht zu versuchen, ein bestehendes Live-Projekt zu ändern, um diese Funktion ohne einige Tests zu aktivieren, da dies sehr wohl das Rendering Ihrer Website beeinträchtigen könnte, da es das CSS ändert, das geliefert wird. Um Störungen von Websites zu vermeiden, auf denen Sie bereits Web Fonts implementiert haben, empfehlen wir Ihnen, die Optionen für die Familiengruppierung erst in einem neuen Projekt zu verwenden. Weitere Einzelheiten zu den Auswirkungen dieser Funktion auf Ihr CSS finden Sie in dieser FAQ.
Wir hoffen, dass diese neue Funktion Ihre Erfahrung mit Fonts.com Web Fonts verbessert und es einfacher denn je macht, schöne Typografie ins Web zu bringen.