Fallbacks und Browserunterstützung

Alle modernen Browser unterstützen variable Schriftarten. Falls Sie ältere Browser unterstützen müssen, können Sie Ihre Website mit statischen Schriftarten erstellen und variable Schriftarten als progressive Erweiterung verwenden:

/* Set up Roboto for old browsers, only regular + bold */
@supports not (font-variation-settings: normal) {
@font-face {
font-family: Roboto;
src: url('Roboto-Regular.woff2');
font-weight: normal;
}

@font-face {
font-family: Roboto;
src: url('Roboto-Bold.woff2');
font-weight: bold;
}

body {
font-family: Roboto;
}

.super-bold {
font-weight: bold;
}
}

/* Set up Roboto for modern browsers, all weights */
@supports (font-variation-settings: normal) {
@font-face {
font-family: 'Roboto';
src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
url('RobotoFlex-VF.woff2') format('woff2-variations');
font-weight: 100 1000;
font-stretch: 25% 151%;
}

.super-bold {
font-weight: 1000;
}
}

Leistungsgewinne

Mit variablen OpenType-Schriftarten können wir mehrere Variationen einer Schriftfamilie in einer einzigen Schriftartdatei speichern. Monotype führte ein Experiment durch, indem es 12 Eingabefonts kombinierte, um acht Strichstärken in drei Breiten sowohl für den kursiven als auch für den römischen Stil zu erzeugen. Das Speichern von 48 einzelnen Schriftarten in einer einzigen Datei mit variablen Schriftarten bedeutete eine Reduzierung der Dateigröße um 88 %.
Wenn Sie jedoch eine einzelne Schriftart wie Roboto Regular und nichts anderes verwenden, sehen Sie möglicherweise keinen Nettogewinn an Schriftgröße, wenn Sie zu einer variablen Schriftart mit vielen Achsen wechseln würden. Wie immer hängt es von Ihrem Anwendungsfall ab.
Auf der anderen Seite kann das Animieren der Schriftart zwischen den Einstellungen zu Leistungsproblemen führen. Obwohl sich dies verbessern wird, sobald die Unterstützung für variable Schriftarten in Browsern ausgereifter wird, kann das Problem etwas verringert werden, indem nur aktuell auf dem Bildschirm angezeigte Schriftarten animiert werden. Dieses praktische Snippet von Dinamo pausiert Animationen in Elementen mit der Klasse vf-animation, wenn sie nicht auf dem Bildschirm sind:
var observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
// Pause/Play the animation
if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
else entry.target.style.animationPlayState = "paused"
});
});

var variableTexts = document.querySelectorAll(".vf-animation");
variableTexts.forEach(function(el) { observer.observe(el); });

Vererbung der Schriftart-Variationseinstellungen

Während alle registrierten Achsen bald durch vorhandene CSS-Eigenschaften unterstützt werden, müssen Sie sich vorerst möglicherweise auf Font-Variation-Settings als Fallback verlassen. Und wenn Ihre Schriftart benutzerdefinierte Achsen hat, benötigen Sie auch Einstellungen für Schriftartvariationen.
Hier ist jedoch ein kleines Problem mit den Einstellungen für Schriftartvariationen. Jede Eigenschaft, die Sie nicht explizit festlegen, wird automatisch auf ihren Standardwert zurückgesetzt. Zuvor eingestellte Werte werden nicht vererbt! Das bedeutet, dass Folgendes nicht wie erwartet funktioniert:
<span class="slanted grade-light">
I should be slanted and have a light grade
</span>

Zuerst wendet der Browser Schriftart-Variationseinstellungen an: 'slnt' 10 aus der .slanted-Klasse. Dann werden die Einstellungen für Schriftartvariationen angewendet: 'GRAD' -200 aus der Klasse .grade-light. Aber dies wird den slnt auf seinen Standardwert von 0 zurücksetzen! Das Ergebnis ist ein Text in einem leichten Grad, aber nicht schräg.

/* Set the default values */
:root {
--slnt: 0;
--GRAD: 0;
}

/* Change value for these elements and their children */
.slanted {
--slnt: 10;
}

.grade-light {
--grad: -200;
}

.grade-normal {
--grad: 0;
}

.grade-heavy {
--grad: 150;
}

/* Apply whatever value is kept in the CSS variables */
.slanted,
.grade-light,
.grade-normal,
.grade-heavy {
font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD);
}
CSS-Variablen werden kaskadiert, wenn also ein Element (oder eines seiner Eltern) den slnt auf 10 gesetzt hat, behält es diesen Wert bei, selbst wenn Sie GRAD auf etwas anderes setzen. Eine ausführliche Erläuterung dieser Technik finden Sie unter Beheben der Vererbung von variablen Schriftarten.
Beachten Sie, dass das Animieren von CSS-Variablen nicht funktioniert (absichtlich), also funktioniert so etwas nicht:
@keyframes width-animation {
from { --wdth: 25; }
to { --wdth: 151; }
}

Benutzerdefinierte Achsen verwenden

Im Gegensatz zu registrierten Achsen werden benutzerdefinierte Achsen keiner vorhandenen CSS-Eigenschaft zugeordnet, sodass Sie sie immer über die Schriftartvariationseinstellungen festlegen müssen. Tags für benutzerdefinierte Achsen werden immer in Großbuchstaben geschrieben, um sie von registrierten Achsen zu unterscheiden.
Roboto Flex bietet einige benutzerdefinierte Achsen an, und die wichtigste ist Grade (GRAD). Eine Grade-Achse ist interessant, da sie die Stärke der Schriftart ändert, ohne die Breite zu ändern, sodass sich Zeilenumbrüche nicht ändern. Indem Sie mit einer Grade-Achse spielen, können Sie vermeiden, dass Sie gezwungen sind, mit Änderungen an der Gewichtsachse herumzuspielen, die sich auf die Gesamtbreite auswirken, und dann auf Änderungen an der Breitenachse, die sich auf die Gesamtgewichtung auswirken.

Da GRAD eine benutzerdefinierte Achse ist, mit einem Bereich von -200 bis 150 in Roboto Flex. Wir müssen es mit Font-Variation-Settings adressieren:
.grade-light {
font-variation-settings: GRAD -200;
}

.grade-normal {
font-variation-settings: GRAD 0;
}

.grade-heavy {
font-variation-settings: GRAD 150;
}