Variable Schriftarten: Was sie sind und wie sie verwendet werden können

In diesem Artikel werden wir uns die aufregenden neuen Möglichkeiten im Zusammenhang mit variablen Schriftarten ansehen - jetzt mit dem skalierbaren Openentyp -Format gebündelt -, mit dem sich eine einzelne Schriftart wie mehrere Schriftarten verhalten kann.

Key Takeaways

• variable Schriftarten, mit dem skalierbaren Schriftformat openentypen gebündelt, lassen Sie sich einer einzigen Schriftart wie mehrere Schriftarten verhalten, wobei die Variationen innerhalb der Schrift selbst definiert werden, die Schriftstruktur vereinfachen und die Leistung verbessern.
• variable Schriftarten können mit Schriftoptikalisgrößen, Schriftarten, Schriftgewicht und Schriftdruck für die Steuerung von Standardachsen oder die CSS-Eigenschaft für die Schrottvariations-Settings für die Steuerung mit niedriger Ebene über Openentyp oder Truetyp implementiert werden Schriftart Variationen.
• Leistung ist ein wesentlicher Vorteil von variablen Schriftarten, wobei eine einzelne Schriftdatei in der Lage ist, einen Gewichtsbereich zu erstellen, wodurch das Gewicht des Seitens erheblich reduziert wird. Das WOFF2 -Dateiformat kann diese Schriftarten weiter komprimieren und zusätzliche Leistungsvorteile bieten.
• Browserunterstützung für variable Schriftarten ist immer noch begrenzt, und Fallbacks müssen möglicherweise für Browser verwendet werden, die keine variablen Schriftarten unterstützen. Dies könnte das Servieren von nicht variablen Schriftarten oder die Verwendung eines Schriftsystems für Schriftsysteme beinhalten.
• Obwohl das Potenzial variabler Schriftarten in den Kinderschuhen steckt, ist es enorm, eine bessere Leistung und die Vereinfachung der Entwicklung zu bieten. Sie könnten die Abhängigkeit von mehreren Schriftart Dateien erheblich verringern und das Seitengewicht abschneiden.

wie wir hierher gekommen sind

Als HTML erstellt wurde, wurden Schriftarten und Stile ausschließlich durch die Einstellungen jedes Webbrowsers gesteuert. Mitte der 90er Jahre wurden die ersten Schriften für Bildschirm-basierte Medien erstellt: Georgia und Verdana. Diese, zusammen mit den Systemschriften - Arial, Times New Roman und Helvetica - waren die einzigen Schriftarten für Webbrowser (nicht genau die einzigen, aber die, die wir in jedem Betriebssystem finden konnten).

Mit der Entwicklung von Webbrowsern wie dem -Tag über Netscape Navigator und der ersten CSS -Spezifikation ermöglichten Webseiten, welche Schriftart angezeigt wurde. Diese Schriftarten mussten jedoch auf dem Computer des Benutzers installiert werden.

Im Jahr 1998 schlug die CSS-Arbeitsgruppe die Unterstützung der @font-face-Regel vor, damit jede Schrift auf Webseiten gerendert werden kann. IE4 implementierte die Technologie, aber die Verteilung von Schriftarten auf den Browser eines jeden Benutzers erhöhte Lizenz- und Piraterie -Probleme.

In den frühen 2000er Jahren stieg der Bildersatztechniken auf, der den HTML-Inhalt durch stilte Textbilder ersetzte. Jeder Textstück musste in Programmen wie Photoshop in Scheiben geschnitten werden. Diese Technik hatte den größten Vorteil, dass Designer eine beliebige Schrift verwenden konnten, ohne sich mit der Schriftlizenzierung befassen zu müssen.

2008 feierte @font-face endlich ein Comeback, als Apple Safari und Mozilla Firefox es implementierten. Dies ergab sich aus der Notwendigkeit, Desigern und Entwicklern eine einfache Möglichkeit zu bieten, benutzerdefinierte Schriftarten und nicht unzugängliche Bilder zu verwenden.

