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!