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; }
}

···