Erst die Ankunft des CSS3 -Schriftartenmoduls im Jahr 2012 wurde das Herunterladen von Schriftart praktikabel. Nach der Implementierung konnte eine von einer Webseite heruntergeladene Schriftart nur auf dieser Seite verwendet und nicht in das Betriebssystem kopiert werden. Durch das Herunterladen von Schriftarten können Remote -Schriftarten vom Browser heruntergeladen und verwendet werden, was bedeutet, dass Webdesigner jetzt Schriftarten verwenden konnten, die nicht auf dem Computer des Benutzers installiert wurden. Wenn Webdesigner die Schriftart fanden, die sie verwenden wollten, mussten sie nur die Schriftart auf den Webserver aufnehmen, und sie würde bei Bedarf automatisch an den Benutzer heruntergeladen. Diese Schriftarten wurden mit der @font-face-Regel verwiesen.

Um die @font-face-Regel zu verwenden, müssen wir einen Schriftnamen definieren und auf die Schriftartsdatei verweisen:

<span><span>@font-face</span> {
</span>  <span>font-family: Avenir Next Variable;
</span>  <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>

Die Schriftart kann eines von fünf verschiedenen Formaten sein: TTF, WOFF, WOFF2, SVG oder EOT. Jeder hat seine eigenen Vor- und Nachteile. Einfach ausgedrückt, EOT wurde von Microsoft erstellt und wird nur von Internet Explorer unterstützt. TTF ist die von Microsoft und Apple erstellte grundlegende Schriftart und funktioniert fast überall perfekt. SVG basiert auf Bildersatztechniken und ist nur für das Web geeignet. Schließlich wurden WOFF und WOFF2 auch ausschließlich für das Web erstellt und sind im Grunde TTF -Dateien mit zusätzlicher Komprimierung.

variable Schriftarten

Version 1.8 des Openentyps (das skalierbare Schriftformat des Computers) wurde 2016 veröffentlicht. Eine brandneue Technologie, die damit versandt wurde: OpenType -Schriftart Variationen, auch als variable Schriftarten bezeichnet.

Diese Technologie ermöglicht es einer einzigen Schriftart, sich wie mehrere Schriftarten zu verhalten. Dies geschieht durch Definieren von Variationen innerhalb der Schrift. Diese Variationen stammen aus der Tatsache, dass jeder Charakter nur einen Umriss hat. Die Punkte, die diese Umriss erstellen, haben Anweisungen, wie sie sich verhalten sollten. Es ist nicht erforderlich, mehrere Schriftgewichte zu definieren, da sie zwischen sehr schmalen und sehr breiten Definitionen interpoliert werden können. Dies ermöglicht es auch, Stile dazwischen zu generieren-zum Beispiel halbbummeln und mutig. Diese Variationen können entlang einer oder mehrerer Achsen der Schriftart wirken. Auf dem Bild unten haben wir ein Beispiel für diese Umrissinterpolation auf dem Buchstaben A.

Warum sind variable Schriftarten relevant?

variable Schriftarten können sowohl Einfachheit in unsere Schriftstruktur als auch die Leistungsverbesserungen bringen. Nehmen wir zum Beispiel eine Situation, in der unsere Website fünf Schriftstile benötigt. Es wäre wesentlich kleiner und schneller, eine einzelne variable Schriftart bereitzustellen, die diese fünf Stile rendern kann, als fünf verschiedene Schriftartdateien zu laden.

Verwenden von variablen Schriftarten

Es gibt derzeit zwei verschiedene Möglichkeiten, variable Schriftarten zu verwenden. Zunächst werden wir uns mit der modernen Art der Implementierung ansehen. Die CSS-Spezifikation bevorzugt die Verwendung von Schriftoptik-, Schriftarten-, Schriftgewichtig- und Schriftausstrichen stark, um die Standardachsen zu steuern.

.

font-optische Größe

Mit dieser Eigenschaft können Entwickler steuern, ob Browser Text mit etwas unterschiedlichen visuellen Darstellungen rendern oder nicht, um die Anzeige an verschiedenen Größen zu optimieren. Es kann den Wert nicht annehmen, denn wenn der Browser die Form der Glyphen nicht ändern kann, oder wenn er kann, wann es kann. Auf einem Browser, der die Schriftgrößen mit der Schriftstelle unterstützt, kann eine Schriftart, in der der Wert auf automatisch eingestellt ist

mit dem Wert, der auf keine gesetzt ist, gibt es keine Abweichung zur Schriftart.

Schriftstil

Diese Eigenschaft gibt an, ob eine Schriftart mit einem normalen, kursiven oder schrägen Gesicht aus ihrer Schriftfamilie gestylt werden soll. Es kann die normalen, kursiven oder schrägen Werte erfordern.

Schriftgewicht

Diese Eigenschaft gibt das Gewicht (oder die Kühnheit) der Schrift an. Eine Sache zu beachten ist, dass mit normalen Schriftarten benannte Instanzen definiert werden können. Zum Beispiel ist BOLD das gleiche wie Schriftgewicht: 700 oder Extra-Light entspricht dem Schriftgewicht: 200. Die Schriftbeschreibung kann auch zwischen 1 und 1000 eine beliebige Zahl sein, aber bei Verwendung variabler Schriftarten aufgrund Die Interpolarität, wir können eine viel feinere Granularität haben. Zum Beispiel ist ein Wert wie Schriftgewicht: 200.01 jetzt möglich.

Schriftstärke

Diese Eigenschaft wählt eine normale, kondensierte oder erweiterte Gesicht aus einer Schriftart aus. Genau wie bei der Schrift im Schriftgewicht kann es sich um eine benannte Instanz handeln, die extra und normal oder ein Prozentsatz zwischen 0% und 100% ist. Außerdem werden benannte Instanzen bekannte Prozentsätze zugeordnet. Beispielsweise wird extra-kondensikiert 62,5%.

Für dieses Beispiel habe ich eine sehr einfache Seite mit einer einzelnen

Überschrift und

Absatz erstellt.

Siehe die Variablen -Schriftarten html von sitepoint (@sinepoint) auf CodePen.

Derzeit sieht unsere nicht stylierte Webseite so aus:

Um eine variable Schriftart zu verwenden, müssen wir eine geeignete Datei finden. Das V-FONT-Projekt bietet ein Schriftart Repository, in dem wir alle Arten von variablen Schriftarten suchen und experimentieren können. Ich habe mich entschlossen, die AveniRnext -Schriftart zu verwenden und sie von seiner offiziellen Github -Seite zu verknüpfen.

Dann müssen wir eine CSS -Datei erstellen, um diese neue Schriftart zu laden:

<span><span>@font-face</span> {
</span>  <span>font-family: Avenir Next Variable;
</span>  <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>

Siehe die variable Schriftart von SitePoint (@sinepoint) auf CodePen.

Aufgrund von Browser -Unterstützungsproblemen wird dieses Beispiel nur Schriftarten in Safari und Chrom angewendet.

Mit unserer Schriftart können wir jetzt die Schriftgewichtseigenschaft verwenden, um die Gewichtsachse unserer variablen Schriftart zu manipulieren.

<span><span>@font-face</span> {
</span>  <span>font-family: Avenir Next Variable;
</span>  <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>

Siehe die variable Schriftart der Stiftquellen von SitePoint (@sinepoint) auf CodePen.

Die meiste Zeit benötigen wir auch zwei verschiedene Schriftdateien: eine für kursiv und eine für reguläre Schriftarten (Roman). Dies geschieht, weil die Konstruktion dieser Schriftarten radikal unterschiedlich sein kann.

Verwenden von Schrift-Variations-Settings

Die zweite Möglichkeit der Verwendung variabler Schriftarten besteht darin, die CSS-Eigenschaft mit Schriftarten zu verwenden. Diese Eigenschaft wurde eingeführt, um die Kontrolle über Opentypen- oder Truetyp-Schriftvariationen zu liefern, indem die Namen der Vier-Buchstaben-Achsennamen der Merkmale angegeben werden, die Sie zusammen mit ihren Variationswerten variieren möchten. Derzeit haben wir Zugriff auf die folgenden Aspekte der Schriftart:

• wght-Gewicht, das identisch mit der CSS-Eigenschaft mit Schriftgewicht ist. Der Wert kann alles von 1 bis 999 betragen.
• wdth-Breite, die mit der Schrott-Stretch-CSS-Eigenschaft identisch ist. Es kann ein Schlüsselwort oder einen prozentualen Wert benötigen. Diese Achse wird normalerweise vom Schriftart Designer definiert, um sich elegant zu erweitern oder zu verdichten.
• opsz-optische Größe, die mit der Eigenschaft mit Schriftoptikgrößen ein- und ausgeschaltet werden kann.
• Italisation-Kursivisierung, die von der CSS-Eigenschaft im Schriftart gesteuert wird, wenn auf eine kursive Seite eingestellt wird.
• slnt-Slant, das identisch mit der CSS-Eigenschaft im Schriftart identisch ist, wenn sie auf schräg eingestellt ist. Es wird in einer 20 -Grad -Neigung standardmäßig eingestellt, aber es kann auch einen bestimmten Abschluss zwischen -90 ° und 90 Grad akzeptieren.

gemäß der Spezifikation ist diese Eigenschaft eine Funktion mit niedrigem Niveau, in der spezielle Fälle behandelt werden können, in denen keine andere Möglichkeit zum Aktivieren oder Zugriff auf eine Opentype-Schriftart vorliegt. Aus diesem Grund sollten wir stattdessen versuchen, @font-face zu verwenden.

Versuchen wir, das Gewicht und die Breite auf unserer Schriftart mit dem Low-Level-Controller zu setzen:

<span><span>@font-face</span> {
</span>  <span>font-family: 'Avenir Next Variable';
</span>  <span>src: <span>url('AvenirNext_Variable.ttf')</span> format('truetype');
</span><span>}
</span>
<span>body {
</span>  <span>font-family: 'Avenir Next Variable', sans-serif;
</span><span>}
</span>

Siehe die Variablen -Schriftarten 1 von SitePoint (@sinepoint) auf CodePen.

Die Deklaration entspricht der folgenden CSS -Deklaration:

<span><span>@font-face</span> {
</span>  <span>font-family: Avenir Next Variable;
</span>  <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>

Leistung

Leistung ist ein wesentlicher Vorteil von variablen Schriftarten. Die Font -Datei avenirnNext_variable.ttf ist nur 89 KB, erstellt jedoch eine Reihe von Gewichten. Eine vergleichbare Standard -Schriftart hat möglicherweise eine kleinere Datei, würde jedoch nur ein Gewicht und einen Stil unterstützen. Weitere Optionen erfordern zusätzliche Dateien und erhöhen Sie das Seitengewicht entsprechend.

Aber wir können noch weiter gehen. Als wir über Schriftformate sprachen, sagten wir, dass WOFF2 -Dateien im Wesentlichen TTF -Dateien mit zusätzlicher Komprimierung sind. WOFF2-Dateien sind kleiner, da sie benutzerdefinierte Vorverarbeitungs- und Komprimierungsalgorithmen verwenden, um eine Reduzierung von ~ 30% Dateigröße gegenüber anderen Formaten zu liefern.

Google bietet ein Befehlszeilen -Tool an, mit dem unsere Datei in einem WOFF2 -Format konvertiert wird.

Auf der offiziellen Github -Seite des Tools finden wir alle Informationen dazu. Um es in einer Unix -Umgebung zu installieren, können wir die folgenden Befehle verwenden:

<span><span>@font-face</span> {
</span>  <span>font-family: 'Avenir Next Variable';
</span>  <span>src: <span>url('AvenirNext_Variable.ttf')</span> format('truetype');
</span><span>}
</span>
<span>body {
</span>  <span>font-family: 'Avenir Next Variable', sans-serif;
</span><span>}
</span>

Nach dem Installieren können wir sie verwenden, um unsere variable Schriftart zu komprimieren, indem wir:

verwenden

<span>h1 {
</span>  <span>font-family: 'Avenir Next Variable';
</span>  <span>font-weight: 430;
</span><span>}
</span>

und wir haben eine 42 -KB -Datei, die die Dateigröße halbierte. Um diese Datei zu verwenden, müssen wir nur die gesammelte Datei und ihr Format ändern, um diese neue Datei zu erfüllen:

<span>p {
</span>  <span>font-variation-settings: 'wght' 630, 'wdth' 88;
</span><span>}
</span>

Wir haben jetzt eine einzige 42 -KB -Datei, die für alle Schriftgewichte auf unserer Seite verwendet werden kann. Der einzige Nachteil des WOFF2 -Formats ist, dass es nicht vom Internet Explorer unterstützt wird.

Servieren verschiedener Dateien für verschiedene Browser

Während einige moderne Browser bereits variable Schriftarten unterstützen (Firefox Developer -Editionen haben ein gewisses Maß an Unterstützung, Chrome 62, Chrome Android, Safari IOS und Safari), könnte es den Fall geben, in dem wir einen finden, der es nicht finden.

Um dies zu umgehen

Browser, die variable Schriftarten unterstützen, laden die als Format gekennzeichnete Datei herunter ('Woff2-Variations'), während Browser, die die als Format ('TTF') gekennzeichnete Schriftart für einen einzelnen Stil nicht herunterladen. Dies ist möglich, da wir Referenzen auf Variablen in jeder Regel wiederholen können. Wenn der erste fehlschlägt, wird der zweite geladen. Genau wie im Folgenden:

<span>p {
</span>  <span>font-weight: 630;
</span>  <span>font-stretch: 88;
</span><span>}
</span>

Das nächste Beispiel verwendet ein anderes Dateiformat als das, mit dem wir arbeiten, aber dasselbe Prinzip verwendet:

Siehe den Stift mehrere Schriftarten von SitePoint (@sitepoint) auf CodePen.

Wenn wir das Ergebnis in einem Browser überprüfen, das variable Schriftarten wie Chrome unterstützt, können wir Folgendes sehen:

Auf einem Browser, der keine variablen Schriftarten wie Firefox unterstützt, wird die zweite Schriftart geladen und das Ergebnis sieht so aus:

Aber wenn wir immer noch nicht variable Schriftarten an Browser servieren müssen, die keine variablen unterstützen, verlieren wir nicht die Leistung, die wir gerade mit der variablen Schriftart gewonnen haben? Wenn ein Browser die Standardschrift nur laden kann, verlieren wir die Leistung und bringen die Vorteile variabler Schriftarten. In diesen Situationen kann es vorzuziehen sein, einen vergleichbaren Betriebssystem zu fällen, anstatt sie durch viele feste Schriftarten zu ersetzen.

Schlussfolgerung

Obwohl es seit mehreren Jahren verfügbar ist, stehen variable Schriftarten noch in den Kinderschuhen. Die Browserunterstützung ist knapp und es stehen nur wenige Schriftarten zur Auswahl. Das Potenzial ist jedoch enorm, und variable Schriftarten ermöglichen eine bessere Leistung und vereinfachen gleichzeitig die Entwicklung. Beispielsweise lädt die eigene Titelseite von SitePoint derzeit acht Schriftartdateien mit insgesamt 273 KB. Variable Schriftarten könnten diese Abhängigkeit verringern und das Seitengewicht weiter abschneiden.

häufig gestellte Fragen (FAQs) zu variablen Schriftarten

Was sind die Vorteile der Verwendung von variablen Schriftarten? Erstens bieten sie eine breite Palette von Variationen aus einer einzelnen Schriftart, die die Dateigröße erheblich reduzieren und die Ladegeschwindigkeit einer Website verbessern kann. Dies ist besonders vorteilhaft für mobile Benutzer, die möglicherweise nur begrenzte Datenpläne haben. Zweitens ermöglichen variable Schriftarten kreatives und reaktionsschnelles Design. Designer können das Gewicht, die Breite, die Neigung und andere Attribute der Schrift anpassen, um ein einzigartiges und dynamisches visuelles Erlebnis zu schaffen. Zuletzt können variable Schriftarten die Lesbarkeit von Text verbessern, insbesondere auf kleinen Bildschirmen oder Geräten mit niedriger Auflösung, indem feine Anpassungen an der Schriftart zur Schriftart ermöglicht werden.

Wie implementiere ich variable Schriftarten in CSS? > Die Implementierung variabler Schriftarten in CSS umfasst einige Schritte. Zunächst müssen Sie die variable Schriftdatei mit der @font-face-Regel importieren. Anschließend können Sie die Eigenschaft „Schriftart-Variations-Setting“ verwenden, um die Variationen der Schriftart anzupassen. Zum Beispiel "Schriften-Variations-Setting:" Wght "700;

Werden variable Schriftarten von allen Browsern unterstützt? Ältere Versionen dieser Browser und einige weniger häufige Browser unterstützen sie jedoch möglicherweise nicht. Es ist immer eine gute Idee, die spezifische Browser -Unterstützung für variable Schriftarten zu überprüfen und Fallback -Schriftarten für nicht unterstützte Browser bereitzustellen.

Kann ich variable Schriftarten mit Google -Schriftarten verwenden? . Wenn Sie eine Schriftart bei Google -Schriftarten auswählen, können Sie die Option „Variable“ auswählen, um die variable Schriftart zu laden. Sie können dann die Eigenschaft "Schriftart-Variations-Setting" in CSS verwenden, um die Variationen der Schriftart zu passen.

Was sind einige beliebte variable Schriftarten? Diese Schriftarten bieten eine breite Palette von Variationen und eignen sich für verschiedene Designstile. Sie können variablere Schriftarten auf Websites wie V-fonts.com oder Google-Schriftarten finden.

Wie kann ich meine eigenen variablen Schriftarten erstellen? Spezifische Software wie Fontlab VI oder Glyphen. Mit diesen Programmen können Sie die unterschiedlichen Variationen der Schriftart entwerfen und als einzelne variable Schriftdatei exportieren. Schriftart Design ist jedoch ein komplexer Prozess, der viel Übung und Fähigkeiten erfordert.

Was sind die Einschränkungen variabler Schriftarten? Nicht alle Schriftarten sind im variablen Format erhältlich, und nicht alle Browser unterstützen sie. Darüber hinaus kann die Anpassung der Variationen einer Schriftart komplex sein und erfordert ein gutes Verständnis von CSS und Schriftart. Zwar können variable Schriftarten die Dateigröße reduzieren, aber sie können sie auch erhöhen, wenn viele Variationen verwendet werden.

Wie verbessern variable Schriftarten die Webleistung? Die Anzahl der Schriftdateien, die geladen werden müssen. Anstatt mehrere Dateien für verschiedene Schriftgewichte und -stile zu laden, kann eine Website eine einzelne variable Schriftdatei laden und die Variationen nach Bedarf anpassen. Dies kann die Dateigröße reduzieren und die Ladegeschwindigkeit der Website verbessern.

Können variable Schriftarten animiert werden? Durch Animieren der Eigenschaft "Schriftart-Variations-Settings" können Sie dynamische Texteffekte erstellen, die das Gewicht, die Breite, die Neigung oder andere Attribute der Schriftart im Laufe der Zeit ändern.

Während es schwierig ist, die Zukunft der Web -Typografie vorherzusagen, haben variable Schriftarten sicherlich das Potenzial, eine große Rolle zu spielen. Ihre Flexibilität, Effizienz und ihr kreatives Potenzial machen sie zu einem leistungsstarken Tool für Webdesigner. Ihre Annahme hängt jedoch von der Browserunterstützung, der Verfügbarkeit variabler Schriftarten und den Bedürfnissen und Fähigkeiten der Designer ab.

Das obige ist der detaillierte Inhalt vonVariable Schriftarten: Was sie sind und wie sie verwendet werden können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!